I need to do a javascript form validation.
I would like to validate each field as the user clicks or tabs to the next field.
(onBlur ?)
I have to validate the email for the correct form. As with Address and Phone.
I’m not sure where to put the validation code in the HTML form.
Validation needs to be done on the browser before sending to the server.
I would appreciate any advice or tutorials.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Request Form</title>
<meta name="Description" content="This webpage is for Customer Demographics" />
<meta name="Keywords" content="Rhonda , email, " />
<meta name="author" content="Rhonda " />
<meta name="copyright" content="Copyright 2010 Rhonda , All Rights
Reserved" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="15 days" />
<meta name="rating" content="safe for kids" />
<script type="text/javascript" >
</script>
</head>
<body>
<body style="background-color:lightsteelblue">
<h1>
Welcome Kudler Fine Foods customer.
<br />
<br />
<br />
Please enter the following details in order
to be added to our preferred customer mailing list:
<br />
<br />
<br />
</h1>
<form action="">
<fieldset>
<legend>Personal information:</legend>
<p>
First Name:
<br />
<input type="text" name="txtFName" VALUE="" SIZE="30" MAXLENGTH="50" />
</p>
<p>
Middle Initial:
<br />
<input type="text" name="txtMiddle" VALUE="" SIZE="5" MAXLENGTH="3" />
</p>
<p>
Last Name:
<br />
<input type="text" name="txtLName" VALUE="" SIZE="30" MAXLENGTH="50" />
<br />
<br />
</fieldset>
</form>
</p>
<form action="">
<fieldset>
<legend>Address:</legend>
<p>
Mailing Address:
<br />
<br />
Street <INPUT TYPE="TEXT" NAME="Street" VALUE="" SIZE="25"
MAXLENGTH="50" />
<br />
City <INPUT TYPE="TEXT" NAME="City" VALUE="" SIZE="35" MAXLENGTH="50"
/><br />
State <INPUT TYPE="TEXT" NAME="State" VALUE="" SIZE="2" MAXLENGTH="2"
/> <br />
Zip Code <INPUT TYPE="TEXT" NAME="State" VALUE="" SIZE="5"
MAXLENGTH="5" /> <br />
<br />
<br />
</fieldset>
</form>
</p>
<p>
Email Address:
<br />
<INPUT TYPE="TEXT" NAME="Email" VALUE="" SIZE="25" MAXLENGTH="50" />
</p>
<p>
Telephone Number:
<br />
<input type="TEXT" NAME="AreaCode" VALUE="" SIZE="3" MAXLENGTH="3"/>
<INPUT TYPE="TEXT" NAME="Telephone" VALUE="" SIZE="7" MAXLENGTH="7" />
<br />
</p>
<!--NOTES
This part was not mandantory. I was just trying some of the extra ways of adding input that the book discussed-->
<p>
Gender:
<br />
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</p>
<p>
How did you hear about us?
<br />
<input type="checkbox" name="Friend" value="Friend" /> From a friend
<br />
<input type="checkbox" name="Advertisement" value="Advertisement" />
Store Advertisement
<br />
<input type="checkbox" name="Online" value="Online" /> From Online
<br />
<input type="checkbox" name="Other" value="Other" /> Other
<br />
</p>
<p>
How do you wish to be contacted?
<br />
<form action="">
<select name="contact">
<option value="telephone">Telephone</option>
<option value="E-mail">E-mail</option>
<option value="Snail-mail">Snail-mail</option>
</select>
</form>
</p>
<p>
<form>
<form name="input"
<form action="acknowledgement.html">
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Submit and Verify">
</form>
</p>
<form>
<p>
<input type="reset" Name="resetbutton" Value="Reset Form Now">
</p>
</form>
<p><a href="#top">Back to Top</a></p>
</body>
</html>
Code for Acknowledgement Page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Acknowledgement Page</title>
<meta name="Description" content="This webpage is for Customer Demographics" />
<meta name="Keywords" content=" email, " />
<meta name="author" content="Rhonda " />
<meta name="copyright" content="Copyright 2010 Rhonda, All Rights Reserved" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="15 days" />
<meta name="rating" content="safe for kids" />
</head>
<body>
<body style="background-color:lightsteelblue">
<script type="text/javascript"></script>
<h1>Request Confirmation</h1>
<p>Your request has been received.</p>
<p>Thank you. You will be added to our customer mailing list</p>"
<p>Please use your browsers back button or, </p>"
<address>
<a href="index.htm">Click here</a>
</address>
</body>
</html>
The simplest solution is to include your events within the element markup. This approach has fallen out of favor among most web developers, but if you’re prevented from using something like jQuery or prototype, and the assignment is homework, the following should be fine.
Keep in mind that using strictly on onblur approach prevents your from checking whether required fields have been left blank, so you generally also want to validate the entire form when the submit button is clicked.