Form validation and formatting

Form validation and formatting

by Shaun Bailey

November 21, 2006

	Visited: 7297
	2.6/5.0 (89 votes total)
	Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding

Description:

Validates and formats form field submissions. If incorrect or no data is entered, the relevant fields will be highlighted whilst the others retain their value.

JavaScript Functions:
<script type="text/javascript" language="javascript"> <!-- function validate() { if(!document.getElementById) return; // get form variables var title = document.getElementById("title").value; var initials = document.getElementById("initials").value; var surname = document.getElementById("surname").value; var street = document.getElementById("street").value; var town = document.getElementById("town").value; var city = document.getElementById("city").value; var county = document.getElementById("county").value; var postcode = document.getElementById("postcode").value; var phone = document.getElementById("phone").value; var fax = document.getElementById("fax").value; var incorrect = new Array(); var no = 0; var regExp = /[A-Za-z]{2,6}/; if(regExp.test(title)) { title = title.charAt(0).toUpperCase() + title.substring(1,title.length).toLowerCase(); } else { incorrect[no] = "1"; no++; title = ""; } regExp = /[A-Za-z]{1,}/; if(regExp.test(initials)) { initials = initials.toUpperCase(); } else { incorrect[no] = "2"; no++; initials = ""; } regExp = /[A-Za-z]{3,}-?[A-Za-z]?/; if(regExp.test(surname)) { surname = surname.charAt(0).toUpperCase() + surname.substring(1,surname.length).toLowerCase(); } else { incorrect[no] = "3"; no++; surname = ""; } if(street.length < 5) { incorrect[no] = "4"; no++; street = ""; } if(town.length < 3) { incorrect[no] = "5"; no++; town = ""; } if(city.length < 3) { incorrect[no] = "6"; no++; city = ""; } if(county.length < 5) { incorrect[no] = "7"; no++; county = ""; } postcode = postcode.toUpperCase(); regExp = /[A-Z]{2}\d{1}\d?\s?\d{1}[A-Z]{2}/; if(regExp.test(postcode)) { if(postcode.indexOf(" ") < 0) { postcode = postcode.substring(0,postcode.length-3) + " " + postcode.substring(postcode.length-3,postcode.length); } } else { incorrect[no] = "8"; no++; postcode = ""; } regExp = /\(?\d{5}\)?\s?\d{6}/; if(regExp.test(phone)) { if(phone.indexOf("(") < 0) { phone = "(" + phone.substring(0,5) + ") " + phone.substring(phone.length-6,phone.length); } else if(phone.indexOf(" ") < 0) { phone = phone.substring(0,7) + " " + phone.substring(phone.length-6,phone.length); } } else { incorrect[no] = "9"; no++; phone = ""; } if(regExp.test(fax)) { if(fax.indexOf("(") < 0) { fax = "(" + fax.substring(0,5) + ") " + fax.substring(fax.length-6,fax.length); } else if(fax.indexOf(" ") < 0) { fax = fax.substring(0,7) + " " + fax.substring(fax.length-6,fax.length); } } else { incorrect[no] = "10"; no++; fax = ""; } for(i=1;i<11;i++) { document.getElementById(i).style.color="#000000"; } for(j=0;j<no;j++) { document.getElementById(incorrect[j]).style.color="#FF0000"; } if(no > 0) { document.getElementById("errors").innerHTML = "<span class=\"error\">There was an error with your form submission. Please fill in the neccessary fields.</span><br />"; } document.getElementById("title").value = title; document.getElementById("initials").value = initials; document.getElementById("surname").value = surname; document.getElementById("street").value = street; document.getElementById("town").value = town; document.getElementById("city").value = city; document.getElementById("county").value = county; document.getElementById("postcode").value = postcode; document.getElementById("phone").value = phone; document.getElementById("fax").value = fax; } // --> </script>

HTML Script:
<style type="text/css"> .error { color:#FF0000; } span { font-weight:bold; } </style> <div id="details" align="center"> <div id="errors"></div> <form method="post"> <table border="0" cellpadding="4" cellspacing="0"><tr> <td align="right"><span id="1">Title:</span></td><td><input name="id" id="title" type="text" size="25" maxlength="6" /></td></tr> <tr><td align="right"><span id="2">Initials:</span></td><td><input name="initials" id="initials" type="text" size="25" maxlength="4" /></td></tr> <tr><td align="right"><span id="3">Surname:</span></td><td><input name="surname" id="surname" type="text" size="25" /></td></tr> <tr><td align="right"><span id="4">Street:</span></td><td><input name="street" id="street" type="text" size="25" /></td></tr> <tr><td align="right"><span id="5">Town:</span></td><td><input name="town" id="town" type="text" size="25" /></td></tr> <tr><td align="right"><span id="6">City:</span></td><td><input name="city" id="city" type="text" size="25" /></td></tr> <tr><td align="right"><span id="7">County:</span></td><td><input name="county" id="county" type="text" size="25" /></td></tr> <tr><td align="right"><span id="8">Postcode:</span></td><td><input name="postcode" id="postcode" type="text" size="25" maxlength="8" /></td></tr> <tr><td align="right"><span id="9">Phone number:</span></td><td><input name="phone" id="phone" type="text" size="25" maxlength="14" /></td></tr> <tr><td align="right"><span id="10">Fax number:</span></td><td><input name="fax" id="fax" type="text" size="25" maxlength="14" /></td></tr> </table> <input type="button" value="Submit" onClick="validate()" /> </form> </div>

Browsers Compatibility:

IE, Firefox, Opera