Validation Problem

[Frank Py]

I'm tring to use a validation function example from WROX that looks at
form fields on a submit. I can't seem to launch it. I have 2 other
functions up in the header that work fine. Any help appreciated. Here is
the code and form:
<script type='text/javascript'>
function form1_onsubmit( )
{
var form = document.MyInpu t
var controlCounter;
var returnValue = true;
var formControl;

for controlCounter = 0; controlCounter < form.length; controlCounter+ +)
{
formControl = form.elements[controlCounter];
if (formControl.ty pe == "text" && formControl.val ue =="")
{
alert("Please complete all fields");
formControl.foc us();
returnValue = false;
break;
}
}
return returnValue;
}

</script>
</head>

<Table border="1" Width=100%>

<form action="MyInser t.asp" method="Post" name="MyInput"
LANGUAGE=JavaSc ript onsubmit="retur n form1_onsubmit( )">
<TR>
<td width=20%><inpu t type="TEXT" name="ExDate2" onkeypress="if
(event.keyCode == 13)
{document.getEl ementById('next ').focus();retu rn
false;}">&nbsp; </td>
<td width=20%><SELE CT name="Expense2" id="next" onkeypress="if
(event.keyCode == 13)
{document.getEl ementById('next 2').focus();ret urn
false;}"onchang e='javascript:T itleonchange(); '><Option value="Select"
Selected>
<Option Value="Car">Car
<Option Value="Meals">M eals
<Option Value="Air">Air
<Option Value="Phone">P hone</select>&nbsp;</td>

<td width=20%><inpu t type="INPUT" READONLY=TRUE
name="ExCode2"> &nbsp;</td>
<td width=20%><inpu t type="TEXT" id="next2" name="Amount2"> &nbsp;</td>
<td width=20%><inpu t type="SUBMIT" value="Submit"> </td>
</tr>
</table>
thanks,
Frank



*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

[DU]

Re: Validation Problem

Frank Py wrote:
[color=blue]
> I'm tring to use a validation function example from WROX that looks at
> form fields on a submit. I can't seem to launch it. I have 2 other
> functions up in the header that work fine. Any help appreciated. Here is
> the code and form:
> <script type='text/javascript'>
> function form1_onsubmit( )
> {
> var form = document.MyInpu t
> var controlCounter;
> var returnValue = true;
> var formControl;
>
> for controlCounter = 0; controlCounter < form.length; controlCounter+ +)[/color]

I did not check the whole code - missing an ( - but this line should
have brought up the javascript debugger or your javascript console:

for (controlCounter = 0; controlCounter < form.length; controlCounter+ +)
[color=blue]
> {
> formControl = form.elements[controlCounter];
> if (formControl.ty pe == "text" && formControl.val ue =="")
> {
> alert("Please complete all fields");
> formControl.foc us();
> returnValue = false;
> break;
> }
> }
> return returnValue;
> }
>[/color]

Your form1_onsubmit( ) function could be optimize to be more efficient.
[color=blue]
> </script>
> </head>
>
> <Table border="1" Width=100%>
>[/color]

Form should not be inside table. Table should be inside form. This is a
classic validation error (improper nesting). Also, there is no point to
setting the width of a table to 100% since the default value of width is
100% of its parent node.
[color=blue]
> <form action="MyInser t.asp" method="Post" name="MyInput"
> LANGUAGE=JavaSc ript onsubmit="retur n form1_onsubmit( )">[/color]

LANGUAGE=JavaSc ript should not be in there.
[color=blue]
> <TR>
> <td width=20%><inpu t type="TEXT" name="ExDate2" onkeypress="if
> (event.keyCode == 13)
> {document.getEl ementById('next ').focus();retu rn
> false;}">&nbsp; </td>[/color]

event.keyCode == 13 means that only MSIE can support and will support
this page. If you want a tab behavior on an <enter> keypress, then there
is a cross-browser way to do this.
[color=blue]
> <td width=20%><SELE CT name="Expense2" id="next" onkeypress="if
> (event.keyCode == 13)
> {document.getEl ementById('next 2').focus();ret urn
> false;}"onchang e='javascript:T itleonchange(); '><Option value="Select"
> Selected>[/color]

You can safely remove "javascript :" in the onchange attribute value:
this achieves nothing.

[color=blue]
> <Option Value="Car">Car
> <Option Value="Meals">M eals
> <Option Value="Air">Air
> <Option Value="Phone">P hone</select>&nbsp;</td>
>
> <td width=20%><inpu t type="INPUT" READONLY=TRUE
> name="ExCode2"> &nbsp;</td>[/color]

It's readonly. Not READONLY=TRUE. Note that no browser now seems to
support correctly the readonly attribute.

http://www.w3.org/TR/html4/interact/forms.html#adef-readonly

[color=blue]
> <td width=20%><inpu t type="TEXT" id="next2" name="Amount2"> &nbsp;</td>
> <td width=20%><inpu t type="SUBMIT" value="Submit"> </td>[/color]

Usually forms have a reset button too and an onreset form event handler.

width=20% will be interpreted as 20px while
width="20%" will be interpreted as 20% of its parentNode given width.

Just by giving wrapping all your attribute values in double quotes, you
make your page get parsed and rendered faster and you avoid this kind of
error.

3.4. Should I put quotes around attribute values?

http://www.htmlhelp.com/faq/html/basics.html#quotes

"By default, SGML requires that all attribute values be delimited using
either double quotation marks(...)"

http://www.w3.org/TR/html4/intro/sgmltut.html#attributes

[color=blue]
> </tr>
> </table>[/color]

Your form end tag is not found: so, improper nesting here also.
[color=blue]
> thanks,
> Frank
>
>
>
> *** Sent via Developersdex http://www.developersdex.com ***
> Don't just participate in USENET...get rewarded for it![/color]


You really should validate your whole document, use a doctype
declaration, etc..

http://validator.w3.org/

Activating the Right Layout Mode Using the Doctype Declaration

http://www.hut.fi/u/hsivonen/doctype.html

DU
--
Javascript and Browser bugs:

http://www10.brinkster.com/doctorunclear/

[Frank Py]

Re: Validation Problem

Thanks for your analytical pointers. I was able to get it going with
your help.

Sincerely,
Frank



*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!