jQuery 验证不适用于焦点输出？

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>