Automated Form Validation with JavaScript

Validating forms and elements sometimes means a lot of work, specially if you create bigger websites with no sophisticated JavaScript environment. This JavaScript gives you the the possibility to validate all kind of form elements and it is quiet easy to implement (see screenshots below). This script makes use of the objects.elements.length function and loops through all parts of the form. Among other element it detects select, text, textarea, radio and other elements, which maybe are not included in the example. If you set further elements you have to consider only this: The element needs to have a specific name, which has to be handled in the JavaScript (see example). That's all there is to consider. The JavaScript Automated Form Validator has been tested with the following browsers: IE, FireFox, Chrome, Safari, Opera, Netscape, Mozilla.

The scripts snippets you see here (the complete script is downloadable) is only a small part of the complete script. That's it. All stuff is all prepared for your convenience (example with necessary files included). Best regards Claudio Biesele


Part of the JavaScript Code :

for(var i=0;i<obj.elements.length;i++) {
var objtype = obj.elements[i].type;

// routine for all types of form elements except radio
switch(objtype) {
case 'select-one':
isSelected(obj.elements[i].selectedIndex);
break;
case 'select-multiple':
isSelectedMultiple(obj.elements[i].selectedIndex);
break;
case 'text':
if(obj.elements[i].name == "email") {
isEmail(obj.elements[i].value);
} else if(obj.elements[i].name == "numeric") {
isNumeric(obj.elements[i].value);
} else if(obj.elements[i].name == "postcode") {
isPostalCode(obj.elements[i].value);
} else if(obj.elements[i].name == "textfield") {
isTextfield(obj.elements[i].value);
}
break;
case 'textarea':
isTextarea(obj.elements[i].value);
break;
case 'checkbox':
isCheckbox(obj.elements[i].checked);
break;
}
}


Part of the HTML Code:

<form action="javascript:void(0);"
method="post" enctype=""
name="formdata"
onsubmit="isRequired(this);">
<table width="300" style="height: 400px;" cellpadding="0" cellspacing="1"><tr>
<td>Email: </td>
<td nowrap><input type="text" name="email" size="24" maxlength="24" /></td>
</tr>
<tr>
<td>Numeric: </td>
<td><input type="text" name="numeric" size="24" maxlength="24" /></td>
</tr>
<tr>
<td>Postal Code: </td>
<td><input type="text" name="postcode" size="24" maxlength="24" /></td>
</tr>
<tr>
<td>Text Field: </td>
<td><input type="text" name="textfield" size="24" maxlength="24" /></td>
</tr>

</table>
</form> 


Picture autoval_1.jpg
Example 1: Empty form with almost every possible element.
Picture autoval_2.jpg
Example 2: Partially validated form with almost every possible element.
Picture autoval_3.jpg
Example 3: Empty form with some elements.
Picture autoval_4.jpg
Example 4: Partially validated form with some elements.
Download the full script at www.fastproject.ch. The downloaded script is free from Copyright restrictions, Zurich, 06th of October 2011.
Donate with PayPal:
placeholder