y now you likely have worked with, or at least experimented with, cross-cutting concerns, a core element of Aspect-Oriented Programming
<script> 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:
qFormAPI.setLibraryPath( "js/lib/" ); //set path to qForms library**
qFormAPI.include( "*" ); //load all default libraries
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
method, or perhaps several
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" />
myContactForm = new qForm( "contactForm" );
myContactForm.required( "firstname, lastname, phone" );
For a live example of a simple form, check out Simple Form #1 from the qForms site.