Women in Technology

Hear us Roar



Article:
  Form Validation
Subject:   java script form validation
Date:   2009-03-18 12:09:51
From:   mimito
How can icplace thecursor in appropriae form elemen,


for instance i type wrong email address and i receive alert"please enter the valid email address and i click OK, i want the cursor back to the email address field, but that is not happening , please help.


this my code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



<title>test</title>


<script language="JavaScript">
<!--


function checkForm(form)
{
//create for loop
//var len = form.elements.length;
var myForm = document.getElementById("myForm");
var len = myForm.elements.length;
var i=0;

for (i=0; i < len-2; i++)
{
var fieldname = myForm.elements[i].value;

myForm.elements[i].focus();

if(fieldname=="")
{
alert("The " + fieldname +" field is required.");
myForm.elements[i].focus();
return false;
}

}

return true;

}


function emailTest(emailText)
{
var email = emailText.value;
var emailPattern = /^.+@.+\..{2,}$/;
if (!(emailPattern.test(email))) {
alert("Please enter a valid email address.");
document.myForm.elements[1].focus();
}
}



function phoneTest(phoneText)
{
var phone =phoneText.value;
//this is a Regular Expression to pattern match a phone number
var phonePattern = /^\({0,1}[0-9]{3}\){0,1}[ \-\.]{0,1}[0-9]{3}[ \-\.]{0,1}[0-9]{4}$/;
if (!(phonePattern.test(phone))) {
alert("Provide a valid phone number. (xxx)xxx-xxxx");
return false;
}
return true;
}



function faxTest(faxText)
{
var fax =faxText.value;
//this is a Regular Expression to pattern match a phone number
var faxPattern = /^\({0,1}[0-9]{3}\){0,1}[ \-\.]{0,1}[0-9]{3}[ \-\.]{0,1}[0-9]{4}$/;
if (!(faxPattern.test(fax))) {
alert("Provide a valid fax number. (xxx)xxx-xxxx");
return false;
}
return true;
}


// -->
</script>


</head><body>
<h3>Assignment 2 Form</h3>
<hr>


<form name id="myForm" method="post"
action="http://www.tipjar.com/cgi-bin/test">
Name:

<input size="30" name="name" type="text">

Email address:

<input size="30" name="email address" onblur="emailTest(this);" type="text">

Phone number:

<input size="30" name="phone number" onblur="phoneTest(this);" type="text">

Fax number:

<input size="30" name="fax number" onblur="faxTest(this);" type="text">


<input value="Submit Data" onclick="return checkForm(this.form);" type="submit">
<input value="Reset Form" type="reset">



</form></body></html>