JavaScript client-side validation helper

• Download source code - 1.58 KB

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:

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:

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:

validator["InputName"].required = true;

you can do the following in your 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:

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