CODEWITHSUNDEEP
javascriptjqueryjquery-validate
one-hand-octopus
one-hand-octopus

Reputation: 2743

jQuery validate would not work on focusout?

I have the following code to validate the input when focus out. What I want is whenever a user click the input field and click somewhere else to focus out, the field would validate itself to be not empty, and the message should be displayed. However the following code does not do anything when focused out. 

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

Upvotes: 1

Views: 1473

Answers (2)

User863
User863

Reputation: 20039

Using onfocusout option

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

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is because you need to initialise validate() when the page loads. To invoke the validation rules when the focusout event occurs, call the valid() method on the relevant form, like this:

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

Upvotes: 1

Related Questions