Click here to Skip to main content
15,867,453 members
Articles / Programming Languages / Javascript

JavaScript client-side validation helper

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
6 Dec 2009CPOL2 min read 24.8K   195   8   3
A JavaScript client-side validation helper.

Introduction

This helper has the objective of providing a validation solution that while effective, remains simple, and easy to maintain/adjust to specific needs. Also, it is completely client-side.

Background

In this helper, there are two steps that take place for validating: the first step is while the user is typing in an input; at this stage, we can prevent the user from entering invalid data. The second step is while the user is trying to submit the form, at which point, the page code must validate things that can not be done while typing, and if an error is found, the user must be informed and instructed on how to correct the problem.

The helper provides you with an object you can use to validate the inputs of any form, the InputValidator. There are also a few functions in the global scope used as format validators, which are called StringFormatter, IntegerFormatter, and FloatFormatter.

Validations are enabled by setting several properties of the InputValidator object. Those validations are applied in a specific order as follows:

Validation process:

Enforced while typing:

  • MaxLength is enforced first.
  • Integer, float, and string formatters are enforced in the second place.

Enforced before submit:

  • Required is enforced first.
  • MinValue, MaxValue are enforced in the second place.
  • Regular Expression is enforced in the third place.

Note: Originally, I did not include a "maxlength" validation because the attribute MaxLength can perform the same validation; however, TextArea does not have a MaxLength attribute (atleast, not in IE), so I decided to include it in case you want to limit the amount of data in a TextArea.

Also note that most of those validations apply only to text inputs. Only the Required validation can be applied to other elements like selects or radio buttons, for instance. If a validation makes no sense for the type of input it is applied to, the validation will be ignored.

Using the code

At some point, you need to setup the input validator like this:

JavaScript
var validator = new InputValidator("FormName");
    // enabling the required validation for input "InputName"
validator["InputName"].required = true;
    // enabling any of the format validations
validator["InputName"].format = IntegerFormatter;
    // enabling MinValue and MaxValue validations
validator["InputName"].minValue = 0;
validator["InputName"].maxValue = 100;
   // enabling regularExpresion validation
validator["InputName"].regularExpresion = /^\w+@(\w+\.)+\w+$/;

Additionally, you need to set the validChars property when using the StringFormatter:

JavaScript
validator["InputName"].validChars = "abcdefABCDEF0123456789";
//allows hexadecimal numbers

Now, in order to minimize the amount of JavaScript code required to initialize the different validations of a form, we can use attributes directly in the HTML elements. Basically, for each property you would initialize using JavaScript code, you can do so by adding attributes to your HTML tags. For instance, instead of writing:

JavaScript
validator["InputName"].required = true;

you can do the following in your HTML:

HTML
<input type="text" name="InputName" required="true" />

And so on for the rest of the validation properties we saw already (note: the attribute names are case sensitive).

And that is it. Basically, you create an InputValidator for the formulary, and then configure the different validation options for each input using JavaScript, or if you are lazy like me, add the appropriate attributes to each HTML tag. The validator takes care of the rest.

Also, before you submit a form, make sure you call the Validate function like this:

JavaScript
if(validator.validate()) 
    // do submit...
else
    // cancel submit...

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralReally should use prototype Pin
Helbrax7-Dec-09 7:55
Helbrax7-Dec-09 7:55 
GeneralRe: Really should use prototype Pin
AbelCantu8-Dec-09 3:41
AbelCantu8-Dec-09 3:41 
GeneralRe: Really should use prototype Pin
canozurdo9-Dec-09 4:03
canozurdo9-Dec-09 4:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.