By now you likely have worked with, or at least experimented with, cross-cutting concerns, a core element of
Aspect-Oriented Programming (AOP). AOP is an excellent and very compelling approach for traditional software development, but you may be surprised to learn that it can also be applied to client-side JavaScript form validation, thanks to Dan G. Switzer's development of the
qForms JavaScript API.
This 10-Minute Solution examines the qForms JavaScript API, highlighting the ability to apply JS form validation logic to the forms of a page in an aspect-oriented way. With qForms, you can include a single JS library in a page, and then add a single block of <script> code that defines the validation rules to the bottom. In doing so, you inject validation into a form without the typical messy onClick/onSubmit garbage.
Inserting client-side validation logic is often messy and cumbersome.
Use the qForms JS library to inject your page(s) with standard and/or custom validation logic.
How qForms Works
The qForms API was designed principally to simplify the process of working with HTML forms via JavaScript. Typical uses of qForms include the following:
- Easy getting/setting of form field values
- Loosely-coupled form validation (stock validation, as well as custom validation)
- Automatic event handling
- Cookie management
- And more...
While qForms offers many excellent features, this article focuses on its form validation capabilities.
Prep Work
The first thing to do is to download a copy of the qForms API. The latest stable release as of the time of this writing is version 1.5 (build 139). Although this build is two years old, the API is still relevant and effective, as qForms boasts an active user community.
Once you have the library files, set up a page that will enable you to use the API. To do this, load the base library and then initialize the API:
<script src="js/lib/qForms.js"></script>
<script type="text/javascript">
qFormAPI.setLibraryPath( "js/lib/" ); //set path to qForms library**
qFormAPI.include( "*" ); //load all default libraries
</script>
| Author's Note: Be sure to place the qForms files in a directory structure that makes sense for your Web application. For this example, a folder named 'js' has been created with a subfolder named 'lib'. The qForms API and library files are then placed within the lib folder. |
These initialization steps need to take place early in your page, ideally in the <head> section. With the qForms API initialized and its libraries loaded, you can move on to form validation.
Look Ma, No Events!
The most basic sort of validation you might want is forcing certain fields as required fields. In a typical implementation, this would require that you define event-handling routines via a single onSubmit method, or perhaps several onBlur/onFocus methods. You would then need to verify whether the required field(s) is/are not null.
With qForms, all you do is define a JS object with the same name as the form and then specify the required fields by name:
...
<form name="contactForm" action="/contactHandler">
<input type="text" name="firstname" />
<input type="text" name="lastname" />
<input type="text" name="phone" />
<input type="text" name="email" />
<input type="submit" />
</form>
...
<script type="text/javascript">
myContactForm = new qForm( "contactForm" );
myContactForm.required( "firstname, lastname, phone" );
</script>
When this page is served up and the form is submitted, client-side JavaScript logic will kick in and the qForms API will ensure that the required fields are completed prior to the form being submitted to the server. If these fields are not completed, an error message will appear to warn the user and the field or fields that have not been completed will be highlighted in red. All of this comes for free with the API and is fully customizable through the CSS.
For a live example of a simple form, check out Simple Form #1 from the qForms site.
More Form Validation
Requiring certain fields to have a value is a good starting point, but often applications demand more sophisticated validation capabilities. QForms rises to this challenge.
Out-of-the-Box Validation Methods
A variety of field validation methods come pre-built with qForms. To use these methods, simply reference the form and the form field name, and then call the method:
myForm.fieldName.validateXXX()
The following are just some of the validation methods qForms supports:
validateAlpha()
validateAlphaNumeric()
validateCreditCard()
validateDate()
validateEmail()
validateInteger()
validateLength()
validatePassword()
validatePhoneNumber()
validateSSN()
validateState()
validateZipCode()
Each of these methods also has an isXXX() version that returns a Boolean value and can be used in customized validation routines (described below).
Additional validation methods include the following:
- createDependencyTo() The designated field is required only if the source field is selected/completed.
- isNotNull()/isNotEmpty() Evaluate null and empty cases regardless of the field type (text, check/radio group, selection, and etc.).
- validateAtLeastOne() List n number of fields, requiring at least one of them to be selected/completed.
Custom Validation Routines
Beyond its stock validation routines, qForms offers a rather extensive capability to define custom validation routines. This extensibility centers around two key methods:
- validateExp() evaluates the supplied Boolean expression to determine a field's validity, such as verifying that a particular field is equal to a certain value, or ensuring that a field contains a certain number of characters
- _addValidator() facilitates the creation of a fully customizable JS function that serves as a new Validator (complete with validateXXX() and isXXX() methods)
Time-Saving Form Validation
The qForms API is a simple, flexible JavaScript library that eases the development and maintenance of client-side JavaScript. In particular, qForms is an effective library for defining HTML form validation in a very lightweight, aspect-oriented manner. The next time that you are faced with the need for client-side validation of a Web form, give qForms a try. It just might reduce your development time and testing cycles, while leaving your forms clean and crisp.
