Validating the jQuery UI Datepicker

Nearly every website or web app we build at Sparkbox includes some sort of form. Often, dates are required, and we'll rely on the excellent jQuery UI datepicker. In order to create nice, user-friendly forms, good client-side validation is also usually involved.

The problem I've found with this combination is that the datepicker doesn't generally trigger validation when you change the date. This can be a problem if a user accidentally types an invalid date in a date field, and then they use the datepicker to correct it. Validation messages and styling will still show the date as invalid. No good – confused user.

Recently, I've been using either Ryan Seddon's well done H5F Library or the jQuery Validate plugin from Bassistance to handle form validation. Below are my solutions to handling the issue with the datepicker using these two validation libraries:

H5F

See working example

 

jQuery Validate plugin

See working example

If you would like to see solutions for other validation libraries let me know, I'll see what I can do. Or, let me know what your solution looks like. If you have suggestions, definitely let me know in the comments or on twitter.