Javascript form validation help needed
Hi
I've created a form for a web page and need to be able to validate the fields. To start off I'm trying to validate that all the fields have been completed. However when I hit the submit button with some fields left blank to test the form it just opened the thankyou page without validating the form. I'd be really grateful if someone could help me out with this. I'm new to javascript so apologies of I've missed something silly in my code. Here's the code for the page:
<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Crystaladium - NITLC students</TITLE>
<link rel="stylesheet" type="text/css" href="home.css">
<link href="stars.css" type="text/css" rel="stylesheet">
<SCRIPT TYPE="text/javascript">
<!--
function validateForm() {
with (document.competion) {
var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
if (firstName.value == "") alertMsg += "\nfirstName";
if (lastName.value == "") alertMsg += "\nlastName";
if (email.value == "") alertMsg += "\nemail";
if (phone.value == "") alertMsg += "\nphone";
if (dob.value == "") alertMsg += "\ndob";
if (nitlc.value == "") alertMsg += "\nnitlc";
if (address.value == "") alertMsg += "\naddress";
if (hours.value == "") alertMsg += "\nhours";
if (county.options[county.selectedIndex].value == "") alertMsg += "\ncounty";
if (postCode.value == "") alertMsg += "\npostCode";
radioOption = -1;
for (counter=0; counter<interests.length; counter++) {
if (interests[counter].checked) radioOption = counter;
}
if (radioOption == -1) alertMsg += "\ninterests";
radioOption = -1;
for (counter=0; counter<optin.length; counter++) {
if (optin[counter].checked) radioOption = counter;
}
if (radioOption == -1) alertMsg += "\noptin";
if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") {
alert(alertMsg);
return false;
} else {
return true;
} } }
//-->
</SCRIPT>
</HEAD>
<BODY text="#336633">
<IMG alt="Crystaladium" src="logo.jpg">
<DIV id="menu" align="left">
<ul>
<LI><IMG src="star.gif" alt=""> <A
href="index.html">Home</A></li>
<LI><IMG src="star.gif" alt=""> <A
href="products.htm">Our
Products</A></li>
<LI><IMG src="star.gif" alt=""> <A
href="buying.html">How to
Buy</A></li>
<LI><IMG src="star.gif" alt=""> <A
href="zodiac.htm">Birth
Stones</A></li>
<LI><IMG src="star.gif" alt=""> <A
href="aboutcrystals.htm">About
Crystals</A>
<LI><IMG src="star.gif" alt=""> <A
href="gifts.html">Gift Ideas</A></li>
</UL></DIV>
<div class="head"></div>
<div id="header">
<img src="images/logo.gif" alt="" title="">
</div>
<div class="head"></div>
<h2>Tell us about yourself you could win a beautiful free gift...</h2>
<form name="competition" onsubmit="return validateForm()">
<table>
<tr>
<td align="right">First Name</td>
<td><input type="text" name="firstName" size="20" maxlength="20"></td>
<td align="right">Last Name</td>
<td><input type="text" name="lastName" size="20" maxlength="20"></td>
</tr>
<tr>
<td align="right">Email Address</td>
<td><input type="text" name="email" size="20" maxlength="55"></td>
<td align="right">Phone</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>Date of Birth (DD/MM/YYYY)</td>
<td><input type="text" name="dob"></td>
<td align="right">NITLC Student Number</td>
<td><input type="text" name="nitlc"></td>
</tr>
<tr>
<td align="right">Address:</td>
<td><textarea cols="15" rows="4" name="address"></textarea></td>
<td align="right">Average hours a day spent on-line</td>
<td><input type="text" name="hours" size="2" maxlength="2"></td>
</tr>
<tr>
<td align="right">County</td>
<td>
<select class="option" name="county">
<option value="none">Please Select County</option>
<option value="Bedfordshire"> Bedfordshire</option>
<option value="Berkshire"> Berkshire</option>
<option value="Buckinghamshire"> Buckinghamshire</option>
<option value="Cambridgeshire"> Cambridgeshire</option>
<option value="Cheshire"> Cheshire</option>
<option value="Cornwall"> Cornwall</option>
<option value="Cumberland"> Cumberland</option>
<option value="Derbyshire"> Derbyshire</option>
<option value="Devon"> Devon</option>
<option value="Dorset"> Dorset</option>
<option value="Durham"> Durham</option>
<option value="Essex"> Essex</option>
<option value="Gloucestershire"> Gloucestershire</option>
<option value="Hampshire"> Hampshire</option>
<option value="Herefordshire"> Herefordshire</option>
<option value="Hertfordshire"> Hertfordshire</option>
<option value="Huntingdonshire"> Huntingdonshire</option>
<option value="Kent"> Kent</option>
<option value="Lancashire"> Lancashire</option>
<option value="Leicestershire"> Leicestershire</option>
<option value="Lincolnshire"> Lincolnshire</option>
<option value="London"> London</option>
<option value="Middlesex"> Middlesex</option>
<option value="Norfolk"> Norfolk</option>
<option value="Northamptonshire"> Northamptonshire</option>
<option value="Northumberland"> Northumberland</option>
<option value="Nottinghamshire"> Nottinghamshire</option>
<option value="Oxfordshire"> Oxfordshire</option>
<option value="Rutland"> Rutland</option>
<option value="Shropshire"> Shropshire</option>
<option value="Somerset"> Somerset</option>
<option value="Staffordshire"> Staffordshire</option>
<option value="Suffolk"> Suffolk</option>
<option value="Surrey"> Surrey</option>
<option value="Sussex"> Sussex</option>
<option value="Warwickshire"> Warwickshire</option>
<option value="Westmoorland"> Westmoorland</option>
<option value="Wiltshire"> Wiltshire</option>
<option value="Worcestershire"> Worcestershire</option>
<option value="Yorkshire"> Yorkshire</option>
</tr>
<tr>
<td align="right">Post Code</td>
<td><input type="text" name="postCode" size="7" maxlength="7"></td>
</tr>
</SELECT>
</TABLE>
<BR><fieldset name="interests"> If you win we'll need to know what areas interest you so we can choose a gift you'll love. <BR>Please select from the following:<BR><BR>
<label><input type="checkbox" class="chk" name="chkbox1" value="1" />Gemstones</label>
<label><input type="checkbox" class="chk" name="chkbox2" value="2" />Jewellery</label>
<label><input type="checkbox" class="chk" name="chkbox3" value="3" />Meditation</label>
<label><input type="checkbox" class="chk" name="chkbox4" value="4" />Incense</label>
<label><input type="checkbox" class="chk" name="chkbox5" value="5" />Birth Stones</label>
<label><input type="checkbox" class="chk" name="chkbox6" value="6" />Tumblestones</label>
<label><input type="checkbox" class="chk" name="chkbox7" value="7" />CDs</label>
</fieldset></td></tr>
<BR><fieldset>
<label><input type="checkbox" class="chk" name="optin" value="8" />If you'd like to recieve occasional emails telling you about our special offers,
please click this box.</label></fieldset>
<input type="submit" name="submitButtonName" value="Submit Form">
</form>
<DIV id=Footer align=center><br>
<a href="aboutus.htm">About Us</a> |
<a href="contact.htm">Contact Us</a> |
<a href="sitemMap.htm">Site Map</a> |
<a href="disclaimer.htm">Disclaimer</a>
</DIV></BODY></html>
If I can get this form to work I can then look at adding further validation around individual form fields.
Many thanks for your help, I really need it!!!
Reply With Quote
CSS Codes
Reply With Quote
Originally Posted by A NOVICE
Bookmarks