Jquery validate checkbox by class name

Question

i want to validate check box by jquery validation adding rule and message. i did this way but some where i made the mistake for which code is not working.

i want user has to select one checkbox at least before form submit.

code

<form id="myform">
    <input type="checkbox" name="test[]" class="clschk" />x
    <input type="checkbox" name="test[]"  class="clschk"/>y
    <input type="checkbox" name="test[]"  class="clschk"/>z
    <input type="submit" />
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

js code

$(document).ready(function () {
    $('#myform').validate({ // initialize the plugin
        rules: {
            '.clschk': {
                required: true,
                maxlength: 2
            }
        },
        messages: {
            '.clschk': {
                required: "You must check at least 1 box",
                maxlength: "Check no more than {0} boxes"
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });
});

koolhuman · Accepted Answer · 2016-03-30 15:25:11Z

2

you can add validation messages based on class by using addClassRules method and then you can override the default messages by below code

$.validator.addMethod("cRequired", $.validator.methods.required,"You must check at least 1 box");

$(document).ready(function () {
    $.validator.addClassRules({

    clschk:{
        cRequired: true,
        cmaxlength: 2
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }


});

$('#myform').validate();

$.validator.addMethod("cRequired", $.validator.methods.required,"You must check at least 1 box");

$.validator.addMethod("cmaxlength", $.validator.methods.maxlength,"You must check at least 1 box");

});

updated fiddle - http://jsfiddle.net/Nbcj9/398/

answered Mar 30, 2016 at 15:25

koolhuman

1,64918 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mou Over a year ago

what this line will do $('#myform').validate();?

koolhuman Over a year ago

$('#myform').validate() initializes the validator and the validator will start validating the form.

Mou Over a year ago

please see this post stackoverflow.com/questions/36316776/…

Rory McCrossan · Accepted Answer · 2016-03-30 13:37:50Z

2

The issue is simply because the keys of the rules object must be equal to the name property of the element, not a selector for it. Try this:

$('#myform').validate({ // initialize the plugin
    rules: {
        'test[]': { // note here
            required: true,
            maxlength: 2
        }
    },
    messages: {
        'test[]': { // and here
            required: "You must check at least 1 box",
            maxlength: "Check no more than {0} boxes"
        }
    },
    submitHandler: function(form) {
        alert('valid form submitted');
        return false; // for demo
    }
});

Working example

answered Mar 30, 2016 at 13:37

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

9 Comments

Rory McCrossan Over a year ago

Not by default using jQuery validate. You would need to re-write how their rules engine works, or find another validation library.

Mou Over a year ago

some time i have checkboxes whose name start with student_ after under score name is dynamic like hobbies_0_name,hobbies_1_name so on..in this case how to handle using wild card....idea plzz.

Mou Over a year ago

can we work with wild card for name when name is not fixed?

Rory McCrossan Over a year ago

No, it has to be the exact name of the element.

Mou Over a year ago

see this fiddle jsfiddle.net/Nbcj9 they use class name...how can i use it for my code where i will set validation msg too.

|

Collectives™ on Stack Overflow

Jquery validate checkbox by class name

code

js code

2 Answers 2

3 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

code

js code

2 Answers 2

3 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related