PDA

Click to See Complete Forum and Search --> : Form Validation Problem

pk2000
09-03-2003, 04:35 PM
The Following Code is a simple form, I am trying to get a form validator to check that the first name, last name and email address have values entered in them. When I view this page and click submit it just goes ahead and sends the form. It doesnt give any errors for blank entries. Could someone tell me if Ive made an error in the code? Im new to javascript and what not and Im just looking for a simple form validator that I can get working on a small scale and then slowly increase it to check more entries. I thought this was correct but obviously ive messed it up somewhere. Thanks in advance.

<HTML>
<Title></title>
<HEAD>
<!-- Begin
function verify() {
var themessage = "You are required to complete the following fields: ";
if (document.sunshineform.First_Name.value=="") {
themessage = themessage + " - First Name";
}
if (document.sunshineform.Last_Name.value=="") {
themessage = themessage + " - Last Name";
}
if (document.sunshineform.Email_Address.value=="") {
themessage = themessage + " - E-mail";
}
//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
document.form.submit();
}
else {
alert(themessage);
return false;
}
}
// End -->
</script>
<SCRIPT language="JavaScript">
function Calculate()
{
if (sunshineform.Bench_fireside_piano.value == 1)
sunshineform.Cost1.value = sunshineform.Qty1.value * 5;
else
sunshineform.Cost1.value = sunshineform.Qty1.value * sunshineform.Bench_fireside_piano.value * 5;

if (sunshineform.Bookcase_double_door.value == 1)
sunshineform.Cost2.value = sunshineform.Qty2.value * 20;
else
sunshineform.Cost2.value = sunshineform.Qty2.value * sunshineform.Bookcase_double_door.value * 20;

if (sunshineform.Bookshelves.value == 1)
sunshineform.Cost3.value = sunshineform.Qty3.value * 10;
else
sunshineform.Cost3.value = sunshineform.Qty3.value * sunshineform.Bookshelves.value * 10;

sunshineform.Subtotal.value = parseFloat(sunshineform.Cost1.value) + parseFloat(sunshineform.Cost2.value) + parseFloat(sunshineform.Cost3.value);
}
</SCRIPT>
</HEAD>
<form NAME="sunshineform" action="formmail.pl" method=POST>
<input type=hidden name="recipient" value="dimensionaljump@hotmail.com">
<input type=hidden name="subject" value="Online Quote Request Form">
<!--Title - title of the Your Message Was Sent resultant web page-->
<input type=hidden name="title" value="Online Quote Request Form">
<input type=hidden name="redirect" value="thankyou.html">
<div align="center">
<center>
<table border="1" width="70%" height="1" >
<tr>
<td width="88%" height="23">
<p align="left"><font face="Arial">First Name</font>
</td>
<td width="70%" height="23" colspan="2">
<p align="left"><font face="Arial">
<input type="text" name="First_Name" size="41">
</font>
</td>
</tr>
<tr>
<td width="88%" height="23">
<p align="left"><font face="Arial">Last Name</font>
</td>
<td width="70%" height="23" colspan="2">
<p align="left"><font face="Arial">
<input type="text" name="Last_Name" size="41">
</font>
</td>
</tr>
<tr>
<td width="88%" height="23">
<p align="left"><font face="Arial">Email Address</font>
</td>
<td width="70%" height="23" colspan="2">
<p align="left"><font face="Arial">
<input type="text" name="Email_Address" size="41">
</font>
</td>
</tr>
</table>
<TABLE BORDER="1" WIDTH="55%" BGCOLOR="">
<TR>
<TD WIDTH="53%"><B>Article</B></TD>
<TD WIDTH="16%"><B>Quantity</B></TD>
<TD WIDTH="17%"><b>Cubic Ft. Per Item</b></TD>
<TD WIDTH="14%"><b>Total Cubic Ft. Per Item</b></TD>
</TR>
<TR>
<TD>Bench - Fireside - Piano</TD>
<TD>
<CENTER>
<P>
<INPUT TYPE="TEXT" NAME="Qty1" SIZE="5"
onBlur="Calculate();">
</CENTER>
</TD>
<TD>

<CENTER>
<p align="center"><font face="Arial">5 </font>
<INPUT TYPE="hidden" NAME="Bench_fireside_piano" SIZE="5"
onBlur="Calculate();" value="1">
</CENTER>
</TD>
<TD>
<INPUT TYPE="TEXT" NAME="Cost1" SIZE="8">
</TD>
</TR>
<TR>
<TD>Bookcase - double door</TD>
<TD>
<CENTER>
<P>
<INPUT TYPE="TEXT" NAME="Qty2" SIZE="5"
onBlur="Calculate();">
</CENTER>
</TD>
<TD>
<CENTER>
<p align="center"><font face="Arial">20 </font>
<INPUT TYPE="hidden" NAME="Bookcase_double_door" SIZE="5"
onBlur="Calculate();" value="1">
</CENTER>
</TD>
<TD>
<INPUT TYPE="TEXT" NAME="Cost2" SIZE="8">
</TD>
</TR>
<TR>
<TD>Bookshelves</TD>
<TD>
<div align="center">
<input type="TEXT" name="Qty3" size="5"
onBlur="Calculate();">
</div>
</TD>
<TR>
<TD></TD>
<TD></TD>
<TD><B>total</B></TD>
<TD>
<INPUT TYPE="TEXT" NAME="Subtotal" SIZE="8" >
</TD>
</TR>
</TABLE>
<center>
<input type="submit" name="Submit" onclick="verify();"></center>

