jQuery Validation Plugin - 'Required' rule behaving strangely

问题

I'm using this jQuery Validation Plugin (jquery-validate) in combination with Bootstrap, and I already made 5 forms with it & with a lot of pain.

I now have this JSFiddle, but my password field is behaving strangely...
As you can see, I set the required rule for the password, as for all. If I delete all bullets in my browser and move on to the next field, it is left untouched, if already marked correct, it remains correct, if not marked at all, remains unmarked. It isn't marked incorrect, and the error message does not show up!

I can only get my required rule error message to show up by first producing the minlength error on the password field, and then removing all characters, or by clicking the submit button (only available if all fields aren't in an error state).

After a lot of checking, I found the onfocusout option. This can be either true or false, with the default set to true As the website states,

[It] Validate[s] elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid.

This would surely be the cause, I thought. But after a lot of googling, it turned out no one else had that problem (or at least, due to the onfocusout rule). One post did mention that "the required rule is an exception" (to the onfocusout rule?).

Bottom line: I cannot get my required rule error to work, with the exception when submitting or first producing the minlength error message. Then, it does show up.
Conclusion: The error can be produced, but not on blur.
Question: How to fix this?

My password input field

<input type="password" class="form-control" id="passw" name="passw" value="nochange" maxlength="20" required="required" placeholder="123456789" />

My password rules

passw: {
    required: true,
    minlength: 5,
    maxlength: 20
},

I added console.log messages upon when the error should've been placed - not even called. I validated my code and HTML, triple-checked everything, but I still can't find the bug...

回答1:

Quoting OP:

"I cannot get my required rule error to work, with the exception when submitting or first producing the minlength error message. Then, it does show up. .... I validated my code and HTML, triple-checked everything, but I still can't find the bug"

This is not a bug. This is called "Lazy" validation and it's the default behavior.

Documentation:

"Before a field is marked as invalid, the validation is lazy: Before submitting the form for the first time, the user can tab through fields without getting annoying messages – they won't get bugged before having the chance to actually enter a correct value ... it is designed for an unobtrusive user experience, annoying the user as little as possible with unnecessary error messages"

Quoting OP:

"After a lot of checking, I found the onfocusout option. This can be either true or false, with the default set to true As the website states"

Not quite. onfocusout is active by default; you cannot set it to true without breaking the plugin. You can only set it to false (to disable it) OR you can over-ride it with your own function.

Documentation:

"Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value."

Modify the onfocusout callback option for more "Eager" validation, so that all validation triggers immediately upon leaving the field.

$('#yourform').validate({
    // your rules & options,
    onfocusout: function (element, event) {
        this.element(element);  // eager validation
    }
});

DEMO: jsfiddle.net/p4K7S/

For a more complete "Eager" validation experience, do the same for the onkeyup callback function and validation will commence as soon as typing starts inside a field.

$('#yourform').validate({
    // your rules & options,
    onfocusout: function (element, event) {
        this.element(element);  // eager validation
    },
    onkeyup: function (element, event) {
        this.element(element);  // eager validation
    }
});

DEMO 2: jsfiddle.net/em0uspk3/

Why would you still need onfocusout when using onkeyup? Because there are no keyup events during user interactions with radio, checkbox, and select elements.

来源：https://stackoverflow.com/questions/22074548/jquery-validation-plugin-required-rule-behaving-strangely

标签

jquery

jquery-validate

required