Wednesday, November 3, 2010

jQuery Plugin for HTML5 Form Validation

As I have posted previously, I like to write User Interface Libraries.  An important part of each library I have written in the past has been the JS layer as it adds the interactivity to the entire experience.  The problem with my past attempts has always been how tightly coupled every component was.  If you make a change in one component, you risk breaking any or all other components.

In my most recent attempt at a UI lib, I have decided to break out different layers of the library into their own library.  Aside from the obvious decoupling, this allows each library to evolve separately and with this, I hope to reach a much wider audience as no one would be forced to use a big library if they only wanted one or two features. This will also be my first time releasing any of my code to the public, so lets hope 11 years of internal development has paid off :)

I would like to start by saying that the functionality being added to forms in HTML5 is long overdue.  I mean we have had to deal with a lack of a required attribute for far too long now.  And no maxlength on a textarea... what were they thinking? :)

Each UI lib I have built in the past has made an attempt to fill this void and typically has fallen short in some manner or another.  But now with the HTML5 spec getting closer to final, the spec in general receiving so much attention, and at least one browser or another attempting to add some support, this makes writing a UI lib to meet this demand that much easier.  The W3C spec provides "the spec"; you know that document we always request when starting a project but rarely receive other than a few emails of the idea persons rants or a couple chopped up screenshots thrown together in MS Paint. Yeah, those specs! :)  I'm not saying that's what the W3C spec doc is like...cause its actually a good spec doc.. honest.  And having at least one browser or another that has attempted to implement some of this functionality helps set a precedence for how it should function in the UI lib for the other browsers.  It might not be how all browsers end up implementing in the end, but at least it sets us in the right direction.

So enough build up!  I am presenting an early release of the jquery-ui-form.js library!  This is a jQueryUI plugin using $.widget that adds ui.form and ui.field widgets.  I started off with Web Forms by Scott Gonzalez and reorganized the code into a $.widget because I thought it fit better that way and I added much more on top of that.  This is an early release so not everything is finished yet as the $.form widget does not do anything yet.

It is, however, very functional in regard to the ui.field widget.  It provides support for HTML5 input attributes: [required], [placeholder], [max], [min], [pattern], and [step], HTML5 select attributes: [required] and HTML5 textarea attributes: [required] and [maxlength].  It provides validation for typeMismatch, rangeUnderflow, rangeOverflow, stepMismatch, tooLong, patternMismatch, and valueMissing.  It also adds methods for checkValidity(), setCustomValidity(), validationMessage(), validity(), willValidate(), labels(), valueAsDate(), valueAsNumber(), stepUp(), and stepDown() but not all are complete yet in this release.  I have also added some extra validation attributes on input and textarea for [data-minlength] along with a tooShort validity check and on select-multiple type for [data-max] and [data-min] which use the rangeUnderflow and rangeOverflow validity checks.

All functionality attempts to work along side, rather than instead, of existing HTML5 features that browsers have already implemented.  So in other words, if your browser already supports the feature, the lib will use it.  Otherwise, it attempts to provide a substitute.  The [placeholder] attribute is a very good example as detection is done on whether the browser supports this natively.  If it does, the lib does nothing, otherwise we provide an alternative to mimic how it works in other browsers.

As this is setup as a $.widget, it is accessible like any other jQueryUI widget.  You can initialize the widget simply by using:


Or on all of your form elements by using:


You can access methods by using:


You can change any of these constraint attributes using normal jQuery attr() and the change is reflected in the validation immediately:

$('#myField').attr('max', 100);

I'll be providing more docs, etc about the library as I finish more on the project page.  In the meantime, please download and try this out and let me know what you think, good or bad.  Any feedback is good feedback.