Form validation [Archive] - CodingForums.com

shashgo

10-15-2002, 03:36 AM

Help:

Why doesnt the following code work?
It seems that the function validate() never gets called, although it should be. What is going wrong?

<html>
<head>
<title>Contact SGE</title>
<script language="javascript">
function validate()
{
document.write("Validate() called");
var msg="";
var flag=0;
if (document.info.fname.value==""){msg+="<li>First name</li>"; flag++};
if (document.info.mi.value==""){msg+="<li>Middle initial</li>"; flag++};
if (document.info.lname.value=""){msg+="<li>Last name</li>"; flag++};
if ((document.info.email.indexOf('@')==-1)||(document.info.email.indexOf('.')==-1)){msg+="<li>Email address</li>"; flag++}
if (flag!=0)
{
var newWin=window.open("","Error","height='500',width='400'");
newWin.document.write("Please re-enter the following items<br><ol>"+msg+"<\/ol>");
newWin.document.write("<p><a href="javascript:self.close()">Close window<\/a><\/p>");
}
}
</script>
</head>
<body>
<table rows="3" cols="2" border="1">
<tr>
<td width="14%" bgcolor="ff66ff" align="center"><font face="Arial" size="15" color="#336699">SGE</td>
<td bgcolor="ffccff" align="center"><font face="Arial" size="15" color="#336699">SG ENTERPRISES</td>
</tr>
<tr>
<td bgcolor="ff00ff" rowspan="2" valign="top">
<font color="#ffffff"><a href="index.htm">Home</a>
</td>
<td bgcolor="#ffffcc">
Please enter all the items that have a * next to them.
<form name="info" onSubmit="validate();">
<table rows="5" cols="2">
<tr>
<td>First name</td>
<td><input type="text" size="20" name="fname"></td>
</tr>
<tr>
<td>Middle Initial</td>
<td><input type="text" size="1" maxlength="1" name="mi"></td>
</tr>
<tr>
<td>Last name</td>
<td><input type="text" size="20" name="lname"></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text" size="20" name="email"></td>
</tr>
<tr>
<td>Please give us any feedback/comments about our site</td>
<td><textarea name="ta" rows="4" cols="20"></textarea></td>
</tr>
</table>
<input type="submit" value="Submit form">
</form>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>

adios

10-15-2002, 03:59 AM

