jquery - jQuery Validate - 渴望验证 selectize.js 和 Bootstrap .btn-group-toggle 输入

Question

我的表单包含一个选择和一个引导切换按钮组。这两个字段都是强制性的（因此该required规则适用于两个字段）。

HTML：

<form role="form" id="form">
  <div class="form-group">
    <div class="form-group shiny-input-container">
      <div>
        <label for="coin">Choose:</label>
      </div>
      <div id="coin" class="btn-group-toggle btn-group" data-toggle="buttons">
        <label class="btn ">heads
          <input type="radio" value="heads" name="coin"/>
        </label>
        <label class="btn ">tails
          <input type="radio" value="tails" name="coin"/>
        </label>
      </div>
    </div>
  </div>  
  <div class="form-group">
    <select id="name" placeholder="Select a person..." name="name">
      <option value="">Type a name...</option>
      <option value="xerxes">Xerxes</option>
      <option value="darius">Darius</option>
      <option value="cyrus">Cyrus</option>
    </select>
  </div>
  <button id="submit" type="button" class="btn btn-default action-button">submit</button>
</form>

JS：

$(function() {
    $('#name').selectize();

$("#form").validate({ 
     ignore: [],
    rules: {
        coin: {
          required: true
         }, 
         name: {
             required: true
          }
       }
 
  }); 

$("#submit").click(function() {
    $("#form").valid();
});

//Using `change` event to force eager validation
$('.selectized, label.btn>input').change(function() {
    $(this).valid();
  }); 

});

见JSFiddle

这些组件的实际输入标签是隐藏的（例如，在 Bootstrap 按钮组中，每个复选框都包含在标签标签中，因此在 DOM 中不可见），因此我ignore: []用来告诉 jQuery Validate 不要忽略它们。

当用户点击“提交”时提交表单时验证工作正常 - 如果提交时字段为空，则会按预期在其旁边显示错误消息。

问题是这些字段没有被急切地验证 - 一旦用户填写了一个在最初提交表单时为空的字段，该字段就不会重新验证（您可以在演示中看到即使在该字段之后错误消息仍然存在接收输入）。

要强制重新验证，我可以使用change事件侦听器，如下所示：

//Eager validation of selectize
$('.selectized').on('change', function() {
    $(this).valid();
  });
  
//Eager validation of toggle button group
$('label.btn>input').on('change', function() {
    $(this).valid();
  });

但这似乎很老套，我想知道是否有更通用的解决方案——不需要预先知道哪些输入需要强制急切验证？

我还想更好地理解为什么这些领域没有得到热切的验证。我认为这可能与 jQuery Validate 的默认事件侦听器 ( focusin, focusout, keyup, click) 无法捕获这些输入的变化有关，因为它们在 DOM 中不可见？我是网络开发的新手，所以任何见解都将不胜感激。

标签： jqueryformsjquery-validate