Question

我在https://jsfiddle.net/51uwoc5w/7/设置了一个简单的小提琴，它有两个输入，第一个输入应用了验证规则（必需）。如果第二个输入有任何值，就会发生奇怪的行为。

<form id="form1" name="form1" class='jquery-validate' method='post' action=''>
  <div>
    <div class="form-group">
      <label for="iGUI">GUI</label>
      <input type="text" id="iGUI1" class="form-control iGUI">
    </div>
    <div class="form-group">
      <label for="iGUI2">GUI 2</label>
      <input type="text" id="iGUI2" class="form-control iGUI2">
    </div>
  </div>
</form>

通过以下方式挂断验证：

var id = 0; $（document）.ready（function（）{

    var validator = $('form.jquery-validate').validate({
        onsubmit: false,
        invalidHandler: function (form, validator) {
            $("pre").prepend("\n" + (id++) + " invalidHandler.");
        },
        errorPlacement: function (error, element) {
            $("pre").prepend("\n" + (id++) + " errorPlacement " + element.attr("id"));
        },
        highlight: function (element) {
            $("pre").prepend("\n" + (id++) + " highlight " + element.id);
        },
        unhighlight: function (element) {
            $("pre").prepend("\n" + (id++) + " unhighlight " + element.id);
        }
    });

    $('.iGUI').rules('add', {
                required: true,
                messages: {
                    required: 'Global Unique Identifier is a required field.'
                } } );

});

以下是四个场景（当然，非工作的场景是我首选的UI交互/测试方法）。成功的定义是看到一个突出的＆＃39;和＆＃39; errorPlacement＆＃39;事件

场景1（正常） - 两个输入都是空白的，使用鼠标 1）在第一个输入中键入值 2）用鼠标点击外部输入 3）在输入中单击鼠标 4）清除输入 5）验证发生（成功）

场景2（正常） - 两个输入都是空白的，使用键盘（制表符/移位+制表符） 1）在第一个输入中键入值 2）按TAB键 3）按SHIFT + TAB键 4）清除输入 5）验证发生（成功）

场景3（正常） - 第二个输入具有值，使用鼠标 1）选择或单击第二个输入并键入值 2）SHIFT + TAB或单击第一个输入并键入值 3）点击鼠标外输入 4）在输入中单击鼠标 4）清除输入 5）验证发生（成功）

场景4（失败） - 第二个输入具有值，使用键盘 1）选择或单击第二个输入并键入值 2）SHIFT + TAB或单击第一个输入并键入值 3）按TAB键 4）按SHIFT + TAB键 5）清除输入 6）验证不发生（失败）

Answer 1

场景4（失败） - 第二个输入有值，使用键盘1）TAB到或单击第二个输入并键入值2）SHIFT + TAB或单击第一个输入并键入值3）按TAB键4）按SHIFT + TAB键5）清除输入6）不进行验证（失败）

这不是失败。＆＃34;懒＆＃34;验证是默认的。

在第一次提交表单之前，此插件将始终忽略required规则。您可以输入值，标签，删除值，再次输入值，required规则将始终被忽略，直到首次点击submit为止。

请参阅documentation：

在字段被标记为无效之前，验证是懒惰的：在首次提交表单之前，用户可以通过字段标记而不会收到烦人的消息 - 在有机会真正输入正确值之前，他们不会被窃听

实施＆＃34;渴望＆＃34;验证...

onkeyup: function (element, event) {
    if (event.which === 9 && this.elementValue(element) === "") {
        return;
    } else {
        this.element(element);
    }
},
onfocusout: function(element) {
    this.element(element); 
}

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

如果下一个输入非空白，则jQuery验证不会触发

1 个答案: