code that defines the validation rules to the bottom. In doing so, you inject validation into a form without the typical messy
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
- 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.
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:
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:
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:
The following are just some of the validation methods qForms supports:
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.).
nnumber 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
Time-Saving Form Validation