JavaScript validacija (check) of forms

Problem : to make universal function for passage on fields of the form with an opportunity of check of the entered data

Really, it is more convenient to check the form while she "is not left" on the server, than after sending to return to the user HTML-page with the same form and the list of mistakes (though server check is necessary, from reasons of safety and on a case switched - off JavaScript). We shall try to outline JavaScript-function which will pass on all elements of the form, to define  their type and to make actions on check of the data. As argument function will accept the link to the form. It is the most convenient to cause her  on event onsubmit.

The form:

<form onsubmit = " return checkForm (this); ">

<input type = "hidden"/>

Name: <input type = "text" name = "name"/> <br/>

E-mail: <input type = "text" name = "email"/> <br/>

<br/>

Interests: <br/>

<input type = "checkbox" name = " inter [] " value = "music"/> Music <br/>

<input type = "checkbox" name = " inter [] " value = "TV"/> TV <br/>

<br/>

Age: <br/>

<input type = "checkbox" name = "age" value = "10-25"/> 10-25 <br/>

<input type = "checkbox" name = "age" value = "25-50"/> 25-50 <br/>

<input type = "checkbox" name = "age" value = " 50 + "/> 50 + <br/>

<br/>

Liked time of day: <br/>

<select>

<option value = "0" selected = "1"> Choose... </option>

<option value = "1"> Morning </option>

<option value = "2"> Day </option>

<option value = "3"> Evening </option>

<option value = "4"> Night </option>

</select> <br/>

<br/>

The comment: <br/>

<textarea> </textarea> <br/>

<br/>

To attach a file: <br/>

<input type = "file" name = "name"/> <br/>

<br/>

<input type = "submit" value = "To send"/>

</form>

In the form has come maksimalnoe number of various fields.

Now a code of JavaScript-function:

function checkForm (form) {

// Beforehand we shall declare necessary variables

var el, // the element

elName, // the Name of an element of the form

value, // Value

type; // Attribute type for input-ov

// A file of the list of mistakes, on a default empty

var errorList = [];

// KHehsh with the text of mistakes (a key - ID mistakes)

var errorText = {

1: " The field 'Name' is not filled ",

2: " The field 'E-mail' is not filled ",

3: " The file is not attached ",

4: " The comment is not left ",

5: " Liked time of day is not chosen "

}

// We receive family of all elements of the form

// We are passed on them in a cycle

for (var i = 0; i <form.elements.length; i ++) {

el = form.elements [i];

elName = el.nodeName.toLowerCase ();

value = el.value;

if (elName == "input") {// INPUT

// We determine type input-?

type = el.type.toLowerCase ();

// We assort all inputy on types and we process contents

switch (type) {

case "text":

if (el.name == "name" ** value == " ") errorList.push (1);

if (el.name == "email" ** value == " ") errorList.push (2);

break;

case "file":

if (value == " ") errorList.push (3);

break;

case "checkbox":

// It is done  nothing, though we can

break;

case "radio":

// It is done  nothing, though we can

break;

default:

// Here get input-? which do not demand processing

// type = hidden, submit, button, image

break;

}

} else if (elName == "textarea") {// TEXTAREA

if (value == " ") errorList.push (4);

} else if (elName == "select") {// SELECT

if (value == 0) errorList.push (5);

} else {

// The unknown element is found out;)

}

}

// A final stage

// If the file of mistakes is empty - is returned true

if (! errorList.length) return true;

// If there are mistakes - form the message, vyovdim alert

// Also we return false

var errorMsg = " At filling the form the following oshibki:\n\n " are admitted{allowed};

for (i = 0; i <errorList.length; i ++) {

errorMsg + = errorText [errorList [i]] + "\n";

}

alert (errorMsg);

return false;

}

Apparently from a script, he does not approach for all cases, and in another way and cannot be. Requirements to check of each form are individual. However, insignificant updating of conditions in this function will allow to check up the transmitted data from any form.

Example validacii forms with the help of JavaScript-function <http: // www.internet-technologies.ru/? url=http%3A%2F%2Ffastcoder.org%2Fdemo%2FformValidation.html>

The remark from cruel angel

More user-friendly to do{make} check not on event onsubmit, and it is direct at filling fields with the data.