JQuery validation addClassRules combine multiple rules

Question

I am mapping css classnames different rules how can I avoid repeating the addClassMethod and just use it once?

var cssClasses = {
        rules   : {
            required: 'validate-required',
            validateNumber: 'validate-number', 
            validateEmail: 'validate-email'
        }
    }


$.validator.addClassRules( selectors.rules.required,  {
    required: true
});

$.validator.addClassRules( selectors.rules.validateNumber,  {
    number: true,
});

$.validator.addClassRules( selectors.rules.validateEmail,  {
    email: true
});

Have tried to create into a single addClassRules method like this but this doesn't work

$.validator.addClassRules( selectors, {

        rules: {

            required: {
                required: true
            },
            validateNumber: {
                number: true
            },
            validateEmail: {
                email: true
            }

        }

  });

score 3 · Answer 1 · edited May 23 '17 at 11:44

"I am mapping css classnames different rules..."

Why? There would be no purpose in mapping each one to a class when these rules can already be assigned simply by using them as class names all by themselves.

<input class="required number email" ....

Otherwise, the whole purpose of .addClassRules() is to create a "compound" rule that can be assigned to the field using a single custom class.

<input class="myClassRule" ....

there is no point in using the .addClassRules() method if you only want to assign ONE rule to ONE class, because each rule (the boolean rules) can already be represented as a class.
the Object Literal is composed of key: value pairs representing class names with their list of rules. The rules option has nothing to do with .addClassRules() and does not go inside this method.
these new addClassRules rules are only assigned by class, these are not something you can use within the .validate() method.

Example 1

$.validator.addClassRules( "yourClass", {
    required: true,
    number: true,
    email: true
});

When class yourClass is applied to a form field, the required, number, and email rules will be in force.

<input class="yourClass" ...

Example 2, creates multiple different class rules at once.

$.validator.addClassRules({
    classFoo: {
        required: true,
        number: true
    },
    classBar: {
        required: true,
        email: true
    }
});

When class classFoo is applied to a form field, the required & number rules will be in force. When class classBar is applied to a form field, the required & email rules will be in force.

<input class="classFoo" ....
<input class="classBar" ....

"tried to create into a single addClassRules method like this but this doesn't work"

It was constructed improperly as per above. Please refer to the documentation for .addClassRules().

More ways to combine rules...

jQuery Validation Plugin - adding rules that apply to multiple fields

How can we specify rules for jquery validation plugin by class?

JQuery validation addClassRules combine multiple rules

1 Answers1