PDA

View Full Version : help validating html form with javascript



A NOVICE
05-27-2009, 05:25 PM
Hi

I'm very much a beginner at Javascript and although I'm starting to understand it, I'm struggling to understand why a form I've created doesnt validate when I hit the submit button. All it does is open the thankyou page which isn't meant to open until all fields have been validated successfully. Of course without the submit attempting to validate the form fields I don't know if I've scripted the validation correctly or not.

I've tried looking at error console and it keeps telling me that validateForm is not defined. Unfortunately this means nothing to me so I have no idea how to fix it. Here's the code for my 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(myForm){
var firstname = /^[a-zA-Z]+$/;
if(myForm.value.match(firstname)){
return true;
}
else{
window.alert("Please enter your first name (A-Z characters only");
firstname.focus();
return false;
}
}
var lastname = /^[a-zA-Z]+$/
if(myForm.value.match(lastname)){
return true;
}
else {
window.alert("Please enter your Surname (A-Z characters only");
firstname.focus();
return false;
}
}
var email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(myForm.value.match(email)){
return true;
}
else {
window.alert("Please enter a valid email address" (example joe.bloggs@domain.co.uk");
email.focus();
return false;
}
}
var phone = (0123456789);
if(myForm.value.match(phone)){
return true;
}
else {
window.alert("Please enter your telephone number (including area code)");
phone.focus();
return false;
}
}
var nitlc = ([a-zA-Z]{1,2} + 0123456789);
if(myForm.value.match(nitlc)){
return true;
}
else {
window.alert("Please enter your NITLC student number (example AB1234567)");
nitlc.focus();
return false;
}
}
var address = ([/^[0-9a-zA-Z]+$);
if(myForm.value.match(address)){
return true;
}
else {
window.alert("Please enter your address, we'll need it to send your free gift if you win!!");
address.focus();
return false;
}
}
var hours = (>=0 + <25);
if(myForm.value.match(hours)){
return true;
}
else {
window.alert("Please enter average number of hours spend on-line per day (0-24)");
hours.focus();
return false;
}
}
var county = ();
if (county.options[county.selectedIndex].value == "")
{
window.alert("You must select a county for your address");
county.focus();
return false;
}
var radio_button = false;

// Loop from zero to the one minus the number of radio button selections
for (counter = 0; counter < radio_form.radio_button.length; counter++)
{
// If a radio button has been selected it will return true
// (If not it will return false)
if (radio_form.radio_button[counter].checked)
radio_choice = true;
}

if (!radio_button)
{
// If there were no selections made display an alert box
alert("Please select at least one of the interests.")
radio_button.focus();
return (false);
}
return (true);
}
var optin = ();

//-->

</SCRIPT>

</HEAD>

<BODY text="#336633">

<IMG alt="Crystaladium" src="logo.jpg">

<DIV id="menu" align="left">

<ul>

<LI><IMG src="star.gif" alt="">&nbsp;<A
href="index.html">Home</A></li>

<LI><IMG src="star.gif" alt="">&nbsp;<A
href="products.htm">Our
Products</A></li>

<LI><IMG src="star.gif" alt="">&nbsp;<A
href="buying.html">How to
Buy</A></li>

<LI><IMG src="star.gif" alt="">&nbsp;<A
href="zodiac.htm">Birth
Stones</A></li>

<LI><IMG src="star.gif" alt="">&nbsp;<A
href="aboutcrystals.htm">About
Crystals</A>

<LI><IMG src="star.gif" alt="">&nbsp;<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="myForm" method="get" onsubmit="return validateForm()" action="thankyou.html">

<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 align="right">NITLC Student Number</td>
<td><input type="text" name="nitlc"></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">Address:</td>
<td><textarea cols="15" rows="4" name="address"></textarea></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="radio" name="radio_button" value="0" />Gemstones</label>
<label><input type="radio" name="radio_button" value="1" />Jewellery</label>

<label><input type="radio" name="radio_button" value="2" />Meditation</label>
<label><input type="radio" name="radio_button" value="3" />Incense</label>
<label><input type="radio" name="radio_button" value="4" />Birth Stones</label>
<label><input type="radio" name="radio_button" value="5" />Tumblestones</label>
<label><input type="radio" name="radio_button" value="6" />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" onclick="return validateForm()">
</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>

Please can someone tell me how to define the function validateForm so that I can check that my validation script will work.
Many thanks!!:confused:

thenajsays
05-27-2009, 09:48 PM
you should change the submit button to a regular old button. then in your validation script, add an if statement that submit if the form validates.
use "formname.submit()" to submit the form without a submit button... you can even use a link with an onclick even INSTEAD of a button!

forum_amnesiac
05-28-2009, 06:54 AM
Did you not see the code I put on your other post about this, it was a complete code that validated that there was input in each of your fields.

To validate the contents of certain fields, eg is it a valid email format, you can add an "onblur" or "onchange" function.

This way you validate certain fields at the time of input and that other fields have content at the time of submitting the form.