Why use client-side validation (CSV)?

With the explosion of thin-client development, most web applications do not utilize the resources of the client. It is almost viewed as 'taboo.' I contend that the client machine is a valuable resource that should be utilized for its processing capabilities.

Most web applications use server-side processing to validate HTML forms. This works but is very inefficient since the request must be sent over the wire, checked, and a response sent back to the user. Why not let the client machine do the mundane field validation and let the server handle business logic validation? This framework is written to satisfy this request and validate HTML forms for field types where it should be, on the client-side. It is written entirely in Javascript and supports multiple browsers.

A sample form is provided that utilizes this framework.

Features of client-side validation (CSV):

• Lightening fast validation speed.
• Support for multiple browsers - CSV uses cross browser's framework to abstract out support for multiple browsers.
• Ability to display errors in multiple locations - message box, label modification, and within input element.
• Ability to put framework in debug mode.
• Ability to submit an array of buttons for the framework to disable while submitting the form. By default, it will disable buttons with label id='submit'. You can validate this by submitting the form in debug mode.
• Flexible Message Box
  • Display a DHTML message box with errors that link back to the offending input element. Message box is displayed based on your location of a DIV element with id=errMsg. This means you can locate the message box anywhere on your page. You can override this and other variables as you like.
  • Ability to switch out message box icons.
  • Dynamically calculate number of columns based on browser width. The maximum column width is based on user setting.
  • Limit number of rows of display based on user setting.
  • Customizable display of messages and look and feel based on CSS.
  • Name of error is based on label name. This name will be formatted from label 'id'. It may be mixed case or separated with '.' or '_'.
  • Toggle whether focus from error anchor selects the text or just drops in a cursor.
  • You can utilize the same look and feel for both client-side and server-side error messages.
• Allow user to override errors if all required fields are satisfied. If you allow override, the framework will watch your errors. If the framework sees that you have submitted the form a second time and the errors are the same and all required fields have been satisfied, then it will prompt you for override confirmation.
• Easily add new restraints. See 'clientValidation.js'
• Support field validation based on its 'id' prefix.
• Built-in validation support for almost 10 field types.
• Robust support for multiple input formats through regular expressions. See support for 'date' type.
• Debug of Javascript methods through CBE's handy debug screen. Just type in the function in the expression window and see the output in the message box.

A sample form is provided that utilizes this framework.

Sample form with Client-side validation.

Try it out!

1. Enter in invalid text and submit. Reset form.
2. Enter in valid text and submit. Reset form.
3. Turn on debug and repeat step 1 and 2.
4. Turn off debug and turn on override. Enter errors and submit. Submit again. Reset form.
5. Turn off override. Turn off message box. Enter errors and submit. Reset form.
6. Turn on show errors in form element. Enter errors and submit. Reset form.
7. Change icon and turn on message box. Enter errors and submit. Reset form.

/*
 * Validate a form's input fields. It will gather all input form elements and validate their fields.
 * If override is allowed, then it will compare new errors with old and if they are
 * the same and none of the errors are required, user can choose to still submit the form.
 *
 * frm - Form element id string
 * severity - severity of error ('warn', 'critical', 'info')
 * debug - boolean, if true, then alert statements will be produced.
 * displayWithMarker - if true, displays error message using marker; otherwise,
 *      display where labels are
 * selectElement - if true, when person selects error link, it will focus and display
 * allowOverride - if true, user can override errors and submit the form
 * showErrorsInElement - if true, error message will be in input element
 * btnArary - button array you want disabled while processing
 */
function csvValidate(frm, severity, debug, displayWithMarker, selectElement,
    allowOverride, showErrorsInElement, aBtnArray) {

Extra Information

This software is licensed under the LGPL. See opensource.org for more information.

Note, the source files are provided in a readable format. They are not in a compact form to minimize size and file load. When you include these files, your browser will cache them so the impact is only once. In addition, this non-compact form is more legible. If you prefer a compact form, then feel free to compact it.

Client feedback using the following browsers:

• IE 6 - no problem
• Phoenix - no problem
• Mozilla 1.2.1 - no problem
• NS 4.7 - doesn't work
• NS 7, Opera 7 - minor bug (highlighted of errors)

Cross-Browser   Mailing list