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;
});jQuery.validator.addClassRules('required_group', {
'required_group' : true
});jQuery.validator.messages.required_group = 'Please fill out at least one of these fields.';
19 comments
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.
Thanks for that useful function !
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.
$.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
});
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.
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 :)
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
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.
Any help would be greatly appreciated.
If you need indicate that at least one of a set of input fields is required you can do it direct whit the jquery validate plugin:
HTML:
When you set your checkbox group, use the same name for each input and use [] at the end of the names.
Javascript:
use quotes ('field[]') in rules declaration for your input group
$("#form").validate(
{
rules: { 'field[]':{ required:true, minlength:1 }
}
Note: PHP convert the input group in array... well, I hope this help...
So I found this workaround that avoids adding the custom validation method. (Note I'm using "jQuery" spelled out rather than "$" because it's in Wordpress, which uses the $ alias for something else.) The code below passes validation of each field if at least one of the fields is not empty. If both fields are empty, validation fails.
jQuery(document).ready(function(){
jQuery("#myForm").validate({
rules: {
field1name: {
required: function(element) {
return (jQuery("#field2ID").val() == "" );
}
}
field2name: {
required: function(element) {
return (jQuery("#field1ID").val() == "" );
}
}
}
});
});
thanks!
