Skip to content
This repository

Grouped inputs aren't validated on any event other than submit #364

Open
richardscarrott opened this Issue April 09, 2012 · 2 comments

3 participants

Richard Scarrott Max Lynch Jörn Zaefferer
Richard Scarrott

Given this form:

<form method="post" action="/wherever">
    <div class="-field field-expirationMonth">
        <select name="card_expirationMonth" id="card_expirationMonth">
            <option value="">MM</option>
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="etc">Etc</option>
        </select>
    </div>
    <div class="-field field-expirationYear">
        <select name="card_expirationYear" id="card_expirationYear">
            <option value="">YY</option>
            <option value="2012">12</option>
            <option value="2013">13</option>
            <option value="2014">14</option>
            <option value="2015">15</option>
            <option value="etc">Etc</option>
        </select>
    </div>
</form>

And the following validation:

$('form').validate({
    rules: {
        card_expirationMonth: 'required',
        card_expirationYear: 'required'
    },    
    groups: {
        cardExpiration: 'card_expirationMonth card_expirationYear'
    },
    errorPlacement: function (error, element) {
        if (element[0].name === 'card_expirationMonth' || element[0].name === 'card_expirationYear') {
             error.prependTo('form');
        }
    }
});

It can be seen, on focusout, that the error message will be removed even though one of the two inputs isn't valid.

Interestingly enough the groups demo: http://docs.jquery.com/Plugins/Validation/validate appears to disable onkeyup, onfocusout, onfocusin which means the issues isn't noticed.

Max Lynch

So what appears to be happening is that on submit, the elements that failed are put into the submitted list. Then, if one of the elements that was initially valid in the group becomes invalid after the submit, the validation won't trigger an error on that element until submission.

I actually think this behavior is desirable in several situations. For example, in the demo/tabs/index.html demo, if you fail to enter the month and year for your birthday, you don't want the form yelling at you that it's invalid as you are working to make it valid.

@jzaefferer thoughts?

Jörn Zaefferer
Owner

Not yelling before submit is desired, but that demo is a good example of the issue (also needs a link on the index page). Go to the second tab, hit submit, change the first select and blur it (click outside, no the other selects). The error goes away, but it shouldn't.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.