H5F Validation with jQueryUI Datepicker

Making date fields validate on datepicker close author(s): Rob Tarr

by chridam

HTML

<script src="https://raw.github.com/ryanseddon/H5F/master/h5f.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<form id="h5ftest">
    <input type="date" required pattern="\d{2}\/\d{2}\/\d{4}">
</form>

CSS

.valid {
  background: green;
  color: #fff;
}
.error {
  background: red;
  color: #fff;
}

JavaScript

$(function() {
  H5F.setup( $( "#h5ftest" ) );

  $( "[type=date]" ).datepicker({
    onClose: function() {
      $( this ).focus().blur();
    }
  });
});