jQuery validate $.validator.addClassRules() unsupported in IE7?

Question

I'm having some issues with the following script in IE7:

$.validator.addClassRules({
   isemail: {
       email: true
   },
    required: {
        required: true
    }   
});

This works perfectly in IE8 and other browsers however I get the following error in IE7:

Line: 158
Char: 3
Error: Expected ':'

In my code, this line is:

isemail: {

There is no mention of a lack of support for this function on the jQuery validate plugin site (http://jqueryvalidation.org/jQuery.validator.addClassRules/) so is there something i'm missing here?

The version of jQuery I am using is jQuery v1.10.2. The version of jQuery validate I am using is 1.11.1.

Any help would be greatly appreciated.

Answer 1

Quote OP:

"Any help would be greatly appreciated."

Your code:

$.validator.addClassRules({
    isemail: {
        email: true
    },
    required: {
        required: true
    }   
});

The way you've written it, you want to use class="isemail" and class="required" within your input element markup.

<input class="isemail" type="text" ...
<input class="required" type="text" ...

HOWEVER, by default, you can already place the standard rules in the class attribute without the .addClassRules() method.

<input class="email" type="text" ...
<input class="required" type="text" ...
<input class="email required" type="text" ...

The .addClassRules() method is intended for creating compound rules from sets of standard rules and assigning the compound rule to a new class name.

From the docs:

Description: Add a compound class method – useful to refactor common combinations of rules into a single class.

Stock examples from documentation

For multiple class names:

jQuery.validator.addClassRules({
    myClass: {
        required: true,
        minlength: 2
    },
    myClass2: {
        required: true,
        digits: true,
        minlength: 5,
        maxlength: 5
    }
});

or for a single class name:

jQuery.validator.addClassRules('myClass', {
        required: true,
        minlength: 2
    }
});

Since you haven't shown us any compound rules, you wouldn't need this method at all. By default, the rule's name will work as the class name. (there are exceptions: only rules that can be declared with a boolean value can be declared through the class.)

<input class="required" type="text" ...
<input class="email" type="text" ...

You could even simulate a compound rule (again, this is without the .addClassMethod()).

<input class="required email" type="text" ...

Quote OP:

"... [is] .addClassRules() unsupported in IE7? .... There is no mention of a lack of support for this function on the jquery validate plugin site, so is there something i'm missing here?"

You may have found a bug specific to IE7, however since usage of IE7 is practically zero, I don't think I'd expect a fix or even worry about it too much.

However, by taking my simple suggestions above, you negate the need for the .addClassRules() method and will continue to support IE7.

---

EDIT:

If you cannot change the HTML markup, you can add to the class's using jQuery. This will assign .email to every element that already contains .isemail.

$(document).ready(function() {

    $('.isemail').addClass('email');  // put this at the top

});