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 was looking for a way to do this too and found a solution in the jQuery help forum: http://forum.jquery.com/topic/jquery-validate-defining-groups-dynamically

var getGroups = function() {
    var result = {};
    $('#myTable tr').each(function(i) {
        var field1Name = $(this).find('.field1').attr('name');
        if (field1Name != undefined) {
            var field2Name = $(this).find('.field2').attr('name');
            result['fieldPair_' + i] = field1Name + ' ' + field2Name;
        }
    });
    return result;
}

$('#myForm').validate({  groups: getGroups() });