title: Validate date field on focusout with jquery-validation
body: <p>Date Input Field not valid, When first time selecting the date.<br>
         Its showing required error message,  because of field have an empty value(<em>check console log</em>). But field will be valid on second change.</p>
  
  <p>Notes: A cause is that date input field loses focus when picking the date (click event). But the date populates only later changed when the click event happens. But validator will validate field on focus out event. </p>
  
  <p>I'm validating a form using <a href="https://jqueryvalidation.org/" rel="nofollow noreferrer">Jquery Validation</a>, using <a href="http://bootstrap-datepicker.readthedocs.io/en/latest/" rel="nofollow noreferrer">bootstrap-datepicker</a> for Widget.</p>
  
  <p>^^for Better UX Run code snippet on full-page ;)
  or 
  <a href="http://jsfiddle.net/y649qhgp/13/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>from @Sparky / @Vignesh ans: Yes, its a workaround for this, We can use change/hide/changeDate(module attribute) event handler. It gets triggered once the input values have been set.
  But the problem is whenever we pick from year->month->date each clicks in the picker, removes focus from input and focusout event fired and showing the error message until choosing the date.</p>
  
  <p>It's not flat like choice field. in choice field there is no focusout event triggered until choosing the option from field widget. Like this, How can we move around the year/month/date options without seeing error message?.</p>
  
  <p><strong>jQuery:</strong> &amp; <strong>HTML</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(function() {
        $("#editEventForm").validate({
          rules: {
            full_name: {
              required: true,
            },
            event_date: {
              required: true,
            },
          },
          messages: {
            full_name: "Please enter your full name!",
            event_date: "Please enter valid date!",
          },
          highlight: function(element, errorClass) {
            var e = $(element);
            e.closest('.has-feedback').removeClass('has-success').addClass('has-error');
          },
          unhighlight: function(element, errorClass) {
            var e = $(element);
            e.closest('.has-feedback').removeClass('has-error').addClass('has-success');
          },
          onfocusout: function(element) {
            console.log("element value --&gt; ", $(element).val());
            return $(element).valid();
          },
        });
        $('#eventDate').datepicker({
          autoclose: true,
        }).on('change', function() {
          $(this).valid(); // triggers a validation test
          // $(this) refers to $('#eventDate')
        });
  
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.has-error :focus {
    border-color: #f84545 !important;
  }
  .error {
    color: #f84545;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
  
  
  
  &lt;form id="editEventForm"&gt;
    &lt;div class="form-group"&gt;
      &lt;div class="has-feedback"&gt;
        &lt;label for="eventDate"&gt;Full Name * &lt;/label&gt;
        &lt;input class="form-control" id="fullName" name="full_name" type="text"&gt;
      &lt;/div&gt;
      &lt;div class="has-feedback"&gt;
        &lt;label for="eventDate"&gt;Event Date * &lt;/label&gt;
        &lt;input class="form-control" id="eventDate" name="event_date" placeholder="MM/DD/YYYY" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;input type="submit" value="ClickMe"&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>