jquery validation message for checkboxes not working

Question

I need to get a message as "This field is required" if no checkbox has been checked.

View:

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

This already show the checkboxes in red colour but no message is shown. How can I get the validation message.

I have add my full js code above.

edit

see errorplacement http://jqueryvalidation.org/validate/#errorplacement — Zohaib, Sep 12 '18 at 07:58

Leena Patel · Accepted Answer · 2018-09-12T11:20:36.690

Add span below the foreach loop

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

Use $('#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" );
    }
});
});

Please provide some explanation why this will work and what is wrong in OP's approach. — Mayank Pandeyz, Sep 12 '18 at 10:07
Thanks now it works fine. But the error message is displaying within the checkbox values. Do you know how to align the error message? I have added an image above to show how it is displaying. — shavindip, Sep 12 '18 at 10:53
yeah you can add empty span below the foreach loop and use `element.next('span')` See my edited code — Leena Patel, Sep 12 '18 at 11:01
When using `element.next('span')` the error message is not showing at all — shavindip, Sep 12 '18 at 11:18

jquery validation message for checkboxes not working

1 Answers1