仅输入验证 onblur

Question

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

整个页面可以在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 页

所述

In addition, once a field was highlighted as being invalid, it is validated whenever the user types something in the field (option onkeyup).

如果您将选项 onkeyup 添加为 false，那么这将取消此默认行为，如下面的代码片段所示。

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

$(function() {

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

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

Answer 2

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

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

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

the user experience is that the validation is onblur the FIRST TIME and then reverts to onchange

从技术上讲，它是 onkeyup。默认情况下验证是 "lazy"，这就是为什么在 "first time" 之后您只能看到某些事件触发器。您已经使用自定义 onfocusout 函数覆盖了 "lazy" 验证的一部分。如果您想禁用 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
        }
    }
});

演示：http://jsfiddle.net/jen8fgts/

Answer 3

谢谢！添加 onkeyup: false,

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

仅输入验证 onblur

input validation ONLY onblur

javascript

jquery

jquery-validate

onblur