jQuery validation: Indicate that at least one element in a group is required
I had a need today to indicate that at least one of a set of input fields was required. I was hoping there was a direct way to do this in the jQuery validation plugin; while the method isn't quite as straightforward as I was wishing for, it's still fairly simple.
To start with, I put class="required_group" on each of the elements in the group. Then, I added a custom validation method:
jQuery.validator.addMethod('required_group', function(val, el) { var $module = $(el).parents('div.panel'); return $module.find('.required_group:filled').length; });
... a custom class rule to take advantage of the new method:
jQuery.validator.addClassRules('required_group', { 'required_group' : true });
... and finally a custom message for the new method:
jQuery.validator.messages.required_group = 'Please fill out at least one of these fields.';
What I'd love to see is a way to specify a dependent group without using a custom class rule, but I'm not sure what this would look like, as all validation rules are either keyed off an element's class or the presence of the element's name in the rules object. Thoughts? I'm open to the possibility that there's a far better way to solve this --
April 16th, 2009 at 5:31 am
Its hard to produce a more generic solution to the problem here. But can simplify the code a bit, this should be enough:
jQuery.validator.addMethod(’required_group’, function(val, el) {
var $module = $(el).parents(’div.panel’);
return $module.find(’.required_group:filled’).length;
}, ‘Please fill out at least one of these fields.’);
That is, pass the default message as the third argument to addMethod. And addClassRules isn’t necessary at all, you can use the method name as a class once the method was added.
April 23rd, 2009 at 3:37 am
Merci pour cette petite fonction bien utile.
Thanks for that useful function !
April 24th, 2009 at 11:15 am
I want to do something similar and was hoping for some help. I have 2 fields (firstName and lastName) and I want them both to be required. Is there a way to use the validator to give an error if either or both is empty? In other words, instead of “Indicate that at least one element in a group is required” I want to “Indicate all elements in a group are required”.
April 24th, 2009 at 12:41 pm
@Vivian You may want to look into the errorPlacement setting. I’ve used this when I want to display a single error for a group of related fields.
April 24th, 2009 at 4:36 pm
Rebecca,
Thank you for replying so quickly. I played with doing that, and it works well for the errors, but I can’t figure out how to mark the success when they are both correct.
Right now I have:
errorPlacement : function(error, element) {
if (element.attr(”name”) == “firstName” || element.attr(”name”) == “lastName”) {
$(”#lastNameError”).html(” Please enter your first and last names.“);
} else {
error.appendTo(element.parent(”div”).next(”div”));
}
},
success : function(label) {
label.html(” ”).addClass(”success”);
},
I made an exception for the 2 fields to treat the error differently. But wondering how to mark success only if they are both correct. And I’m not sure if that’s the best way to handle if test in the errorPlacement.
June 25th, 2009 at 3:02 pm
I’m working on something similar, anyone have an idea on how to get this working for checkboxes? I’m trying to require at least one checkbox (altogether, not each) checked from two different groups of checkboxes. Each group has a different name so I haven’t been able to use the built in checkbox group.
July 9th, 2009 at 11:51 pm
@Justin: Try to select an element that wraps around both groups. This is what I have – it should work for you!
$.validator.addMethod('required_group', function(value, element) {
var $module = $(element).parents('form');
return $module.find('input.form-checkbox:checked').length;
});
$.validator.addClassRules('form-checkbox', {
'required_group' : true
});
July 31st, 2009 at 8:40 am
I tried the above for my checkboxes, but it is giving me 8 error messages rather thanjust one for the group. Any ideas? Thanks
August 19th, 2009 at 11:30 am
This is great! I’ve cited you as I worked on my own version. I have added a couple of improvements (at least for my purposes):
1) To let you pass in a selector for the group of fields, and therefore use more than one group per page.
2) To hide error messages on all fields in the group as soon as one of them validates.
I’m asking for feedback on my code on StackOverFlow, in case anyone is interested.
October 12th, 2009 at 10:13 am
Hello,
thank you but can you post a working example because I cant make this code work.
heres my code:
$(document).ready(function() {
var validator = $(”#signupform”).validate({
rules: {
nom: “required”,
prenom: “required”,
ville: “required”,
cp: “required”
}
});
});
jQuery.validator.addMethod(”required_group”, function(val, el) {
var $module = $(el).parents(’div.panel’);
return $module.find(’.required_group:filled’).length;
}, “at least a phone number.”);
and in my form #signupform
Telephone:
Mobile:
error message appears but no remove when I fill one of the two imput.
Thanks for help
October 12th, 2009 at 10:15 am
in my form I just add class=”required_group” in my input
thank you
November 24th, 2009 at 4:22 pm
Hi,
i need to check if at least one input field in group is filled which works fine and then i need to check if the entered value is numeric and greather than 0.
Any Idea?
Thanks Felix
December 15th, 2009 at 11:08 am
Hi Rebecca,
Have you come across a way to validate a group of fields as one via JQuery “out-of-the-box” validation?
I have a bank sort code to validate which is 3 inputs, but I only want one error message to appear if any of them are incorrect, and not 3 e.g.
“Please enter a valid sort code”
Cheers.
February 10th, 2010 at 10:45 pm
Thanks for posting your code. I am experiencing a problem just like comment #10. I can get the code to work no problem on the page. If neither of my two checkboxes are checked then the error message appears beside each box. However, once I click one of the boxes the error does not disappear (not even after resubmission of the form).
Any help would be greatly appreciated.