JQuery Validation Plugin: checkbox groups and error message problems

Question

I compiled the form using the jQuery Validation plugin and all inputs work fine with health checks and error messages - except for the checkboxes. I have two problems with checkbox.

Firstly, the Validation plugin API does not handle checkboxes in grouped contexts (I use fields to group). Several approaches to this problem were found here, including a link to a Rebecca Murphy post for a more general case using a custom method and class. Adapting this to this situation:

jQuery.validator.addMethod('required_group', function(val, el) { var fieldParent = $(el).closest('fieldset'); return fieldParent.find('.required_group:checked').length; }); jQuery.validator.addClassRules('required_group', { 'required_group': true }); jQuery.validator.messages.required_group = 'Please check at least one box.'; 

This view works, but it creates error messages with every checkbox and deletes them only with every click on each window. This is not an acceptable situation for a user who can only get rid of them by clicking false positives. Ideally, I assume that you need to prevent or exclude something from additional messages before displaying them and use errorPlacement to display a single error message in the parent field set, which will then be deleted by clicking on any flag. Less ideal, they may be displayed, but the event handler can disable the full set of redundant messages with a click, which means this approach suggested by tvanfosson seems to be (Another individual approach here , but I could not get it to work.) I think I I should also note that this form requires the flags to have different names.

My second problem is that one of the checkboxes in the form also contains a nested set of checkboxes under one of the external checkboxes. Therefore, in addition to the requirement of the first level with one box, if the checkbox containing the flags of the second level is checked, you must check at least one of the fields of the second level. Not sure about the right approach; I guess what should happen (according to the above diagram) is that the trigger flag will use toggleClass to add / remove the class "required_group" to all the flags in the subfield, which then (hopefully) behave the same as the parent field:

 $("#triggerCheckbox").click(function () { $(this).find(":checkbox").toggleClass("required_group"); }); 

Any suggestions or ideas are welcome. I am far beyond my limited jQuery skills on this and will be glad to hear that I missed the simple, elegant and / or obvious ways to do this!

Answer 1

I used to encounter a similar problem, although in my particular case I think it was easier for me than you - I had groups of checkboxes, but I did not need to check anything else on the form.

Here is a general idea that can solve your "one error per flag" problem:

 //for each fieldset, attach a new rule to the first checkbox $('fieldset input[type="checkbox"]:first').each(function(i,v){ $(v).rules('add', { required: "fieldset input[type="checkbox"]:unchecked" }); }); 

To do something sensible with validation errors, run your own showErrors . Here, where the simplicity of my case probably won’t help you - I didn’t have to worry about whether there were errors in the checkbox group or not, in my form, if there were any errors, it would be the same problem - at least at least one flag has not been checked for a set of fields. For you, I think you will have to delve into the function Validate plugin defaultShowErrors (in the source) to see what to do with the error and the list of errors.

 $('#myForm').validate({ ... showErrors: function(map,list){ if (this.numberofInvalids()){ $('#form_errors').html('You much choose at least one Checkbox per group'); } else { this.defaultShowErrors(); } } }); 

For the second part of your question, I think the rule “depends” is what you are looking for. Therefore, there is no need to add classes, you just need the rule for the subgroup to depend on the checked flag of the parent (see the Almost perfect example in the rules methods docs).