</FORM>
</BODY>
</HTML>
soccer362001
09-03-2003, 04:41 PM
You may have to modify this but then again it may not be what you are looking for.

<script language="JavaScript">
<!-- Begin
function noEntry() {
mt=document.form.entry.value;
if ((mt.length<1)||(mt.substring(0,6)=="******")) {
alert("I'm sorry. This entry must be completed before I can submit this form for processing.");
document.form.entry.value="******Please Complete This Entry";
document.form.entry.focus();
return false;
}
else { return true; }
}
// End -->
</script>
Khalid Ali
09-03-2003, 04:44 PM
your code seem to work.only problem was in this line
<input type="submit" name="Submit" onclick="verify();">

replace it with this

<input type="submit" name="Submit" onclick="return verify();">
pk2000
09-03-2003, 04:47 PM
Tried that editing that line and adding the return and it still didnt work .. just went and sent the form again. Without giving errors for the blank entries .. any other ideas??
Khalid Ali
09-03-2003, 04:52 PM
ok then what I thought was your typing mistake is a serious mistake in your code....


which is you are missing the begin script tag for the piece for verify() function....

this part below

<HTML>
<Title></title>
<HEAD>
<!-- Begin
function verify() {

should have been

<HTML>
<Title></title>
<HEAD>
<script type="text/javascript">
<!-- Begin
function verify() {
Charles
09-03-2003, 04:55 PM
1) It's best to validate from the FORM's "onsubmit" handler.

2) Your HTML is invalid. Among other things you ought not to use TABLEs for layout.

3) I've added, at no extra charge, a routine to make sure that the email address is valid.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; margin:1em 0em}
input {display:block}
-->
</style>

<script type="text/javascript">
<!--
String.prototype.isEmailAddress = function () {return this.match(/^[^\x00-\x20()<>@,;:\\".[\]\x7f-\xff]+(?:\.[^\x00-\x20()<>@,;:\\".[\]\x7f-\xff]+)*\@[^\x00-\x20()<>@,;:\\".[\]\x7f-\xff]+(?:\.[^\x00-\x20()<>@,;:\\".[\]\x7f-\xff]+)+$/)}

function verify (f) {
if (!/\S/.test(f.first.value)) {alert('Please supply a first name.'); f.first.focus(); return false}
if (!/\S/.test(f.last.value)) {alert('Please supply a last name.'); f.last.focus(); return false}
if (!/\S/.test(f.email.value)) {alert('Please supply an email address.'); f.email.focus(); return false}
}
// -->
</script>

<form action="" onsubmit="return verify(this)">
<div>
<label>First Name<input type="text" name="first"></label>
<label>Last Name<input type="text" name="last"></label>
<label>E Mail Address<input type="text" name="email" onchange="if (!this.value.isEmailAddress()) {alert ('That would not appear to be a valid email address.'); this.value=''; this.focus()}"></label>
<button type="submit">Submit</button>
</div>
</form>
pk2000
09-03-2003, 05:03 PM
Well Im not sure how my html is invalid, since everything on the page functions the way it was designed to. The only thing that isnt working is the javascript validator. I have tried changing the line <input type="submit" name="Submit" onclick="verify();"></center> to <input type="submit" name="Submit" onclick="return verify();"></center>

this did nothing I have also tried changing the line
<input type="submit" name="Submit"></center>

and modifying the line <form NAME="sunshineform" action="formmail.pl" method=POST> to

<form NAME="sunshineform" action="formmail.pl" method=POST onsubmit="return validate();"> that also did nothing. The form just continues to send without displaying an error for blank entries.

Any other ideas


Charles I thank you for your no charge help, I am not sure how to decypher what you have written, so modifying it would be a mystery to me and as I will need to modify it to add more things to be validated. I dont think it will be of help. But I thank you for your time.
Khalid Ali
09-03-2003, 05:06 PM
lol..are you even reading my responses???
pk2000
09-03-2003, 05:09 PM
Khalid Ali


LOL ummm I am quite embarrassed right now, I have NO IDEA how I missed that post by you. LOL some how my eyes must of skipped over it. LOL Ya thats my story. Okay well thank you very much .. Problem solved :)
Charles
09-03-2003, 05:13 PM
Your page works on the few browsers that you have tested it in. It certainly won't workl on all browsers. As I mentioned above, you ought not to use TABLEs for layout. And just try getting your page to pass the validator at http://validator.w3.org/.

The form's "onsubmit" handler is called just before the form is submitted. If the handler returns false then the submission is supressed. The syntax that I used in the FORM start tag, <form action="" onsubmit="return verify(this)">, allows whatever was returned by "verify" to be passed along. The value passed to "verify", "this", is the form object itself. That way you save a heap of typing in the "verify" script. Other than that it's pretty straight forward and a good bit more simple than your approach. Oh, and mine works.
Khalid Ali
09-03-2003, 05:19 PM
:p
no problem...I bet your boss must be around...jking