jQuery 验证不适用于 focusout？

Question

我有以下代码来验证聚焦时的输入。我想要的是每当用户单击输入字段并单击其他地方以聚焦时，该字段将验证自身不为空，并且应该显示消息。但是，以下代码在聚焦时不执行任何操作。

$("#NameQuery").on("focusout", function () {

  $("#myform").validate({
    rules: {
      NameQuery: "required"
    },
    messages: {
      NameQuery: "Please fill in name query"
    },
    errorElement : 'div',
    errorLabelContainer: '.error__input'
  });

});

.error__input{
  border: 1px solid red;
  min-height: 20px;
  width: 170px;
}

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post" action="">
  <input type="text" id="NameQuery" name="NameQuery">
  <div class="error__input"></div>
  <input type="submit" value="Search">
</form>

Answer 1

问题是因为您需要在页面加载时初始化 validate()。要在 focusout 事件发生时调用验证规则，请在相关 form 上调用 valid() 方法，如下所示：

$("#myform").validate({
  rules: {
    NameQuery: "required"
  },
  messages: {
    NameQuery: "Please fill in name query"
  },
  errorElement: 'div',
  errorLabelContainer: '.error__input'
});

$("#NameQuery").on("focusout", function() {
  $('#myform').valid();
});

.error__input {
  border: 1px solid red;
  min-height: 20px;
  width: 170px;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post" action="">
  <input type="text" id="NameQuery" name="NameQuery">
  <div class="error__input"></div>
  <input type="submit" value="Search">
</form>

Answer 2

使用 onfocusout 选项

$("#myform").validate({
  rules: {
    NameQuery: "required"
  },
  messages: {
    NameQuery: "Please fill in name query"
  },
  onfocusout: function(element) {
    $(element).valid()
  },
  errorElement: 'div',
  errorLabelContainer: '.error__input'
});

.error__input {
  border: 1px solid red;
  min-height: 20px;
  width: 170px;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post" action="">
  <input type="text" id="NameQuery" name="NameQuery">
  <div class="error__input"></div>
  <input type="submit" value="Search">
</form>

jQuery 验证不适用于 focusout？

jQuery validate would not work on focusout?

javascript

jquery

jquery-validate