jQuery Validate Plugin: How can I add groups to a validator after its been initialized?

Question

On our site we are using an embedded sign-up form from our ESP that uses the jQuery validate plugin. We are customizing the form a bit, adding a couple of custom fields (first name, last name) and we want them to be grouped so there is only one error message for both the fields.

Since the form's validator has already been initialized I need to add in a few things dynamically. The plugin provides the rules( "add", rules ) method to add in validation rules dynamically, although we are just using class names to do this anyhow. But there is no clear way to set the groups option after the validator has been initialized.

I've tried a few different things to accomplish this, but none some to be working:

var settings = $("#mc-embedded-subscribe-form").validate().settings;
$("#mc-embedded-subscribe-form").validate($.extend(settings, {
    groups: {
        username: "FNAME LNAME"
    },
    errorPlacement: function(error, element) {
        if (element.attr("name") == "FNAME" || element.attr("name") == "LNAME") {
            error.insertAfter("#username_group");
        } else {
            error.insertAfter(element);
        }
    }
}));

The errorPlacement function is added to the validator, but not the groups.

I've also tried setting the groups option explicitly, but that has no effect either.

$("#mc-embedded-subscribe-form").validate().settings.groups = { username: "FNAME LNAME" };
$("#mc-embedded-subscribe-form").validate().groups = { username: "FNAME LNAME" };

I'm completely stumped as how to accomplish this.

Answer 1

I recently faced the same problem and found a different solution.

The Scenario

We have a table which grows dynamically as users add (or delete) rows. Each new row contains several elements, and we want each rows's input elements to be in a single validation group--one per row--because we only want one error label for each row. Because the rows are added dynamically--well after we call $('#the-form').validate()--we needed a way to add a new group each time the user adds a row.

Our Solution

We hacked the validator object by directly modifying its groups member:

// on document ready:
validator = $('#the-form').validate({
    groups: ...,
    rules: ...,
    messages: ...,
    etc.
});

...

// later, when we need to add a new validation group:
validator.groups['first_name_row_5'] = 'full_name';
validator.groups['last_name_row_5'] = 'full_name';

Those last two lines are equivalent to

groups: {full_name: 'first_name_row5 last_name_row_5'}

in the validator options, but can be added after the initial call to validate().

It's a hack into the internals of jquery.validate, but it works (with jquery validate v1.9.0).

---

Finally, to directly answer the OP's question: instead of this:

$("#mc-embedded-subscribe-form").validate().groups = { username: "FNAME LNAME" };

try this:

var validator = $("#mc-embedded-subscribe-form").validate();
validator.groups['FNAME'] = 'username';
validator.groups['LNAME'] = 'username';