Question

我目前正在使用jquery form validation 用于验证表格。表单的一部分要求用户选择如下所示的复选框;

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
             <label class="checkbox-inline">
              <input type="checkbox" class="chkbox" name="seltype" value="">Price is Firm
             </label>  
             <label class="checkbox-inline">
              <input type="checkbox" class="chkbox" name="seltype" value="">Negotiable
             </label> 
              <label class="checkbox-inline"> 
              <input type="checkbox" class="chkbox" name="seltype" value="">Swap/Trade
            </label>
        </div>
     </div>

我的问题是当用户提交表单而没有选择chekbox时，错误显示在第一个复选框之后，即Price是坚定的。如何将错误消息置于底部，即在交换/交易选项之后。

jquery

$( document ).ready( function () {
            $( "#fileupload" ).validate( {

        rules: {seltype:"required"},
        messages: {seltype:"Please select appropriate box"},
                errorElement: "em",
                errorPlacement: function ( error, element ) {
                    // Add the `help-block` class to the error element
                    error.addClass( "help-block" );

                    if ( element.prop( "type" ) === "checkbox" ) {
                        error.insertAfter( element.parent( "label" ) );
                    } else {
                        error.insertAfter( element );
                    }
                },
                highlight: function ( element, errorClass, validClass ) {
                    $( element ).parents( ".col-xs-5" ).addClass( "has-error" ).removeClass( "has-success" );
                },
                unhighlight: function (element, errorClass, validClass) {
                    $( element ).parents( ".col-xs-5" ).addClass( "has-success" ).removeClass( "has-error" );
                }
            } );

        } );

Answer 1

在您当前的代码中，您指定在标签后插入它：

error.insertAfter( element.parent( "label" ) );

所以只需将其更改为将其插入标签的父div：

之后

error.insertAfter( element.parent( "label" ).parent() );

或者在最后一个标签之后：

error.insertAfter( element.parent( "label" ).siblings(':last') );

jquery表单验证复选框错误显示

1 个答案: