jQuery Validation: Changing Rules Dynamically

Question

I have a single form that, depending on which radio button is clicked (Login or Signup), displays either:

• email address
• password

or:

Answer 1

Ahh validation plugin, always so tricky :(

First, I added id attributes to all the input boxes. Then, I made a change function for you:

$("input[name='userAction']").change(function() {
    $('#signupFields').toggle();
    $('#loginFields').toggle();    
    if ($("input[name='userAction']:checked").val() === "login") {
        removeRules(signupRules);
        addRules(loginRules);
    } else {        
        removeRules(loginRules);
        addRules(signupRules);

    }
});

The add and remove functions look like this:

function addRules(rulesObj){
    for (var item in rulesObj){
       $('#'+item).rules('add',rulesObj[item]);  
    } 
}

function removeRules(rulesObj){
    for (var item in rulesObj){
       $('#'+item).rules('remove');  
    } 
}

That's pretty much it. See here for a working example: http://jsfiddle.net/ryleyb/wHpus/66/

EDIT: To me, the non-intuitive part is that I don't see an easy way to add/remove rules to the whole form after you call validate, instead you have to manipulate the individual form elements.

Answer 2

If you want to call validate again with new settings (rules,messages ... etc.) call

$('#formid').removeData('validator')

This will remove validation for the form then initialize it again with the new settings

Answer 3

This post is from years ago, but since it has been viewed a lot of times, I think it would be useful to say that the jQuery Validation plugin now allows us to read, add and remove rules.

Some examples:

1. Print all rules attached to #myField: console.log($('#myField').rules());

2. Remove an unwanted rule: $('#myField').rules('remove', 'min');

3. Add a new rule: $('myField').rules('add', {min: 10});

So say if you want to dynamically update the minimum value required. You can call a remove and a add right after:

// Something happened. The minimum value should now be 100
$('#myField').rules('remove', 'min');
$('#myField').rules('add', {min: 100});

More information can be found here: https://jqueryvalidation.org/category/plugin/#-rules()

Answer 4

There is an option now to ignore fields bases on selector criteria, such as invisible or disabled, such that you wouldn't have to change your rule set:

.validate({
  ignore: ":not(:visible),:disabled",
  ...