PDA

View Full Version : Javascript form validation help needed



A NOVICE
05-25-2009, 06:36 PM
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:confused:. 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="">&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="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

clueful
05-25-2009, 06:47 PM
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:confused:. 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.

You must be getting an error message.

document.competion isn't defined.

Read what you wrote, not what you think you wrote.

A NOVICE
05-25-2009, 06:54 PM
Many thanks, that's been driving me mad, I used a script creator so didnt expect the problem to be a spelling one.
Thanks again.

forum_amnesiac
05-26-2009, 08:23 AM
You had some other errors in your code as well, check it out with a validator, there is a good one at w3C - http://validator.w3.org/.

I have altered a validation script from this site to validate that there is an input into all of your fields, you will need further validation, ie is it a valid email address, post code format, etc.

Here is the code:

<!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">
/***********************************************
* Required field(s) validation v1.10- By NavSurf
* Visit Nav Surf at http://navsurf.com
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var alertMsg;

function formCheck(formobj){

alertMsg = "Please complete the following fields:\n";
// Enter name of mandatory fields
var fieldRequired = Array("firstName", "lastName", "email", "phone", "dob", "nitlc", "address", "hours", "county", "postCode", "optin");
// Enter field description to appear in the dialog box
var fieldDescription = Array("First Name", "Last Name", "Email", "Phone", "Date of Birth", "Student Number", "Address", "Average Hours", "County", "Post Code", "Want Emails");
// dialog message

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == "" || obj.options[obj.selectedIndex].text == "Please Select County"){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
default:
case "password":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "checkbox":
if (obj.value == "8" && obj.checked==false){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
}
}
}
checkCheckBoxes();

if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
// -->

function checkCheckBoxes(Msg) {
if (document.competition.chkbox1.checked == false &&
document.competition.chkbox2.checked == false &&
document.competition.chkbox3.checked == false &&
document.competition.chkbox4.checked == false &&
document.competition.chkbox5.checked == false &&
document.competition.chkbox6.checked == false &&
document.competition.chkbox7.checked == false)
{
alertMsg +=" - You didn't choose any of the checkboxes! \n";
}
}//-->

</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="competition" onSubmit="return formCheck(this);">
<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>
</select>
</td>
</tr>

<tr>
<td align="right">Post Code</td>
<td><input type="text" name="postCode" size="7" maxlength="7"></td>
</tr>


</TABLE>
<BR><fieldset> 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>
<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>

Please remember to put code tags around your code next time you post any.

A NOVICE
06-05-2009, 12:21 PM
Hi
I created a HMTL form for site users to complete and have spent nearly 2 months since trying to validate it. No matter what I do I don't seem to be able to get the validation to do anything. Please can you take a look at the code for the page below and tell me why no validation occurs when I click the submit button, after 2 long months of trying different ways of writing the script this is driving me crazy. I'm a complete novice so if I've made a silly mistake please forgive me and point me in the right direction, it's taken me longer to work on this page than it did to build the entire website!! Many thanks.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.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">
</head>
<body>
<script type="text/javascript">
<!--
formValidator(){
var firstname = /^[a-zA-Z]+$/;
if (!/^[a-zA-Z]+$/.test(myForm.value)) {
window.alert("Please enter your first name (A-Z characters only");
firstname.focus();
return false;
}

var lastname = /^[a-zA-Z]+$/
if (!/^[a-zA-Z]+$/.test(myForm.value)) {
window.alert("Please enter your Surname (A-Z characters only");
lastname.focus();
return false;
}


var email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.value)){
window.alert("You have entered an invalid email address, please try again (example:joe.bloggs@domain.co.uk)");
email.focus();
return false;
}

var phone = /^[0] \d{10};
if(/^[0]\d{10}.test(myForm.value)){
window.alert("Please enter your 11 digit phone number including dialling code (example: 01234 789456)";
phone.focus();
return false;
}

var nitlc = [a-zA-Z]{1,2}\d;
if([a-zA-Z]{1,2}\d.test(myForm.value)){
window.alert("Please enter a valid NITLC Student Number (exampleT123456789)");
nitlc.focus();
return false;
}

var hours = (>=0 + <25);
if(>=0 + <25.test(myForm.value)){
window.alert("Please enter the avearage number of hours you spend on-line per day (help: number of hours between 0 and 24)");
hours.focus();
return false;
}

var address = [/^[0-9a-zA-Z]+$;
if([/^[0-9a-zA-Z]+$.test(myForm.value)){
window.alert("Please enter your address, remember without your correct address we can't send you your free gift");
address.focus();
return false;
}

var gender = ();
if (gender.options[gender.selectedIndex].value == "")
{
window.alert("Please select your gender, it will help us choose an appropriaet gift for you");
gender.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;
for (var counter=0; counter < myForm.length; counter++) {
if ((myForm.elements[counter].name == "radio_button") && (myForm.elements[counter].checked == true)) {
checkFound = true;
}
}
if (checkFound != true) {
alert ("Please select at least one interest.");
radio_button.focus();
return (false);
}
// Loop from zero to the one minus the number of radio button selections
// If no radio button has been selected it will return true
// If not it will return false and alter the user the select at least one radio button option

return true;

//-->

</script><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>
<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(this)"
action="thankyou.html">
<table summary="Table containing a competition entry form">

<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>
<td align="right">Gender</td>
<td>
<select name="Gender">
<option value="" selected="selected">[select your gender]</option>
<option value="M">Male</option>
<option value="F">Female</option>

</select>
</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>
</select></td>
</tr>
</table>
<br>
<fieldset class="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>

<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 formValidator(this)"></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>

forum_amnesiac
06-05-2009, 01:09 PM
Have you not tried the validation script I did for you, I put validation in on the fields that you first listed, tested it worked and then posted the working script here for you.

The changes I made ensured that there was input on all fields and it works with onsubmit.

To validate that the input of individual fields is correct, it is better to validate at each field, eg onchange, onkeypress, etc.

This way, rather than have one big validation function you have one function to check that the mandatory fields have been completed, that's the one I did for you, and others for each specific field.

This is a better approach, why wait until the form has been completed to say "field x is incorrect, field y is incorrect". With separate field validation you can tell them the error, as soon as it has occurred, and set the focus straight back to the field for re-input.

A NOVICE
06-05-2009, 01:24 PM
Hi

Yes I did get the original page to work thanks to your assistance, I really appreciate that and I've saved it for my future reference. However unfortunately I now need to validate what's been entered into each field which is why I've had to start the whole thing again. Since I'm so new to javascript I don't have a great understanding of it so I'm not sure how to validate what's entered in each form field as the user move away from that field.

Are you able to tell me how to get the script I posted today to work? Although I agree that it would be better to validate each field as the user completes them, I've spent 2 whole months just getting this far so I'm trying to avoid having to start from scratch again.

Really appreciate your help.

forum_amnesiac
06-06-2009, 10:45 AM
I had a look at your code and tried to run it, there were lots of errors,

It was quicker for me to write a function that did what you wanted than to debug yours.

I suggest in your browser you switch on javascript debugging and try your code.

Here is my code:



<SCRIPT TYPE="text/javascript">
function formValidator(){

// this section for firstname
var fnamefilter = /^[a-zA-Z]+$/;
var fnameval=fnamefilter.test(document.competition.firstName.value)
if (fnameval==false){
alert("Please enter your first name (A-Z characters only")
competition.firstName.select();
competition.firstName.focus();
return false;
}

// this section for lastname
var lnamefilter = /^[a-zA-Z]+$/;
var lnameval=lnamefilter.test(document.competition.lastName.value)
if (lnameval==false){
alert("Please enter your last name (A-Z characters only")
competition.lastName.select();
competition.lastName.focus();
return false;
}

// this section for email
var emailfilter=/^\w+[\+\.\w-]*@([\w-]+\.)*\w+[\w-]*\.([a-z]{2,4}|\d+)$/i
var emailval=emailfilter.test(document.competition.email.value)
if (emailval==false){
alert("Please enter an invalid email address, please try again (example:joe.bloggs@domain.co.uk)")
competition.email.select();
competition.email.focus();
return false;
}

// this section for phone
var phonefilter = /[0][1-9]{4}[ ][0-9]{5,6}/;
var phoneval=phonefilter.test(document.competition.phone.value)
if (phoneval==false){
alert("Please enter your 11 digit phone number including dialling code (example: 01234 789456)")
competition.phone.select();
competition.phone.focus();
return false;
}

// this section for student number
var nitlcfilter = /[a-zA-Z]{1,2}\d{1,9}/; // You need to change the {1,9} for minimum and maximum amount of numbers
var nitlcval=nitlcfilter.test(document.competition.nitlc.value)
if (nitlcval==false){
alert("Please enter a valid NITLC Student Number (example: T123456789)")
competition.nitlc.select();
competition.nitlc.focus();
return false;
}

// this section for hours
var hrs=document.competition.hours.value;
if (hrs==""){
hrs=-1;
}
if(hrs<0 || hrs>24){
alert("Please enter the average number of hours you spend on-line per day (help: number of hours between 0 and 24)");
competition.hours.select();
competition.hours.focus();
return false;
}

// this section for address
var myaddressfilter = /[ 0-9a-zA-Z]+$/m;
var addressval=myaddressfilter.test(document.competition.address.value)
if (addressval==false){
alert("Please enter your address, remember without your correct address we can't send you your free gift");
competition.address.select();
competition.address.focus();
return false;
}
// this section for gender
var genderval=document.competition.Gender.value;
if (genderval=="selected"){ // set to the first option in the list
alert("Please select your gender, it will help us choose an appropriate gift for you");
competition.Gender.focus();
return false;
}

// this section for county
var countyval=document.competition.county.value;
if (countyval=="none"){ // set to the first option in the list
alert("You must select a county for your address");
competition.county.focus();
return false;
}

// this section for post code
var pcodefilter = /\b(GIR[ ]{0,1}0AA)|[a-z,A-Z]{1,2}[0-9]{1,2}[ ]{0,1}[0-9][abd-hjlnp-uw-z,ABD-HJLNP-UW-Z]{2}\b/;
var pcodeval=pcodefilter.test(document.competition.postCode.value)
if (pcodeval==false){
alert("Please enter your post code, remember without your correct post code we can't send you your free gift");
competition.postCode.select();
competition.postCode.focus();
return false;
}

// this is the checkboxes section
if (document.competition.chkbox1.checked == false &&
document.competition.chkbox2.checked == false &&
document.competition.chkbox3.checked == false &&
document.competition.chkbox4.checked == false &&
document.competition.chkbox5.checked == false &&
document.competition.chkbox6.checked == false &&
document.competition.chkbox7.checked == false)
{
alert("You didn't choose any of the checkboxes");
competition.chkbox1.focus();
return false;
}
}

</SCRIPT>

</HEAD>

<BODY onload="document.competition.firstName.focus()">

<div class="head"></div>
<h2>Tell us about yourself you could win a beautiful free gift...</h2>

<form name="competition" onSubmit="return formValidator();">
<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"><input type="hidden"></td>
</tr>

<tr>
<td align="right">Email Address</td>
<td><input type="text" name="email" size="20" maxlength="55"><input type="hidden"></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>
<td align="right">Gender</td>
<td>
<select name="Gender">
<option value="selected" selected>Select Your Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>

</select>
</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>
</select>
</td>
</tr>

<tr>
<td align="right">Post Code</td>
<td><input type="text" name="postCode" size="8" maxlength="8"></td>
</tr>


</TABLE>
<BR><fieldset> 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>
<BR><fieldset>
<label><input type="checkbox" class="chk" name="optin" value="8" />If you'd like to receive occasional emails telling you about our special offers,
please click this box.</label></fieldset>
<input type="submit" name="submitButtonName" value="Submit Form">
</form>

</BODY>
</html>

If you have any questions then just ask, but I do suggest you try to debug your code and check the differences between yours and mine. I had to take out some logos, menu and footer to get the size of the post down.