kindredm
07-18-2002, 06:51 PM
Hi there
I am creating some exercises for a school, and have come across a problem.
I have managed to make a form that checks the data of each field as each question is answered, but rather than have this happen via the onChange function, I want to make it so that all the text fields are checked at the end of the exercise instead of one at a time.
The link for this is:
http://www.formulaonemaths.co.uk/Pupil's%20Page/Hodder%20Website/speedtest1.html
The source code/script on the link above is essentially the one I want to change/get working the most.
Can anyone help me with this, as I have spent the last 3 days trying to find a solution, and the only one I can find is in the second example below - this, however, marks the whole exercise whenever one hits the enter key (something I want to prevent the kids from doing).
Can anyone help me with this???
Cheers,
-K.
Here is the second bit of code - this is my second choice, and it would be good if I could get it working by disabling the return button, so that the form only validates when the submit button is clicked, and not at any other time (i.e. when the focus on a text field changes etc):
===
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Preload images
var empty = new Image(); empty.src = "fieldempty.gif";
var email = new Image(); email.src = "emailerror.gif";
var zipcd = new Image(); zipcd.src = "ziperror.gif";
var phone = new Image(); phone.src = "phoneerror.gif";
var haveerrors = 0;
function showImage(imagename, imageurl, errors) {
document[imagename].src = imageurl;
if (!haveerrors && errors) haveerrors = errors;
}
function validateForm(f) {
haveerrors = 0;
(f.fname.value.length < 1) // validate first name length
? showImage("firstnameerror", "fieldempty.gif", true) // no semi-colon after this line!
: showImage("firstnameerror", "blankimage.gif", false); // true = errors, false = no errors
(f.lname.value.length < 1) // validate last name length
? showImage("lastnameerror", "fieldempty.gif", true)
: showImage("lastnameerror", "blankimage.gif", false);
(f.zip.value.length != 5) // validate zip code length
? showImage("ziperror", "ziperror.gif", true)
: showImage("ziperror", "blankimage.gif", false);
phonenumlength = f.area.value.length +
f.exchange.value.length + f.number.value.length;
(phonenumlength != 10) // validate phone number length
? showImage("phoneerror", "phoneerror.gif", true)
: showImage("phoneerror", "blankimage.gif", false);
(f.email.value.search("@") == -1 || f.email.value.search("[.*]") == -1) // validate email
? showImage("emailerror", "emailerror.gif", true)
: showImage("emailerror", "blankimage.gif", false);
return (!haveerrors);
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<center>
<form action="script.cgi" name="myform" onSubmit="return validateForm(this)">
<table border=0 cellspacing=0 celpadding=0>
<tr>
<td colspan=2>Enter your information:<br>
<sup>(<font color="#ff0000">*</font> denotes required field).</sup></td>
</tr>
<tr>
<td><p align=right>
First Name:</td>
<td>
<input type=text name="fname" size=25 maxlength=50><font color="#ff0000">*</font><br>
<img name=firstnameerror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td><p align=right>
Last Name:</td>
<td>
<input type=text name="lname" size=25 maxlength=50><font color="#ff0000">*</font><br>
<img name=lastnameerror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td><p align=right>
Zip Code:</td>
<td>
<input type=text name=zip size=25 maxlength=50><font color="#ff0000">*</font><br>
<img name=ziperror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td><p align=right>
Email:</td>
<td>
<input type=text name=email size=25 maxlength=50><font color="#ff0000">*</font><br>
<img name=emailerror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td><p align=right>
Phone:</td>
<td>
<input type=text name=area size=4 maxlength=5>-
<input type=text name=exchange size=4 maxlength=3>-
<input type=text name=number size=5 maxlength=4><font color="#ff0000">*</font><br>
<img name=phoneerror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td colspan=2><p align=center>
<hr>
</td>
</tr>
<tr>
<td><p align=center>
</td>
<td><p align=right>
<input type=submit value="Submit Form"></td>
</tr>
</table>
</form>
</center>
<p><center>
<p>
I am creating some exercises for a school, and have come across a problem.
I have managed to make a form that checks the data of each field as each question is answered, but rather than have this happen via the onChange function, I want to make it so that all the text fields are checked at the end of the exercise instead of one at a time.
The link for this is:
http://www.formulaonemaths.co.uk/Pupil's%20Page/Hodder%20Website/speedtest1.html
The source code/script on the link above is essentially the one I want to change/get working the most.
Can anyone help me with this, as I have spent the last 3 days trying to find a solution, and the only one I can find is in the second example below - this, however, marks the whole exercise whenever one hits the enter key (something I want to prevent the kids from doing).
Can anyone help me with this???
Cheers,
-K.
Here is the second bit of code - this is my second choice, and it would be good if I could get it working by disabling the return button, so that the form only validates when the submit button is clicked, and not at any other time (i.e. when the focus on a text field changes etc):
===
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Preload images
var empty = new Image(); empty.src = "fieldempty.gif";
var email = new Image(); email.src = "emailerror.gif";
var zipcd = new Image(); zipcd.src = "ziperror.gif";
var phone = new Image(); phone.src = "phoneerror.gif";
var haveerrors = 0;
function showImage(imagename, imageurl, errors) {
document[imagename].src = imageurl;
if (!haveerrors && errors) haveerrors = errors;
}
function validateForm(f) {
haveerrors = 0;
(f.fname.value.length < 1) // validate first name length
? showImage("firstnameerror", "fieldempty.gif", true) // no semi-colon after this line!
: showImage("firstnameerror", "blankimage.gif", false); // true = errors, false = no errors
(f.lname.value.length < 1) // validate last name length
? showImage("lastnameerror", "fieldempty.gif", true)
: showImage("lastnameerror", "blankimage.gif", false);
(f.zip.value.length != 5) // validate zip code length
? showImage("ziperror", "ziperror.gif", true)
: showImage("ziperror", "blankimage.gif", false);
phonenumlength = f.area.value.length +
f.exchange.value.length + f.number.value.length;
(phonenumlength != 10) // validate phone number length
? showImage("phoneerror", "phoneerror.gif", true)
: showImage("phoneerror", "blankimage.gif", false);
(f.email.value.search("@") == -1 || f.email.value.search("[.*]") == -1) // validate email
? showImage("emailerror", "emailerror.gif", true)
: showImage("emailerror", "blankimage.gif", false);
return (!haveerrors);
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<center>
<form action="script.cgi" name="myform" onSubmit="return validateForm(this)">
<table border=0 cellspacing=0 celpadding=0>
<tr>
<td colspan=2>Enter your information:<br>
<sup>(<font color="#ff0000">*</font> denotes required field).</sup></td>
</tr>
<tr>
<td><p align=right>
First Name:</td>
<td>
<input type=text name="fname" size=25 maxlength=50><font color="#ff0000">*</font><br>
<img name=firstnameerror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td><p align=right>
Last Name:</td>
<td>
<input type=text name="lname" size=25 maxlength=50><font color="#ff0000">*</font><br>
<img name=lastnameerror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td><p align=right>
Zip Code:</td>
<td>
<input type=text name=zip size=25 maxlength=50><font color="#ff0000">*</font><br>
<img name=ziperror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td><p align=right>
Email:</td>
<td>
<input type=text name=email size=25 maxlength=50><font color="#ff0000">*</font><br>
<img name=emailerror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td><p align=right>
Phone:</td>
<td>
<input type=text name=area size=4 maxlength=5>-
<input type=text name=exchange size=4 maxlength=3>-
<input type=text name=number size=5 maxlength=4><font color="#ff0000">*</font><br>
<img name=phoneerror src="blankimage.gif" width=350 height=10 border=0></td>
</tr>
<tr>
<td colspan=2><p align=center>
<hr>
</td>
</tr>
<tr>
<td><p align=center>
</td>
<td><p align=right>
<input type=submit value="Submit Form"></td>
</tr>
</table>
</form>
</center>
<p><center>
<p>