validateThis 1.0!

Background
Working in web design, it is common to create forms that allow for users to enter information.  It is also common to need to validate this data before it can be passed on to a results page and / or a database.  The concern of data integrity, especially when it is left up to the user to enter data, is a serious and pervasive concern.  It is a standard solution to implement form validation via Javascript to let users know that required fields have been left empty, or that data entered into a field is not acceptable.  Examples are numerous and unnecessary.

Problem
As powerful and wonderful as standard Javascript form validation is, its primary failure is that it is tedious to create new functions and to implement form-specific validation for every form that is created. It is easy enough to do this for a small form, or to do so only in limited scope.  But when you have large forms or large scope, repeating this process is borderline insanity.  Especially for those of us who develop in smaller teams with broad sets of responsibility, spending project time on form validation is often neglected or crudely implemented, with frequent code reduplication (DRY principle in action, for readers of The Pragmatic Programmer!).  In an effort to stem this, I set out to design a generic form validation function, flexible enough to be implemented widely and quickly, yet losing none of the strength and helpfulness of form-specific validation.

Solution 1
I had seen examples of this idea in action at apple, but it is one (or two) steps short of what our development environment required for a quick and powerful generic tool.  The little bit I have done with Javascript (and the DOM tree) so far made me think that a far more elegant and usable solution could be done. Setting up a function of this sort would first need to loop through every element in the form, and there would need to be something inherent about the form element itself that triggered a specific type of validation (is it a phone number, an email address, an integer, etc..).  I began by thinking in traditional and non-creative ways: create the element’s name in such a way so that, when parsed, something about the name itself will trigger the validation.  There would need to be an additional naming convention component for noticing if the element is a required field or not.  Without going into the specifics, it can be said that this solution would have required significant planning as to how to design the form (as well as the backend that handles it) beforehand, and implementing this solution in existing forms would be a nightmare (I know, because I tried it).  The solution, if it is going to be long-lasting, would need to be able to implemented without being figured into the page design, as this would make coding more difficult, and end up in less acceptance by the rest of the group and never being used again.  I also had a need to be able to implement this easily in existing pages, which was not working out.

Solution 2
I kept the core of the function, but needed to change the approach and began searching the DOM tree (and the corresponding Javascript object model) to find out how else to attack, and quickly found the two pieces that would make this work: className and title.  Already a big fan of CSS, it was readily apparent that this would be sweet.  Instead of modifying the element’s name, which would also require code modification of the backend, I can append new classes that are specific to the validator onto the field class (this is a little-known, or at least little-used CSS trick).  The code would look like the following:

• class=”formFieldText vt_req”
• class=”formFieldText vt_req vt_email”
• class=”formFieldText vt_phone”

In each of these examples, multiple classes are assigned.  The formFieldText class is a standard class for controlling the input fields (although other and better ways exist, this is just an example!!) while the other classes are part of the validator.  The prepend “vt_” signifies that this class is used explicitly for my function: validateThis.  The other piece that really rounded out this function is the title property.  Assigning a title to each of the form elements, the validateThis function will access the title to make the message clear about which field is bad (as if the red field border isn’t enough!) in the alert.

View the example here.

Download a zip file of the example files.
Download the example files. (validateexample.html, default.css, validateThis.js, README)

As this is only in version 1.0, it’s capacity and scope is still limited, but it is a great foundation and has already found plenty of places to be implemented.  One last trick:  It can be implemented along with another form-specific function if this doesn’t fit 100% of your needs.  Although I have already found places to use it exclusively, there are always exceptions where something needs to be addressed in a special way.  I have done this by replacing:

onSubmit=”return validateThis(‘myForm’)”

with

onSubmit=”return (validateThis(‘myForm’) && formSpecificValidation(parametersIfAny))”

If you have suggestions, or have found ways to implement validateThis, I only ask that you leave a comment here in return.