I have a pretty straightforward form with 8 inputs at
http://www.redjam.com/testform.html that works fine, but I'd like to
have all the fields validated. I'd be really grateful if someone could
actually do this whole part for me as it would save me lots of time
trying to work out how to do it. I guess I need it to validate when
they hit 'send application'. This is what must be checked:
1. One of the first two options (couple or single) must be checked
2. One of the four (London/Manchester/London and Manchester/Brighton)
must be checked
3. If the answer to 1. was couple, then both male and female names
should contain text. Otherwise if the answer to no. 1 was single, then
just the FEMALE name should have text in.
4. Address, post code and email address should all have text in.
5. 'More info' does not HAVE to have text in, but it might be good to
alert them if they haven't put anything in, to prompt them to in case
they forgot. If they don't want to put anything in after the prompt,
that would be okay to leave it blank. |
Request for Question Clarification by
secret901-ga
on
30 Oct 2003 15:27 PST
Greetings horseradish!
Are you looking for a client-side (i.e. Javascript, VBScript) or a
server-side (Perl, PHP, etc.) validation script? Since this is a
simple validation, it could be done with a client-side script, but the
client can disable the scripting and can bypass it easily.
secret901-ga
|
Hello horseradish:
I have implemented your validation script in Javascript and have
tested it successfully on Internet Explorer 6.0 and Mozilla 1.5
running Windows XP. Please save the source below into a file and test
it to see if it meets all your specifications. One thing that I was
unclear about when writing the code was what it should do when the
user chooses "Single" but fills in both the male and female names.
Right now the scripts just makes sure that the female field is not
empty and does not bother to check the male field. If this is not
what you wanted, please let me know. Also, I took the liberty of
making the cursor focus on the "More info" text field when the user
decides to heed the advice. I trust that this script meets all your
specifications. If anything is not what you want, please let me know
by using the "Request for Clarification" feature before rating my
answer and I will make the necessary modifications.
Thanks,
secret901-ga
Research strategy:
I used my knowledge of Javascript combined with a Javascript reference
book to create the code.
HTML SOURCE CODE FOLLOWS:
-------------------------------------------------
<html>
<head>
<title>Untitled</title>
<script language = "Javascript">
//Copyright 2003 Google Answers
function validate(aForm) {
//either couple or single must be checked
if (!aForm.who[0].checked && !aForm.who[1].checked) {
alert("You must choose either couple or single.");
return false;
}
//one of the locations must be checked
else if (!aForm.mailsubj[0].checked && !aForm.mailsubj[1].checked &&
!aForm.mailsubj[2].checked && !aForm.mailsubj[3].checked) {
alert("You must select a location.");
return false;
}
//both names filled in if couple is checked
else if(aForm.who[0].checked && (aForm.namem.value == "" ||
aForm.namef.value == "")) {
alert("Please fill in both names if you're registering as a
couple.");
return false;
}
//female name filled in if single is checked
else if(aForm.who[1].checked && aForm.namef.value == "") {
alert("Please fill in the female name if you're registering as a
single person.");
return false;
}
//Address, post code and email address should all have text in.
else if(aForm.address.value == "" || aForm.postalcode.value == "" ||
aForm.eadd == "") {
alert("Please fill in all information for address, post code, and
email address.");
return false;
}
//prompt user if comment is blank
else if(aForm.sentence.value == "") {
answer = confirm("You did not type anything in for More info.
Would you like to submit the form anyways?")
if(!answer) {
aForm.sentence.focus();
return false;
}
else
return true;
}
return true;
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr><td class=title_line>REGISTRATION FORM</td></tr>
<tr><td><form name="ukapp" method="post" action="/cgi-bin/testi.cgi"
onsubmit="return validate(this);">
<br><input type="radio" name="who" value="Couple" class=chk1
align=middle>We would like to register as a couple
<br><input type="radio" name="who" value="Single" class=chk1
align=middle>I would like to register as a single person (please
select one)
<br><br><input type="radio" name="mailsubj" value="LONDON"
class=chk1 align=middle>London
<br><input type="radio" name="mailsubj" value="MANCHESTER"
class=chk1 align=middle>Manchester
<br><input type="radio" name="mailsubj" value="LONDON AND
MANCHESTER" class=chk1 align=middle>London and Manchester
<br><input type="radio" name="mailsubj" value="BRIGHTON" class=chk1
align=middle>Brighton<p>
<table border="0" width="415" cellspacing="5" cellpadding="0"
class=body>
<tr valign=bottom>
<td class=forms>Male name:</td>
<td><input type="text" name="namem" class=formbox></td>
<td class=forms>Female name:</td>
<td><input type="text" name="namef" class=formbox></td>
</tr>
<tr valign=bottom>
<td class=forms>Residential address:</td>
<td colspan=3><input type="text" name="address"
class=formbox2></td>
</tr>
<tr valign=bottom>
<td class=forms>Post code:</td>
<td><input type="text" name="postalcode" class=formbox></td>
<td class=forms>Email address:</td>
<td><input type="text" name="eadd" class=formbox></td>
</tr>
<tr valign=bottom>
<td class=forms>More info:</td>
<td colspan=3 class=body><textarea rows="3" cols="23"
name="sentence" value="" class=formbox2 wrap=soft></textarea></td>
</tr>
<tr>
<td colspan=4 align=right><input type="submit" name="submit"
value="SEND APPLICATION »" class=submit></td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
------------------------------------------------------------------
HTML SOURCE CODE ENDS |
Clarification of Answer by
secret901-ga
on
30 Oct 2003 18:11 PST
Hi again horeseradish:
Please note the changes that I made to your original file:
1) I added a function in the head
2) I added the phrase onsubmit="return validate(this);" to the <form> tag
secret901-ga
|
Clarification of Answer by
secret901-ga
on
30 Oct 2003 19:35 PST
Pardon me!
There is a minor bug in the code above, it did not check to make sure
that the email address is filled in. Please use the modified code
below:
<html>
<head>
<title>Untitled</title>
<script language = "Javascript">
//Copyright 2003 Google Answers
function validate(aForm) {
//either couple or single must be checked
if (!aForm.who[0].checked && !aForm.who[1].checked) {
alert("You must choose either couple or single.");
return false;
}
//one of the locations must be checked
else if (!aForm.mailsubj[0].checked && !aForm.mailsubj[1].checked &&
!aForm.mailsubj[2].checked && !aForm.mailsubj[3].checked) {
alert("You must select a location.");
return false;
}
//both names filled in if couple is checked
else if(aForm.who[0].checked && (aForm.namem.value == "" ||
aForm.namef.value == "")) {
alert("Please fill in both names if you're registering as a
couple.");
return false;
}
//female name filled in if single is checked
else if(aForm.who[1].checked && aForm.namef.value == "") {
alert("Please fill in the female name if you're registering as a
single person.");
return false;
}
//Address, post code and email address should all have text in.
else if(aForm.address.value == "" || aForm.postalcode.value == "" ||
aForm.eadd.value == "") {
alert("Please fill in all information for address, post code, and
email address.");
return false;
}
//prompt user if comment is blank
else if(aForm.sentence.value == "") {
answer = confirm("You did not type anything in for More info.
Would you like to submit the form anyways?")
if(!answer) {
aForm.sentence.focus();
return false;
}
else
return true;
}
return true;
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr><td class=title_line>REGISTRATION FORM</td></tr>
<tr><td><form name="ukapp" method="post" action="/cgi-bin/testi.cgi"
onsubmit="return validate(this);">
<br><input type="radio" name="who" value="Couple" class=chk1
align=middle>We would like to register as a couple
<br><input type="radio" name="who" value="Single" class=chk1
align=middle>I would like to register as a single person (please
select one)
<br><br><input type="radio" name="mailsubj" value="LONDON"
class=chk1 align=middle>London
<br><input type="radio" name="mailsubj" value="MANCHESTER"
class=chk1 align=middle>Manchester
<br><input type="radio" name="mailsubj" value="LONDON AND
MANCHESTER" class=chk1 align=middle>London and Manchester
<br><input type="radio" name="mailsubj" value="BRIGHTON" class=chk1
align=middle>Brighton<p>
<table border="0" width="415" cellspacing="5" cellpadding="0"
class=body>
<tr valign=bottom>
<td class=forms>Male name:</td>
<td><input type="text" name="namem" class=formbox></td>
<td class=forms>Female name:</td>
<td><input type="text" name="namef" class=formbox></td>
</tr>
<tr valign=bottom>
<td class=forms>Residential address:</td>
<td colspan=3><input type="text" name="address"
class=formbox2></td>
</tr>
<tr valign=bottom>
<td class=forms>Post code:</td>
<td><input type="text" name="postalcode" class=formbox></td>
<td class=forms>Email address:</td>
<td><input type="text" name="eadd" class=formbox></td>
</tr>
<tr valign=bottom>
<td class=forms>More info:</td>
<td colspan=3 class=body><textarea rows="3" cols="23"
name="sentence" value="" class=formbox2 wrap=soft></textarea></td>
</tr>
<tr>
<td colspan=4 align=right><input type="submit" name="submit"
value="SEND APPLICATION »" class=submit></td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
|
Request for Answer Clarification by
horseradish-ga
on
31 Oct 2003 03:00 PST
Thank you very much for this, it looks very thorough and seems to work
well. There's just one extra thing I would like if you wouldn't mind,
and that's for the email address field to be validated as an email
address. Currently if you put anything at all in there it validates.
Thank you so much, you saved me a lot of time, particularly as you did
this whilst I was asleep - different time zones :-)
|
Clarification of Answer by
secret901-ga
on
31 Oct 2003 09:58 PST
Hi again horseradish,
I created an additional clause to validate the email address for you,
you can copy and paste it onto your current page below the address,
post code, and email address validation part and above the comment
validation part. If you're unsure where to put it, just use the
updated HTML source that I will provide below.
I hope that you're satisified with my answer. If you feel that it
still does not address all the requirements, please request for
clarification before rating this answer.
secret901-ga
Search strategy:
"Regular expression" "email address"
Link:
I modified the regular expression provided here:
http://www.regular-expressions.info/tutorial.html
CODE SNIPPET FOLLOWS
-------------------------------------------------
//validate email address
else if(aForm.eadd.value.search(/\b[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\.[A-Za-z0-9._%-]{2,4}\b/)
== -1) {
alert("Please use a valid email address.");
return false;
}
-------------------------------------------------
JAVASCRIPT CODE SNIPPET ENDS
HTML CODE FOLLOWS
-------------------------------------------------
<html>
<head>
<title>Untitled</title>
<script language = "Javascript">
//Copyright 2003 Google Answers
//Used with permission
function validate(aForm) {
//either couple or single must be checked
if (!aForm.who[0].checked && !aForm.who[1].checked) {
alert("You must choose either couple or single.");
return false;
}
//one of the locations must be checked
else if (!aForm.mailsubj[0].checked && !aForm.mailsubj[1].checked &&
!aForm.mailsubj[2].checked && !aForm.mailsubj[3].checked) {
alert("You must select a location.");
return false;
}
//both names filled in if couple is checked
else if(aForm.who[0].checked && (aForm.namem.value == "" ||
aForm.namef.value == "")) {
alert("Please fill in both names if you're registering as a
couple.");
return false;
}
//female name filled in if single is checked
else if(aForm.who[1].checked && aForm.namef.value == "") {
alert("Please fill in the female name if you're registering as a
single person.");
return false;
}
//Address, post code and email address should all have text in.
else if(aForm.address.value == "" || aForm.postalcode.value == "" ||
aForm.eadd.value == "") {
alert("Please fill in all information for address, post code, and
email address.");
return false;
}
//validate email address
else if(aForm.eadd.value.search(/\b[A-Za-z0-9._%-]+@[A-Za-z0-9._%-]+\.[A-Za-z0-9._%-]{2,4}\b/)
== -1) {
alert("Please use a valid email address.");
return false;
}
//prompt user if comment is blank
else if(aForm.sentence.value == "") {
var answer = confirm("You did not type anything in for More info.
Would you like to submit the form anyways?")
if(!answer) {
aForm.sentence.focus();
return false;
}
else
return true;
}
return true;
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr><td class=title_line>REGISTRATION FORM</td></tr>
<tr><td><form name="ukapp" method="post" action="/cgi-bin/testi.cgi"
onsubmit="return validate(this);">
<br><input type="radio" name="who" value="Couple" class=chk1
align=middle>We would like to register as a couple
<br><input type="radio" name="who" value="Single" class=chk1
align=middle>I would like to register as a single person (please
select one)
<br><br><input type="radio" name="mailsubj" value="LONDON"
class=chk1 align=middle>London
<br><input type="radio" name="mailsubj" value="MANCHESTER"
class=chk1 align=middle>Manchester
<br><input type="radio" name="mailsubj" value="LONDON AND
MANCHESTER" class=chk1 align=middle>London and Manchester
<br><input type="radio" name="mailsubj" value="BRIGHTON" class=chk1
align=middle>Brighton<p>
<table border="0" width="415" cellspacing="5" cellpadding="0"
class=body>
<tr valign=bottom>
<td class=forms>Male name:</td>
<td><input type="text" name="namem" class=formbox></td>
<td class=forms>Female name:</td>
<td><input type="text" name="namef" class=formbox></td>
</tr>
<tr valign=bottom>
<td class=forms>Residential address:</td>
<td colspan=3><input type="text" name="address"
class=formbox2></td>
</tr>
<tr valign=bottom>
<td class=forms>Post code:</td>
<td><input type="text" name="postalcode" class=formbox></td>
<td class=forms>Email address:</td>
<td><input type="text" name="eadd" class=formbox></td>
</tr>
<tr valign=bottom>
<td class=forms>More info:</td>
<td colspan=3 class=body><textarea rows="3" cols="23"
name="sentence" value="" class=formbox2 wrap=soft></textarea></td>
</tr>
<tr>
<td colspan=4 align=right><input type="submit" name="submit"
value="SEND APPLICATION »" class=submit></td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
-------------------------------------------------------------
HTML SOURCE ENDS
|
Clarification of Answer by
secret901-ga
on
31 Oct 2003 10:08 PST
The source code posted here seems to have line breaks when there
shouldn't be any. If you have trouble running the code, you can
download the file here: http://www.ics.uci.edu/~dhnguyen/testform.html
Cheers,
secret901-ga
|
,
0 Comments
)