Skip to main content

Validating the jQuery UI Datepicker

05-14-12 Rob Tarr

The jQuery UI datepicker and client-side form validation often don’t play well together. Rob Tarr offers workarounds on how you can make peace between them.

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 on twitter.

Sparkbox’s Development Capabilities Assessment

Struggle to deliver quality software sustainably for the business? Give your development organization research-backed direction on improving practices. Simply answer a few questions to generate a customized, confidential report addressing your challenges.

Related Content

See Everything In

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development