I’m using jquery validate and I’ve set up groups. However, I’m having trouble figuring

Question

0

Asked: May 25, 20262026-05-25T23:26:23+00:00 2026-05-25T23:26:23+00:00

I’m using jquery validate and I’ve set up groups. However, I’m having trouble figuring

0

I’m using jquery validate and I’ve set up groups. However, I’m having trouble figuring out the best way to validate each group seperately from the individual fields that it contains.

To illustrate this:

I have city, state, and zip ( in that order ). If someone enters a value for zip, they should get positive confirmation ( I’ve got that part working with a green checkmark by the input ), however, so long as either state and zip are empty the group validation message should still show.

On various attempts I’ve come up to the following problems:
– User skips over “city” and the validation the message displays but then when input is provided for “zip”, the validation message goes away. ( this is weird…maybe a bug? )
– User enters “city” and they get the group error message before they even get to enter “state”
– User enters “city” but won’t get the checkmark because the other inputs in the group are empty

I’m leaning towards addressing this by overwriting the “onfocusout” event ( by having it check all the inputs in the group on focusout ) but not sure if there is a better way via some of validate’s built in methods

Thanks!

*UPDATE

The solutions I’ve come up with are rather ugly and none of them work consistently, below is an example, it results in the inverse of the first problem I listed above. Now the validation message only shows when the last field in a group is filled in.

Maybe group validation rely’s on the validation result of the last test in a group?

Anyway…here’s the mess I’ve come up with so far:

Set the group:

groups : { location : 'city state zip' }

Create a rule for the group ( note it has to be an array to preserve the order ):

rules : { location : ['city, 'state', 'zip']}

Now override the onfocusout:

    onfocusout : function(el) {
        var groups = this.groups
            , elName = el.name
            , elGroup = groups[elName]
            , $el = $(el)

        if (!this.checkable(el) ){
            this.element(el));
        }

        // If the element belongs to a group, validate all elements in the group 
        // that come before the current element
        if (elGroup) {
            var groupMembers = this.settings.rules[elGroup];

            for (var i=0; i<groupMembers.length; i++) {
                if ( groupMembers[i] === elName ) {
                    break;
                }
                this.element( $('[name="' + groupMembers[i] + '"]') );
            }
        }
    }