jQuery验证插件-行为异常的“必需"规则 [英] jQuery Validation Plugin - 'Required' rule behaving strangely

问题描述

我正在使用 jQuery验证插件( jquery-validate )的问题，我已经用它制作了5种表格&痛苦很多.

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.

我现在有这个 JSFiddle ，但是我的密码字段的行为很奇怪...
如您所见，我为所有密码设置了required规则.如果我删除浏览器中的所有项目符号并移至下一个字段，则将其保持不变，如果已将其标记为正确，则它将保持正确，如果根本没有标记，则将保持未标记. 它没有被标记为不正确，并且错误消息没有显示！

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!

我只能通过首先在密码字段上产生minlength错误，然后然后删除所有字符(或required规则错误消息>单击提交按钮(仅在所有字段均未处于错误状态时才可用).

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).

经过大量检查，我发现了onfocusout选项.可以为true或false，默认设置为true如网站所述，

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]验证模糊时的元素(复选框/单选按钮除外).如果未输入任何内容，则将跳过所有规则，除非该字段已被标记为无效.

[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.

我想这肯定是原因.但是经过大量的谷歌搜索，结果发现没有其他人遇到这个问题(或者至少是由于onfocusout规则造成的).一篇文章确实提到"required规则是一个例外"(对于onfocusout规则?).

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?).

底线 :我无法获得我的required规则错误，但提交或首次生成错误消息. 然后，它确实会显示.
结论 :可能会产生错误，但不会出现在blur上.
问题 :如何解决?

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?

我的密码输入字段

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

我的密码规则

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

---

我在应该放置错误的时间添加了console.log消息-甚至没有调用.我验证了我的代码和HTML，对所有内容进行了三重检查，但仍然找不到该错误...

---

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...

推荐答案

引用OP:

除了提交或首先生成最小长度错误消息时，我无法获得所需的规则错误，然后出现了…….我验证了我的代码和HTML，对所有内容进行了三重检查，但我仍然找不到错误"

"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.

在将字段标记为无效之前，验证是懒惰的:在首次提交表单之前，用户可以在字段中进行制表，而不会收到烦人的消息–在遇到机会之前，他们不会被打扰实际输入正确的值……它是为给用户提供一个不干扰用户的体验而设计的，它会尽可能少地用不必要的错误消息来使用户烦恼."

引用OP:

经过大量检查，我发现了onfocusout选项.它可以是true或false，默认设置为true，如网站所声明的那样"

"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"

不完全是. onfocusout默认为 active ；您不能在不破坏插件的情况下将其设置为true.您只能将其设置为false(以将其禁用)，也可以使用自己的功能将其覆盖.

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.

文档:

设置为函数以自行决定何时运行验证.布尔值true无效值."

修改onfocusout回调选项以进行更多急切"验证，以便所有验证在离开该字段后立即触发.

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
    }
});

演示: jsfiddle.net/p4K7S/

DEMO: jsfiddle.net/p4K7S/

要获得更完整的渴望"验证体验，请对onkeyup回调函数执行相同的操作，一旦在字段中键入内容，验证就会立即开始.

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
    }
});

演示2: jsfiddle.net/em0uspk3/

DEMO 2: jsfiddle.net/em0uspk3/

为什么使用onkeyup时仍需要onfocusout?因为在用户与单选，复选框和选择元素进行交互期间没有按键事件.

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

这篇关于jQuery验证插件-行为异常的“必需"规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！