Form Validation with H5F and jQueryUI Datepicker

fiddle.css

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

fiddle.html

<form id="h5ftest">
    <input type="date" required pattern="\d{2}\/\d{2}\/\d{4}">
</form>​

fiddle.js

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

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

fiddle.manifest

name: H5F Validation with jQueryUI Datepicker
description: Making date fields validate on datepicker close
authors:
  - Rob Tarr
resources:
  - https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js
  - https://raw.github.com/ryanseddon/H5F/master/h5f.js

normalize_css: no