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>

​