We are rebuilding. Join us.

We are rebuilding our site—live at building.seesparkbox.com. Join us, real-time, as the site evolves. It will be ugly at times. Sometimes it will be downright broken. But it will always be transparent and real. You can even check under the hood of the public repo on Github and share your ideas. Crazy, are we? Read why we're doing this.

Let’s be more than friends.

We really
like to share

The Foundry is our place to share articles, tutorials, events, and more. Search for a topic or just read everything.

Validating the jQuery UI Datepicker

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.

Keep up with new posts in the Foundry by subscribing to our weekly email: The Spark.