RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


JavaScript Form Validation, the Aspect-Oriented Way

Did you know you can apply Aspect-Oriented Programming to client-side JavaScript form validation? Read on to find out how.

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 <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

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" />



<script type="text/javascript">
myContactForm = new qForm( "contactForm" );

myContactForm.required( "firstname, lastname, phone" );

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.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date