Contact Us Form Validation Help Please 1

[mrsjackaroo]

Hi Everyone!

I am in need of a Contact Us Validation Form - I've been using getElementbyID & if else statements but I'm coming unstuck a bit.

These are the requirements for the form:

First Name
Surname
Address
Postcode (min 4 max 4 digits)
Nature of Enquiry (drop down menu - with default 'general')
Telephone number (max 10 digits)
Date you would like us to contact you (in the form dd/mm/yyyy)

Heres what I've got so far - its not pretty though sorry - please be gentle with me - I'm learning!


<script type='text/javascript'>

function formValidator(){
// Make quick references to our fields

var firstname = document.getElementById('firstname');
var surname = document.getElementById('surname');
var addr = document.getElementById('addr');
var post = document.getElementById('post');
var query = document.getElementById('query');
var telephone = document.getElementById('telephone');
var email = document.getElementById('email');
var date = document.getElementById('date');
// Check each input in the order that it appears in the form!

if(isAlphabet(firstname, "Please enter only letters for your name")){
if(isAlphabet(surname, "Please enter only letters for your surname")){
if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
if(isNumeric(post, "Please enter a valid post code")){
if(madeSelection(query, "Please State the reason for your enquiry")){
if(isAlphanumeric(telephone, "Please enter a valid telephone number")){
if(emailValidator(email, "Please enter a valid email address")){
if(isAlphanumeric(date, "Please enter todays date in the format 30th December 2007")){
return true;
}
}
}
}
}
}
}
}


return false;

}

function isEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return true;
}
return false;
}

function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9 ]+$/;
if((elem.value.match(numericExpression)) && (elem.value.length == 4) ){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z ]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function lengthRestriction(elem, min, max){
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
alert("Username Please enter between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}

function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}

function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>


<form onsubmit='return formValidator()' >

First Name: <input type='text' id='firstname' /><br />
Surname: <input type='text' id='surname' /><br />
Address: <input type='text' id='addr' /><br />
Post Code: <input type='text' id='post' /><br />
Nature of Enquiry: <select id='query'>
<option value="Please Choose">Please Choose</option>
<option>General Enquiry</option>
<option>Tenant Seeking a Property</option>
<option>Landlord Seeking a Manager</option>
<option>Existing Enquiry</option>
</select><br />
Telephone Number/s: <input type='text' id='telephone' /><br />
Email: <input type='text' id='email' /><br />
Date of Callback: <input type='text' id='date' /><br />
<input type='submit' value='Check Form' />
</form>

Thanks in advance

Rachelle

 

[tsuji]

[1] The multiple if() can be consolidated to make the purpose clear.
[tt]
if(isAlphabet(firstname, "Please enter only letters for your name") &&
isAlphabet(surname, "Please enter only letters for your surname") &&
isAlphanumeric(addr, "Numbers and Letters Only for Address") &&
isNumeric(post, "Please enter a valid post code") &&
madeSelection(query, "Please State the reason for your enquiry") &&
isAlphanumeric(telephone, "Please enter a valid telephone number") &&
emailValidator(email, "Please enter a valid email address") &&
isAlphanumeric(date, "Please enter todays date in the format 30th December 2007")) {
return true;
} else {
return false;
}
[/tt]
[2] You use regexp's match method. You can simply use its test method to make the purpose clearer. As examples.

[2.1]
>var numericExpression = /^[0-9 ]+$/;
>if((elem.value.match(numericExpression)) && (elem.value.length == 4) ){
[tt]var numericExpression = /^[red][0-9]{1,4}[/red]$/;
if(numericExpression.test(elem.value){[/tt]
For this instance, I see no reason you enforce the length to 4 and also to allow blank space. (If you really need to, just change the {1,4} to {4}.)

[2.2] Similar constructions for other instances.

[3] I have not scrutinize all the functions. If you get stuck, just go step by step in the if (....) statement by adding fields one by one to discover where comes the problem.

 

[tsuji]

Amendment
[2.1'-typo] The corresponding line should be read like this.
[tt]if(numericExpression.test(elem.value)[highlight])[/highlight]{[/tt]
[2'-Should be rephrased] You use [blue]String[/blue]'s match method. You can simply use [blue]regexp's[/blue] test method to make the purpose clearer. As examples.

 

[mrsjackaroo]

Thats great

Thanks ever so much for your help!

Rach