Question

我希望我的字段验证仅在用户离开字段时才会发生。我已尝试jQuery validation onblur中的技术（参见francios wahl的回复），但用户体验是验证在第一时间开始，然后恢复到onchange。这是预期的行为吗？我不明白为什么甚至会改变。

整个页面可以在http://ginof.users.sonic.net/part4-wOutFunction.html

看到

$(function() {

$("#inputForm").validate({
onfocusout: function (valueToBeTested) {
    $(valueToBeTested).valid();
},
rules:
    {
    valueToBeTested: { required: true, digits: true, minlength: 5, maxlength: 5 }
}
}); 

});

Answer 1

这是jQuery验证插件的默认行为，如this页面

中所述

此外，一旦某个字段被突出显示为无效，只要用户在字段中输入内容（选项onkeyup），就会对其进行验证。

如果您将onkeyup选项设置为false，则会取消此默认行为，如下面的代码段所示。

此外，验证插件有一个方法，用于评估名为element（Details here）的单个元素，您可能需要考虑该元素，而不是在元素上使用.valid（）。

＆＃13;

$(function() {

  $("#inputForm").validate({
    onfocusout: function(valueToBeTested) {
      $(valueToBeTested).valid();
    },
    onkeyup: false,
    rules: {
      valueToBeTested: {
        required: true,
        digits: true,
        minlength: 5,
        maxlength: 5
      }
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<div class="space">
  <h1>After the first validation, this reverts from onblur to onchange.  Why?</h1>
</div>

<form id="inputForm">
  <label class="center" for="valueToBeTested">Enter the number:</label>
  <input name="valueToBeTested" type="number" class="center" id="valueToBeTested">
  <div id="outputText"></div>
  <input type="submit" value="calculate" id="triggerButton" class="center">
</form>

＆＃13;

Answer 2

您的代码中存在一些问题......

$("#inputForm").validate({
    onfocusout: function (valueToBeTested) {
        $(valueToBeTested).valid();
    },
    rules: {
        valueToBeTested: { 
            required: true,
            digits: true,
            minlength: 5,
            maxlength: 5
        }
    }
});

您不应在.valid()中使用.validate()。调用.valid()太过分了...... .element()验证只返回true/false，这就是你需要的所有内容，和this.element()方法是插件内部的方式写入默认功能。
传递到valueToBeTested函数中的参数onfocusout一般只用代表正在测试的element ...它不应该代表一个特定的元素。换句话说，传递给此函数的参数仅表示在任何特定时间评估的字段... 不表示特定的字段名称。
您用于字段并声明规则的名称valueToBeTested具有误导性，因为它只代表字段的name，而不是任何值的值。技术上具有功能性，语义上的误导性。

用户体验是验证在第一时间开始，然后恢复为onchange

从技术上讲，它是onkeyup。默认情况下验证是“懒惰的”，这就是为什么你只能在“第一次”之后看到某些事件触发器。您已经使用自定义onfocusout函数覆盖了部分“延迟”验证。如果您要禁用onkeyup，请将其设置为false，否则，您也可以使用自己的功能覆盖此功能。

$("#inputForm").validate({ onfocusout: function (element) { // <- any "element" being evaluated this.element(element); // <- use '.element()' method }, onkeyup: false, // <- disables all key-up validation rules: { elementName: { // <- NAME of input element required: true, digits: true, minlength: 5, maxlength: 5 } } });

DEMO：http://jsfiddle.net/jen8fgts/

Answer 3

谢谢！添加onkeyup：false，

修复了代码。同时欣赏风格评论。

输入验证仅限onblur

3 个答案: