y 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
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 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:
......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()? Listnnumber 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 withvalidateXXX()andisXXX()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.
