Position Absolute's jQuery-Validation-Engine - Conditional Validation of form fields

Question

I am working with Position Absolute's Form validation engine.

I have a specific case for validation that I'm hoping this can solve for me. I need to be able to make one field required based on the value of another field.

For example:

If country.dropdown = "USA", then state.dropdown is required.  

or

If country.dropdown <> 'USA" then state.dropdown is not required.

Do you think this is possible with JQuery Validation Engine? If so, can you point me in the right direction?

Answer 1

I have to say, first, that I have never used the Position Absolute's Form validation engine, but I got interested in it reading your question. From the documentation ( https://github.com/posabsolute/jQuery-Validation-Engine ), it appears that you have to create a custom validation function.

I created a working fiddle here: http://jsfiddle.net/5pKjW/6/

Even if it works, I am not completely satisfied with it, because a "sentinel value" is needed because of this condition in the validation engine at line 584.

// If the rules required is not added, an empty field is not validated
if(!required && field.val() == "" && !errorMsg) options.isError = false; 

This is the markup of the select withe the custom function:

<select class="validate[funcCall[checkCountry]]" type="text" name="state" id="state">
    <option value="none" ></option>
    <option value="CALIFORNIA" >CALIFORNIA</option>
    <option value="NEW ENGLAND" >NEW ENGLAND</option>
    <option value="TEXAS" >TEXAS</option>
</select>

And this is the validator initialization:

jQuery("#formID").validationEngine({
    'customFunctions': {
        'checkCountry': function (field, rules, i, options){
            if ($('#country').val() === 'USA' && field.val() === 'none') {
                return options.allrules.required.alertText;
            }
        }
    }
});

1) First, you have to define a validation function that can be global or can be passed as an argument of the plug-in (as I did above). A custom function accepts this inputs: field, rules, i, options. You have no reference to the form, you only have reference to the current field. So if you want to access another field, you have to select it as usual with jQuery (in the example: $('#country') ).

2) You check for the validation condition. In the example it fails if:

$('#country').val() === 'USA' && field.val() === 'none'

If the condition is not respected, the function must return a String. In the example, I returned the standard message in options.allrules.required. The documetation explains how to define custom messages for custom functions.

As you can see, because of the

if(!required && field.val() == "" && !errorMsg) options.isError = false;

line in the validation engine, the developer is forced to make the condition inside the if fail, and setting the required condition to true or the error message to a falsy value is not right. So, the only way is to make field.val() != ''. For this reason, the first option element in the markup has the sentinel value none, instead of being empty. It is not a clean solution, and it may even not be possible to implement easily (I don't know if you generate the markup yourself (if you don't, things get more difficult and you need to manipulate the form via javascript, before the validation engine initialization)).

This is not a clean solution. A nicer solution would have been using condRequired, if only it would have accepted a custom function, instead of only checking if one of its arguments had been populated.