JavaScript Form Validation
File:JS Validator.png
Sample error message
This is some code I wrote to facilitate simple form validation. All it does it make sure there is something entered in the field. It does not test for email address format, etc.
Features
- Finds elements by ID or name (searches for ID first, then name)
- Supports radio button validation (making sure the user selected one)
- Supports validation "groups"
- If none of the fields in a group are filled in, the group is ignored
- If one or more of the fields in the group are filled in, the rest are validated
- Displays a list of all fields with errors in a single alert window
- Allows custom error messages for each required field
ToDo
- Attach the
onSubmitevent programmatically
Usage
Near the top of the page
<script language="javascript" type="text/javascript" src="validation.js"></script> <script language="javascript" type="text/javascript"> // Form Validation val = new Validate(); // Enter the list of items that need to be checked: // example: val.add('firstname','You must enter your first name.'); val.add('product1','Please enter the product you are requesting a price change for'); val.addGroup('Price Change 1','product1','Please enter the product you are requesting a price change for'); val.addGroup('Price Change 1','5county1','Please enter your 5 County Number'); val.addGroup('Price Change 1','companycost1','Please enter your Company Cost'); val.addGroup('Price Change 1','retailprice1','Please enter your Retail Price'); val.addGroup('Price Change 1','retailinstalledprice1','Please enter your Retail/Installed Price'); val.addGroup('Price Change 1','cwceprice1','Please enter your 5CW/5CE Price'); val.addGroup('Price Change 2','product2','Please enter the product you are requesting a price change for'); val.addGroup('Price Change 2','5county2','Please enter your 5 County Number'); val.addGroup('Price Change 2','companycost2','Please enter your Company Cost'); val.addGroup('Price Change 2','retailprice2','Please enter your Retail Price'); val.addGroup('Price Change 2','retailinstalledprice2','Please enter your Retail/Installed Price'); val.addGroup('Price Change 2','cwceprice2','Please enter your 5CW/5CE Price'); </script>
Form tag
<form id="form1" name="form1" method="post" action="/php/contact/mail.php" onSubmit="return val.check()">validation.js
function Validate() { this.itemArray = new Array(); this.itemGroups = new Object(); this.add = Validate_Add; this.addGroup = Validate_AddGroup; this.check = Validate_Check; } function Validate_Add(formitem,errortext) { this.itemArray.push(Array(formitem,errortext)); } function Validate_AddGroup(formgroup,formitem,errortext) { if (!isObject(this.itemGroups[formgroup])) this.itemGroups[formgroup] = new Object(); this.itemGroups[formgroup][formitem] = errortext; } function Validate_Check() { var error_list = new Array(); var error_string = ''; var ele; for (i=0;i<this.itemArray.length;i++) { if (!Validate_CheckTheItem(this.itemArray[i][0] + '_0_value')) error_list.push(this.itemArray[i][1]); } if (error_list.length > 0) { for (i=0;i<error_list.length;i++) { error_string += ' - ' + error_list[i] + '\n'; } } for (var theGroup in this.itemGroups) { // Determine if the group is "active" or not // If one item in the group has content, all must have content var GroupIsActive = false; var tmpErrors = new Array(); for (var theItem in this.itemGroups[theGroup]) { if (Validate_CheckTheItem(theItem + '_0_value')) { GroupIsActive = true; } else { tmpErrors.push(this.itemGroups[theGroup][theItem]); } } if ((GroupIsActive) && (tmpErrors.length > 0)) { error_string += '\nIn the '+theGroup+' group:\n'; for (i=0;i<tmpErrors.length;i++) { error_string += ' - ' + tmpErrors[i] + '\n'; } } } if (error_string != '') { alert('Please correct the following errors:\n'+error_string); return false; } else return true; } function Validate_CheckTheItem(itemName) { ele = document.getElementById(itemName); if (ele) { if ((ele.value == '') || (ele.value == null)) { return false; //error_list.push(this.itemArray[i][1]); } } else { ele = document.getElementsByName(itemName); if (ele.length > 0) { if (ele.length == 1) { if ((ele[0].value == '') || (ele[0].value == null)) { return false; //error_list.push(this.itemArray[i][1]); } } else { have_selected_item = false; for (j=0;j<ele.length;j++) if (ele[j].checked) have_selected_item = true; if (!have_selected_item) return false; //error_list.push(this.itemArray[i][1]); } } } // If we made it this far... return true; } function isObject(a) { return (a && typeof a == 'object') || isFunction(a); } function isFunction(a) { return typeof a == 'function'; }