javascript - 选择时的 jQuery 验证不起作用

Question

使用 jQuery 验证(即 https://jqueryvalidation.org/ )，我似乎无法让即时验证适用于选择，例如

<form id="f">
  <div><input type="text" id="a" name="a" class="required"></div>
  <div>
    <select id="b" name="b" class="required">
      <option value="">Please select...</option>
      <option value="foo">Foo</option>
      <option value="bar">Bar</option>
    </select>
  </div>
  <div><input type="text" id="c" name="c" class="required"></div>
</form>
<button>Save</button>

在填充和取消焦点然后取消填充和取消焦点时，文本字段显示错误，但不显示选择。不过，所有字段都按 .valid() 上的预期进行验证。

此处的 fiddle 演示:https://jsfiddle.net/4hq3b0ub/

Answer 1

您可以添加对选择更改事件的有效测试: 这样，每当您更改所选选项时，都会调用验证器有效方法，并且您会在提交之前看到错误消息。

代码片段:

$("#f").validate();
$("button").click(function() {
  $("#f").valid();
});

//
// add the following:
//
$("#b").on('change', function(e) {
  $(this).valid();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>

<form id="f">
    <div><input type="text" id="a" name="a" class="required"></div>
    <div>
        <select id="b" name="b" class="required">
            <option value="">Please select...</option>
            <option value="foo">Foo</option>
            <option value="bar">Bar</option>
        </select>
    </div>
    <div><input type="text" id="c" name="c" class="required"></div>
</form>
<button>Save</button>