jQuery Validate: Display group error message until all fields are correct

Question

I have grouped two input fields so that it only displays one error message regardless of how many of the input fields are invalid.

My problem occurs if I leave both of them empty and try to submit the form - as soon as I enter anything into one of them the error message disappears. It reappears if I select and deselect the empty input field.

What I would like is for the error message to remain as long as one or more of the input fields is invalid. And prevent the error message from disappearing when one of the two empty input fields gets filled out.

Here's my code:

HTML

<form>
    <div>
        <label for="fname">First Name</label>
        <input name="fname" id="fname" class="required">
    </div>
    <div>
        <label for="lname">Last Name</label>
        <input name="lname" id="lname" class="required">
    </div>
    <input type="submit" />
</form>

Javascript

$("form").validate({
    groups: {
        name: 'fname lname'
    },

    errorPlacement: function (error, element) {
        if (element.attr('name') == 'fname' || element.attr('name') == 'lname')
            error.insertAfter('#lname');
    }
});

And a JSFiddle.

Thanks!

Answer 1

Quote OP:

"My problem occurs if I leave both of them empty and try to submit the form - as soon as I enter anything into one of them the error message disappears. It reappears if I select and deselect the empty input field."

Yes, you've combined both error messages into one. So as soon as the condition is satisfied for the active field, the message clears. You can't have it also conform to field #2 conditions while it needs to accurately follow field #1 conditions... it simply handles them one at a time.

Quote OP:

"What I would like is for the error message to remain as long as one or more of the input fields is invalid. And prevent the error message from disappearing when one of the two empty input fields gets filled out."

As long as you're using the groups option, it's working exactly as designed.

The groups option was specifically designed for certain methods such as require_from_group, when you want one element out of a group of elements filled out, you don't need to see an identical message repeated on every element. The groups allows you to use a single message for this group of fields. (This is where a single message corresponds to a single condition, however, you're trying to make a single message conform to multiple conditions.)

Perhaps you'll want to use the showErrors function instead.

Something like this (adjust accordingly):

$("form").validate({
    showErrors: function (errorMap, errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors:");
        this.defaultShowErrors();
    },
    errorPlacement: function () {
        return false; // <- kill default error labels
    }
});

DEMO: http://jsfiddle.net/wdDtR/

And another version tweaked to behave a lot more like your original:

$("form").validate({
    showErrors: function (errorMap, errorList) {
        $("#summary").html("field is required");
        if (this.numberOfInvalids() > 0) {
            $("#summary").show();
        } else {
            $("#summary").hide();
        }
    },
    errorPlacement: function () {
        return false; // <- kill default error labels
    }
});

DEMO: http://jsfiddle.net/wdDtR/3/