function validate()
{
document.write("Validate() called");

The first thing your 'Validate()' function does is - discard the page it's in!

http://caucuscare.com/~roth/JAVASCRIPT/refp_95.htm

Use alert()s, status writes when setting breakpoints to follow script execution.

Also, your validator needs to return true/false to continue/cancel form submission, and the event handler that calls it needs to pass that value along:

<form name="info" onSubmit="return validate()">

Didn't check the rest of it...start there.

glenngv

10-15-2002, 04:05 AM

putting adios' statements into codes... :)

function validate()
{
alert("Validate() called");
var msg="";
var flag=0;
if (document.info.fname.value==""){msg+="<li>First name</li>"; flag++};
if (document.info.mi.value==""){msg+="<li>Middle initial</li>"; flag++};
if (document.info.lname.value=""){msg+="<li>Last name</li>"; flag++};
if ((document.info.email.indexOf('@')==-1)||(document.info.email.indexOf('.')==-1)){msg+="<li>Email address</li>"; flag++}
if (flag!=0)
{
var newWin=window.open("","Error","height=500,width=400");
newWin.document.write("Please re-enter the following items<br><ol>"+msg+"<\/ol>");
newWin.document.write("<p><a href="javascript:self.close()">Close window<\/a><\/p>");
return false;//cancels submit
}
return true;//continue submit
}

...

<form name="info" onSubmit="return validate()">
...
<input type="submit" value="Submit form">

shashgo

10-15-2002, 01:46 PM

Hi

To Glenn and adios,

Thanks for your reply. I had exactly what both of you suggested, but the problem was that the function validate() is not called for some reason. So, there is no alert box or anything.

I copied and pasted the script that glenn gave along with adios's script, but for some reason the function is still not called, so no alert box, no pop up window (after submitting a blank form)

What gives? Im thinking maybe it has something to do with the fact that the form is embedded in a table that is nested within another. Or does this not make any difference?

The script I now have (with the changes) is

<html>
<head>
<title>Contact SGE</title>
<script language="javascript">

function validate()
{
alert("Validate() called");
var msg="";
var flag=0;
if (document.info.fname.value==""){msg+="<li>First name</li>"; flag++};
if (document.info.mi.value==""){msg+="<li>Middle initial</li>"; flag++};
if (document.info.lname.value=""){msg+="<li>Last name</li>"; flag++};
if ((document.info.email.indexOf('@')==-1)||(document.info.email.indexOf('.')==-1)){msg+="<li>Email address</li>"; flag++}
if (flag!=0)
{
var newWin=window.open("","Error","height=500,width=400");
newWin.document.write("Please re-enter the following items<br><ol>"+msg+"<\/ol>");
newWin.document.write("<p><a href="java script:self.close()">Close window<\/a><\/p>");
return false;//cancels submit
}
return true;//continue submit
}
</script>
</head>
<body>
<table rows="3" cols="2" border="1">
<tr>
<td width="14%" bgcolor="ff66ff" align="center"><font face="Arial" size="15" color="#336699">SGE</td>
<td bgcolor="ffccff" align="center"><font face="Arial" size="15" color="#336699">SG ENTERPRISES</td>
</tr>
<tr>
<td bgcolor="ff00ff" rowspan="2" valign="top">
<font color="#ffffff"><a href="index.htm">Home</a>
</td>
<td bgcolor="#ffffcc">
Please enter all the items that have a * next to them.
<form name="info" onSubmit="return validate()">
<table rows="5" cols="2">
<tr>
<td>First name</td>
<td><input type="text" size="20" name="fname"></td>
</tr>
<tr>
<td>Middle Initial</td>
<td><input type="text" size="1" maxlength="1" name="mi"></td>
</tr>
<tr>
<td>Last name</td>
<td><input type="text" size="20" name="lname"></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text" size="20" name="email"></td>
</tr>
<tr>
<td>Please give us any feedback/comments about our site</td>
<td><textarea name="ta" rows="4" cols="20"></textarea></td>
</tr>
</table>
<input type="submit" value="Submit form">
</form>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>

Roy Sinclair

10-15-2002, 03:11 PM

If you'd turn on error reporting in your browser you might have gotten a hint about the problem and been a lot further along.

When I tried your code my browser complained about this line as the page loaded:

newWin.document.write("<p><a href="javascript:self.close()">Close window<\/a><\/p>");

If you'll examine that line you'll notice that you've got unescaped double quote marks inside a double quote delimited string.

shashgo

10-15-2002, 03:17 PM

Roy,

Yes I noticed that earlier. I changed it to

newWin.document.write("<p><a href='javascript:self.close()'>Close window<\/a><\/p>");

but this doesnt work either. I get no pop up window when I submit a blank form (flag!=0)

Roy Sinclair

10-15-2002, 03:45 PM

Originally posted by shashgo
Roy,

Yes I noticed that earlier. I changed it to

newWin.document.write("<p><a href='javascript:self.close()'>Close window<\/a><\/p>");

but this doesnt work either. I get no pop up window when I submit a blank form (flag!=0)

I fixed it too, and when I submitted I got the alert that told me the validate routine got called and then I got the next javascript error. Turn on error reporting, it's your friend. In fact, download the Mozilla browser (much better than Netscape) and use it's Javascript console to actively watch for scripting errors instead of using the weak alart that IE produces.

Doing such things would show you that where you have document.info you should have document.forms.info and where you have email.indexOf you need email.value.indexOf. After you make those changes, your page will work.

beetle

10-15-2002, 03:51 PM

Ok, I'm a troll. I know it. Forgive me.

fValidate (http://www.peterbailey.net/fValidate)

adios

10-15-2002, 04:25 PM

...where you have document.info you should have document.forms.info

<form name="info"..........>

Actually: document.info is fine.

Like I said: didn't check the rest of it. Otherwise, R. Sinclair's comments should be put on a sticky. Debugging anything without support is like performing surgery with the lights out. At the least, turn on error notification in the IE Internet Options sheet.

Roy Sinclair

10-15-2002, 09:17 PM

Originally posted by adios

...

Actually: document.info is fine.
...

Err, not really. That's a shortcut supported by IE which doesn't work in Gecko based browsers like Mozilla 1+ and Netscape 6+. Using document.forms.info works across those other browsers and is a very simple change to make which helps to future-proof the code even if your current audience is only IE users.

glenngv

10-16-2002, 02:18 AM

shashgo

10-16-2002, 02:19 AM

Hi all,

I fixd it finally.
What I had not done was use value in the statement

if ((document.info.email.indexOf('@')==-1).....

I should have written the statement as

if ((document.info.email.value.indesOf('@')==-1)...

It works now. Silly how such a simple thing can cause the whole function not to work.

adios

10-16-2002, 02:45 AM

Err, not really. That's a shortcut supported by IE...Well...

http://www.comnets.rwth-aachen.de/doc/java/ns-intro/navobj.html#clientobj

I believe it was Netscape that introduced this abbreviated form of referencing. As far as I know (don't have NS6+ here at the moment) it is still supported, although it's deprecated, more or less, in favor of using document.getElementById().

Oops, thanks glenngv - popped in there while I was typing...;)