Problem with pretty simple validation

[Marc Llenas]

Hi there,

I'm stuck on a validation function for a form and I cannot figure out what
the problem is. The page is in ASP. Any ideas?

The function being called is:

<script language="JavaScript" type="text/javascript">
function checkform ( form )
{
if (form.txtDate.value == "")
{
alert( "Si us plau, seleccioneu la data del festiu sol·licitat per
l'usuari" );
form.txtDate.focus();
return false;
}
if (form.CboType.value == "")
{
alert( "Si us plau, seleccioneu el tipus de festiu sol·licitat per
l'usuari" );
form.CboType.focus();
return false;
}

if(!isDate(form.txtDate.value))
{
alert("Format de data invàlida (dd-mm-aaaa)");
form.txtDate.focus();
return false;
}
if ((form.txtDetails.value=="") && (form.CboType.value==7))
{
alert( "Si us plau, introdui el motiu de la sol·licitud" );
form.txtDetails.focus();
return false;
}
if ((form.txtDetails.value=="") && (form.CboType.value==8))
{
alert( "Si us plau, introdui el motiu de la sol·licitud" );
form.txtDetails.focus();
return false;
}
return true;
}
</SCRIPT>

The function is called by:

<form method="post" name="frmMain" action="process.asp" onsubmit="return
checkform(this);" >
<table border="1" width="25%" id="table1" cellspacing="0">
<tr>
<td>

<div align="center">
<table border="0" width="89%" id="table2" cellspacing="0"
cellpadding="0">
<tr>
<td width="19%">&nbsp;</td>
<td width="68%"><INPUT TYPE="hidden" NAME="txtUser" value="<%=
Session("UseID") %>"></td>
</tr>
<tr>
<td colspan="2">
<img border="0" src="images/blank1pix.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="19%"><font class="welcome">Data:</font></td>
<td width="68%">
<INPUT TYPE="text" NAME="txtDate" class="Days" STYLE="width: 140px"
readonly>
<A HREF="#" onClick="if(oDP)oDP.open(frmMain.txtDate);return false;">
<IMG SRC="images/calendar.gif" BORDER="0" WIDTH="16" HEIGHT="15"
ALT="Triar una data">
</A>
</td>
</tr>
<tr>
<td colspan="2">
<img border="0" src="images/blank1pix.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="19%"><font class="welcome">Tipus:</font></td>
<td width="68%">
<select size="1" name="CboType" class="Days" STYLE="width: 170px">
<option> </option>
<option value ="1">Dia de vacances </option>
<option value ="6">Mig dia de vacances</option>
<option value ="7">Dia de permis </option>
<option value ="8">Mig dia de permis </option>
</select></td>
</tr>
<tr>
<td width="87%" colspan="2">
<img border="0" src="images/blank1pix.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="19%" valign="top"><font
class="Welcome">Detalls:</font></td>
<td width="68%">
<INPUT TYPE="text" NAME="txtDetails" class="Days" STYLE="width: 170;
height:65"></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="19%">&nbsp;</td>
<td align="right" width="68%">
<input type="reset" value="Començar" name="B2" class="button"><input
type="submit" value="Enviar" name="B1" class="button"></td>
</tr>
<tr>
<td width="19%">&nbsp;</td>
<td align="right" width="68%">
&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>

The last 2 checks before the end of the script are not working. I started
having them as one unique check like:
if ((form.txtDetails.value=="") && (form.CboType.value==7 ||
form.CboType.value==8))
{
alert( "Si us plau, introdui el motiu de la sol·licitud" );
form.txtDetails.focus();
return false;
}

Still no luck.

I don't know if it is a syntax problem but it ain't working.

Thanks in advance,

Marc

 

[Stephen Chalmers]

Hi there,

I'm stuck on a validation function for a form and I cannot figure out what
the problem is. The page is in ASP. Any ideas?

if (.... (form.CboType.value==7))

This may not be only problem, but the universal way to read a select
element is by indexing its options array with its selectedIndex
property:

form.CboType.options[ form.CboType.selectedIndex ].value

 

[RobG]

Hi there,

I'm stuck on a validation function for a form and I cannot figure out what
the problem is. The page is in ASP. Any ideas?

The function being called is:

When posting code, manually wrap it at about 70 characters to prevent
wrapping, which otherwise introduces more errors that must be fixed
before help can be provided.

<script language="JavaScript" type="text/javascript">

The language attribute is depreciated, type is required:

function checkform ( form )
{
if (form.txtDate.value == "")
{
alert( "Si us plau, seleccioneu la data del festiu sol·licitat per
l'usuari" );

Here is some error-inducing wrapping, more occurs elsewhere:

alert( "Si us plau, seleccioneu la data del festiu"
+ " sol·licitat per l'usuari" );

form.txtDate.focus();
return false;
}
if (form.CboType.value == "")
{
alert( "Si us plau, seleccioneu el tipus de festiu sol·licitat per
l'usuari" );
form.CboType.focus();
return false;
}

if(!isDate(form.txtDate.value))

Leaving in this line without the code for isDate() causes an error that
must be fixed in order to make your code run. Either remove it or
include a dummy isDate().

{
alert("Format de data invàlida (dd-mm-aaaa)");
form.txtDate.focus();
return false;
}
if ((form.txtDetails.value=="") && (form.CboType.value==7))

For some browsers, the value of a select is the value of the selected
option (e.g. Firefox), but for other browsers (e.g. IE) you have to use
the selectedIndex value:

if (form.txtDetails.value==""
&& form.CboType[form.CboType.selectedIndex].value==7) {

{
alert( "Si us plau, introdui el motiu de la sol·licitud" );
form.txtDetails.focus();
return false;
}
if ((form.txtDetails.value=="") && (form.CboType.value==8))
{
alert( "Si us plau, introdui el motiu de la sol·licitud" );
form.txtDetails.focus();
return false;

As you noted, these tests could be combined:

var t = form.CboType[form.CboType.selectedIndex].value;
if ((8==t || 7==t) && "" == form.txtDetails.value){
...

}
return true;
}
</SCRIPT>

The function is called by:

<form method="post" name="frmMain" action="process.asp" onsubmit="return
checkform(this);" >

Here wrapping has caused an issue with testing your code. The script
parser sees - return - then a carriage return, followed by a statement
so a semi-colon is inserted. The return executes without doing the
checkform() bit and without an error - debugging your code is made that
much more difficult.

<form method="post" name="frmMain" action="process.asp"
onsubmit="return checkform(this);" >

[...]

<INPUT TYPE="text" NAME="txtDate" class="Days" STYLE="width: 140px"
readonly>
<A HREF="#" onClick="if(oDP)oDP.open(frmMain.txtDate);return false;">

What does oDP do? Presumably it creates a pop-up with a date selector -
for the sake of testing, why not hard-code a valid value in the onclick,
or in the readonly txtDate form control?

Your reference to the form uses 'frmMain' as a global variable, that
will work only in IE:

<A HREF="#" onClick="
if(oDP)oDP.open(document.forms['frmMain'].elements['txtDate']);
return false;
">

Many would say that you should use the image element with a pointer
cursor and remove the A element. Or better, use a button and then the
reference to the form becomes shorter:

<input type="button" value="Calendar" onClick="
if(oDP)oDP.open(this.form.elements['txtDate']);
return false;
">

[...]

 

[Marc Llenas]

Woa!, thanks a bunch Rob,

This is probably the most in-dept review of a piece of code I've ever seen.
Will modify the code as per your suggestions. Thanks a million.

Marc

Hi there,

I'm stuck on a validation function for a form and I cannot figure out
what the problem is. The page is in ASP. Any ideas?

The function being called is:

When posting code, manually wrap it at about 70 characters to prevent
wrapping, which otherwise introduces more errors that must be fixed before
help can be provided.

<script language="JavaScript" type="text/javascript">

The language attribute is depreciated, type is required:

function checkform ( form )
{
if (form.txtDate.value == "")
{
alert( "Si us plau, seleccioneu la data del festiu sol·licitat per
l'usuari" );

Here is some error-inducing wrapping, more occurs elsewhere:

alert( "Si us plau, seleccioneu la data del festiu"
+ " sol·licitat per l'usuari" );

form.txtDate.focus();
return false;
}
if (form.CboType.value == "")
{
alert( "Si us plau, seleccioneu el tipus de festiu sol·licitat per
l'usuari" );
form.CboType.focus();
return false;
}

if(!isDate(form.txtDate.value))

Leaving in this line without the code for isDate() causes an error that
must be fixed in order to make your code run. Either remove it or include
a dummy isDate().

{
alert("Format de data invàlida (dd-mm-aaaa)");
form.txtDate.focus();
return false;
}
if ((form.txtDetails.value=="") && (form.CboType.value==7))

For some browsers, the value of a select is the value of the selected
option (e.g. Firefox), but for other browsers (e.g. IE) you have to use
the selectedIndex value:

if (form.txtDetails.value==""
&& form.CboType[form.CboType.selectedIndex].value==7) {

{
alert( "Si us plau, introdui el motiu de la sol·licitud" );
form.txtDetails.focus();
return false;
}
if ((form.txtDetails.value=="") && (form.CboType.value==8))
{
alert( "Si us plau, introdui el motiu de la sol·licitud" );
form.txtDetails.focus();
return false;

As you noted, these tests could be combined:

var t = form.CboType[form.CboType.selectedIndex].value;
if ((8==t || 7==t) && "" == form.txtDetails.value){
...

}
return true;
}
</SCRIPT>

The function is called by:

<form method="post" name="frmMain" action="process.asp" onsubmit="return
checkform(this);" >

Here wrapping has caused an issue with testing your code. The script
parser sees - return - then a carriage return, followed by a statement so
a semi-colon is inserted. The return executes without doing the
checkform() bit and without an error - debugging your code is made that
much more difficult.

<form method="post" name="frmMain" action="process.asp"
onsubmit="return checkform(this);" >

[...]

<INPUT TYPE="text" NAME="txtDate" class="Days" STYLE="width:
140px" readonly>
<A HREF="#" onClick="if(oDP)oDP.open(frmMain.txtDate);return
false;">

What does oDP do? Presumably it creates a pop-up with a date selector -
for the sake of testing, why not hard-code a valid value in the onclick,
or in the readonly txtDate form control?

Your reference to the form uses 'frmMain' as a global variable, that will
work only in IE:

<A HREF="#" onClick="
if(oDP)oDP.open(document.forms['frmMain'].elements['txtDate']);
return false;
">

Many would say that you should use the image element with a pointer cursor
and remove the A element. Or better, use a button and then the reference
to the form becomes shorter:

<input type="button" value="Calendar" onClick="
if(oDP)oDP.open(this.form.elements['txtDate']);
return false;
">

[...]