No ideas here

JavaScript Form Validator

In this document, there is written how to use the JavaScript validator, and also some advanced topics from internals and extending it.

The purpose of the validator is to perform as much client side validation as possible with ease. The more general objective is to help you to make a perfect form.

Download

The current version is 0.9. License is BSD.

Defining the validation

At the beginning, you must tell the html page about the script. There are just two files that you must add to header of your page. Plus, there is one more component that is YUI3. Also note that you must include yui script before the validation.js.

<script type="text/javascript" src="yui/yui.js"></script>
<script type="text/javascript" src="form.js"></script>
<script type="text/javascript" src="validation.js"></script>

The main idea of defining validation is to use css classes in html form elements. So with defining a new class you can define validator to check the element content.

The code above defines a html input element that must be filled, and the length of the input must be at least 3 characters, and at most 10 characters. You can test the validation here:

Available validators

There are several available validation rules. Some rules can be applied on the form element, and the rest on various input element. Some rules can be applied to text fields only, and some even to other fields like check boxes, list boxes, etc.

Form rules

Validation	Description
val_auto	If specified, the form will be automatically validated. If not, you must validate the form manually by calling appropriate function. Note that if you want this to be available, you must load YUI3 library before you load the validation framework. The code you must insert into head of html page to load YUI3. Note that YUI3 is beta version at the moment, but since the validation framework is beta as well, and as I think that YUI3 should be used in new development, I think, this is ok. <script type="text/javascript" src="validation.js"></script>
val_no_disable_submits	Normally, the validator also makes sure that all the submit buttons are disabled after pressing one of them. This behaviour prevents accidental resend of forms. Using this class, you can prevent disabling all the submit buttons.
val_lang	Sets the localization used by this form. The default value is set to “en” for English, but you can also use “cz” for Czech. More languages and region codes (to distinct England, Australia, and US from each other) will come later.

Validation

Description

val_auto

If specified, the form will be automatically validated. If not, you must validate the form manually by calling appropriate function. Note that if you want this to be available, you must load YUI3 library before you load the validation framework.

The code you must insert into head of html page to load YUI3. Note that YUI3 is beta version at the moment, but since the validation framework is beta as well, and as I think that YUI3 should be used in new development, I think, this is ok.

<script type="text/javascript" src="validation.js"></script>

val_no_disable_submits

Normally, the validator also makes sure that all the submit buttons are disabled after pressing one of them. This behaviour prevents accidental resend of forms. Using this class, you can prevent disabling all the submit buttons.

val_lang

Sets the localization used by this form. The default value is set to “en” for English, but you can also use “cz” for Czech. More languages and region codes (to distinct England, Australia, and US from each other) will come later.

Field rules

Field rules can be applied to these HTML tags:

INPUT
TEXTAREA
SELECT

INPUT text and TEXTAREA are considered to be text controls in this document.

Some validator don’t makes sense at some elements like validating email in SELECT.

Validation	Applies to	Parameters
Description
val_auto	All elements	-
If specified, the field must have filled a value. That means: text fields some text inside the control select - one or more items must be selected radio - at least one item must be selected
val_minlen	Text, select	Minimal length of text/selection
If specified, the field must have a value that has minimal length of the text or at least some number of elements selected. That means: text fields text must be at least n characters long select at least n items must be selected
val_maxlen	Text, select	Minimal length of text/selection
If specified, the field must have a value that has at most some number of characters or some number of selected elements. That means: text fields text must be at most n characters long select at most n items must be selected
val_minvalue	Text elements
The value of the text field converted to the floating point number must have value greater or equal than specified parameter.
val_maxvalue	Text elements	Maximal value of text
The value of the text field converted to the floating point number must have value smaller or equal than specified parameter.
val_int	Text elements	-
Value of the field must be an integer. In detail, JavaScript function parseInt(value, 10) must not return NaN value.
val_float	Text elements	-
Value of the field must be a floating point number. In detail, JavaScript function parseFloat must not return NaN value.
val_email	Text elements	-
The field must be a valid email.

Extending validation

You can specify your own validation rules; however the method is rather a little simple now.

Localisation

One of the goals of the project is to provide localisable error messages. The localisation is provided now in Czech and English (no support for countries of dialects yet, but planned). The whole script is provided in UTF-8 encoding, so you should make sure that your server supports that.

Displaying results

After validation, the errors must be displayed. They are displayed rather inline than as well known JavaScript function “alert”. They can be positioned before or after the field, or inside some element. Now, the only supported possibility is after the field.

Future direction

There are, indeed, many places for improvements. Localisation, range of validators, documentation, improved stability and conditions checking, other yet unknown bugs, etc.