复选框的jQuery验证消息不起作用

Posted

技术标签:

【中文标题】复选框的jQuery验证消息不起作用【英文标题】:jquery validation message for checkboxes not working 【发布时间】:2019-02-16 19:08:21 【问题描述】:

如果没有选中任何复选框,我需要收到“此字段为必填项”的消息。

查看:

<div style="width: 100%;">
                <label class="headlabel" id="passLable" name="passLable">Category List : <strong>*</strong></label>
                <div style="width: 100%;" class="form-group px-3">
                    <?php foreach ($cat as $data2)  ?>
                        <div class="form-check px-2" style="display: inline-block; margin-right: 20px;">
                            <input type="checkbox" class="form-check-input" value="<?php echo $data2->id ?>" name="cat[]" id="category">
                            <label class="form-check-label"
                                   style="padding-left: 10px;"><?php echo $this->lang->line($data2->cat_name); ?> </label>
                        </div>
                    <?php  ?>
                </div>
            </div>

js:

$(document).ready(function () 
   $('#addNewCompanyForm').each(function()
    $(this).validate(
        submitHandler : function()
            addNewCompany();
        ,
        rules:     
            'cat[]' : 
                required : true
            
        ,            

        messages:                 
             'cat[]' : 
                 required : "plase fill this."
             
        ,
        errorElement: "small",
        errorPlacement: function ( error, element ) 
            error.addClass( "form-control-feedback" );

            element.parents( ".form-group" ).addClass( "form-control-feedback" );

            if ( element.prop( "type" ) === "checkbox" ) 
                error.insertAfter( element.parent( "label" ) );
             else 
                error.insertAfter( element );
            
        ,
        highlight: function ( element, errorClass, validClass ) 
            $( element ).parents( ".form-group" ).addClass( "has-danger" ).removeClass( "has-success" );
            $('input').addClass( "form-control-danger" ).removeClass( "form-control-success" );
        ,
        unhighlight: function ( element, errorClass, validClass ) 
            $( element ).parents( ".form-group" ).addClass( "has-success" ).removeClass( "has-danger" );
            $('input').addClass( "form-control-success" ).removeClass( "form-control-danger" );
        
    );
);
);

这已经以红色显示复选框,但未显示任何消息。如何获取验证消息。

我已经在上面添加了完整的 js 代码。

编辑

【问题讨论】:

查看错误放置jqueryvalidation.org/validate/#errorplacement 显示带有错误位置的完整 js 代码 @LeenaPatel 我已经更新了我上面的代码 【参考方案1】:

在 foreach 循环下方添加 span

<div style="width: 100%;">
            <label class="headlabel" id="passLable" name="passLable">Category List : <strong>*</strong></label>
            <div style="width: 100%;" class="form-group px-3">
                <?php foreach ($cat as $data2)  ?>
                    <div class="form-check px-2" style="display: inline-block; margin-right: 20px;">
                        <input type="checkbox" class="form-check-input" value="<?php echo $data2->id ?>" name="cat[]" id="category">
                        <label class="form-check-label"
                               style="padding-left: 10px;"><?php echo $this->lang->line($data2->cat_name); ?> </label>
                    </div>
                <?php  ?>
                <span class="error" id='errorCheck'></span>
            </div>
        </div>

使用$('#errorCheck').html(error)

 $(document).ready(function () 
$('#addNewCompanyForm').validate(
    submitHandler : function()
        addNewCompany();
    ,
    rules:     
        'cat[]' : 
            required : true
        
    ,            

    messages:                 
         'cat[]' : 
             required : "plase fill this."
         
    ,
    errorElement: "small",
    errorPlacement: function ( error, element ) 
        error.addClass( "form-control-feedback" );

        element.parents( ".form-group" ).addClass( "form-control-feedback" );

        if ( element.hasClass( "form-check-input" )) 
            $('#errorCheck').html(error);
         else 
            error.insertAfter( element );
        
    ,
    highlight: function ( element, errorClass, validClass ) 
        $( element ).parents( ".form-group" ).addClass( "has-danger" ).removeClass( "has-success" );
        $('input').addClass( "form-control-danger" ).removeClass( "form-control-success" );
    ,
    unhighlight: function ( element, errorClass, validClass ) 
        $( element ).parents( ".form-group" ).addClass( "has-success" ).removeClass( "has-danger" );
        $('input').addClass( "form-control-success" ).removeClass( "form-control-danger" );
    
);
);

【讨论】:

请提供一些解释为什么这会起作用以及 OP 的方法有什么问题。 谢谢,现在它工作正常。但是错误消息显示在复选框值中。你知道如何对齐错误信息吗?我在上面添加了一张图片来展示它的显示方式。 是的,您可以在 foreach 循环下方添加空跨度并使用 element.next('span') 查看我编辑的代码 当使用element.next('span')时,错误信息根本不显示

以上是关于复选框的jQuery验证消息不起作用的主要内容,如果未能解决你的问题,请参考以下文章

淘汰赛导致 JQuery 选择出现问题?验证不起作用

复选框验证不起作用

使用 Angular js 验证 jquery 下拉插件不起作用

EqualTo Jquery Valid 不起作用[重复]

使用 Jquery 验证插件提交 Ajax 表单不起作用

jQuery:验证美国邮政的正则表达式不起作用