Personal Details Validation

Shaun Bailey Sep 15, 2006

Use this script with your forms to make sure all the fields are filled in. Any fields that are left empty, or are not properly filled in, will be highlighted in red. Fields that are filled in correctly will be properly formatted. Easy to customize.

The JavaScript Source: Forms : Personal Details Validation

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

.error {
 	color: #FF0000;
}
span {
 	font-weight: bold;
}

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Shaun Bailey :: http://www.sbwebdevelopment.co.uk */

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;
}

<div id="details" align="center">
<div id="errors"></div>
<form action="" 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>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Personal Details Validation

Leave a Response

Attention JavaScript Coders

Go Deeper

Title:
Initials:
Surname:
Street:
Town:
City:
County:
Postcode:
Phone number:
Fax number: