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

jquery form validation checkbox error display

本文关键字:错误 显示 复选框 验证 表单 jquery      更新时间:2023-09-26

我目前正在使用jquery表单验证用于验证表单。表单的一部分要求用户根据以下内容选择复选框;

    <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>

我的问题是,当用户在没有选择复选框的情况下提交表单时,错误显示在第一个复选框之后,即价格是固定的。如何将错误消息显示到底部,即掉期/交易选项之后。

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" );
                }
            } );
        } );

在当前代码中,您指定将其插入标签后:

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

因此,只需将其更改为在标签的父div之后插入即可:

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

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

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