Проверка 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

Использование 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>

Answer 2

Проблема в том, что вам нужно инициализировать validate() при загрузке страницы. Чтобы вызвать правила проверки, когда происходит событие focusout, вызовите метод valid() для соответствующего form, например:

$("#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>