jQuery ValidationEngine: How to validate that at least one of a set of fields is not empty?
-
12-11-2019 - |
Question
In our project we are using ValidationEngine, and we don't have the ability to replace it with another plug-in.
Our form has ten inputs and some of them are optional, but at least one of the optional fields must be included.
So, how do you validate inputs in this case?
Sample:
form
input1
input2
intpu3
input1: required
At least one of input2 and input3 must be present -- if both are empty validation should fail.
Solution
The validation engine now supports group Validation.Go to jQuery form validation plugin @ github and ake a look at groupRequired
. The syntax looks something like this.
<input value="" class="validate[groupRequired[payments]]" type="text" name="creditcard" id="creditcard" />
<input class="validate[groupRequired[payments]]" type="text" id="paypal" name="paypal"/>
OTHER TIPS
It appears that the ValidationEngine plugin allows you to specify a validation rule which uses a custom function to determine validity.
If you add the validate class on input1
like so...
<input id="input1" class="validate[required,funcCall[myValidationFunction]]" />
Then ValidationEngine will use the following function. You can pretty much put any kind of logic in there. If I read your scenario correctly, this should accomplish what you're after.
function myValidationFunction() {
var input1 = $.trim($("#input1").val());
var input2 = $.trim($("#input2").val());
var input3 = $.trim($("#input3").val());
if (input1.length == 0) {
return "input1 is required";
}
if (input2.length == 0 && input3.length == 0) {
return "Either input2 or input3 is required";
}
// We don't need to return anything if there is no error.
}
Here's a link to the _funcCall
function in the source code:
https://github.com/posabsolute/jQuery-Validation-Engine/blob/master/js/jquery.validationEngine.js#L574
In case someone wants to make groupRequired work for checkboxes, you need to add error messages to your language file for groupRequired. e.g. if it is jquery.validationEngine-en.js, it should be like this:
"groupRequired": {
"regex": "none",
"alertText": "* You must fill one of the following fields",
"alertTextCheckboxMultiple": "* Please select an option",
"alertTextCheckboxe": "* This checkbox is required"
}
One solution could be to attach validations before validating and removing after validation is over.
jQuery(document).ready(function(){
jQuery("#formID").validationEngine();
$("#formID").bind("jqv.form.validating", function(event){
var fieldsWithValue = $('input[type=text]').filter(function(){
if($(this).val().length>0){
return true;
}
});
if(fieldsWithValue.length<1){
$('input[type=text]').addClass('validate[required,funcCall[requiredOneOfGroup]]');
}
});
$("#formID").bind("jqv.form.result", function(event, errorFound){
$('input[type=text]').removeClass('validate[required,funcCall[requiredOneOfGroup]]');
});
});
function requiredOneOfGroup(field, rules, i, options){
var fieldsWithValue = $('input[type=text]').filter(function(){
if($(this).val().length>0){
return true;
}
});
if(fieldsWithValue.length<1){
return "At least one field in this set must have a value.";
}
}
!!$('#input2,#input3').filter('[value]').length
There is a provision in jquery validation plugin to make grope of of elements.
groups: {groupName: "text1 text2 text3 .. so on"}
errorPlacement: function(error, element) {
// Write Done your business logic to display error
if ( element.attr("name") == "text1" -- define other text elements also) {
error.insertAfter("#error_location_placeholder_id");
}else{
error.insertAfter(element);
}
}
and you business validation in rules method for at least one must be not empty logic
groupName:{
required: function(element) {
// Your business logic for validation
if( $("#text1").val().length > 0 ){
return false;
}else{
return true;
}
}
}