Connecting Tech Pros Worldwide Forums | Help | Site Map

Problem with pretty simple validation

Marc Llenas
Guest
 
Posts: n/a
#1: Oct 10 '05
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
Guest
 
Posts: n/a
#2: Oct 10 '05

re: Problem with pretty simple validation


Marc Llenas wrote:[color=blue]
> 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))[/color]

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

--
S.C.

RobG
Guest
 
Posts: n/a
#3: Oct 11 '05

re: Problem with pretty simple validation


Marc Llenas wrote:[color=blue]
> 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:[/color]

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.
[color=blue]
>
> <script language="JavaScript" type="text/javascript">[/color]

The language attribute is depreciated, type is required:

<script type="text/javascript">

[color=blue]
> function checkform ( form )
> {
> if (form.txtDate.value == "")
> {
> alert( "Si us plau, seleccioneu la data del festiu solˇlicitat per
> l'usuari" );[/color]

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

alert( "Si us plau, seleccioneu la data del festiu"
+ " solˇlicitat per l'usuari" );
[color=blue]
> 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))[/color]

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().
[color=blue]
> {
> alert("Format de data invālida (dd-mm-aaaa)");
> form.txtDate.focus();
> return false;
> }
> if ((form.txtDetails.value=="") && (form.CboType.value==7))[/color]

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) {
[color=blue]
> {
> 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;[/color]

As you noted, these tests could be combined:

var t = form.CboType[form.CboType.selectedIndex].value;
if ((8==t || 7==t) && "" == form.txtDetails.value){
...
[color=blue]
> }
> return true;
> }
> </SCRIPT>
>
> The function is called by:
>
> <form method="post" name="frmMain" action="process.asp" onsubmit="return
> checkform(this);" >[/color]

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);" >

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

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;
">

[...]


--
Rob
Marc Llenas
Guest
 
Posts: n/a
#4: Oct 11 '05

re: Problem with pretty simple validation


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

"RobG" <rgqld@iinet.net.au> escribiķ en el mensaje
news:vuE2f.892$uQ6.44184@news.optus.net.au...[color=blue]
> Marc Llenas wrote:[color=green]
>> 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:[/color]
>
> 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.
>[color=green]
>>
>> <script language="JavaScript" type="text/javascript">[/color]
>
> The language attribute is depreciated, type is required:
>
> <script type="text/javascript">
>
>[color=green]
>> function checkform ( form )
>> {
>> if (form.txtDate.value == "")
>> {
>> alert( "Si us plau, seleccioneu la data del festiu solˇlicitat per
>> l'usuari" );[/color]
>
> Here is some error-inducing wrapping, more occurs elsewhere:
>
> alert( "Si us plau, seleccioneu la data del festiu"
> + " solˇlicitat per l'usuari" );
>[color=green]
>> 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))[/color]
>
> 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().
>[color=green]
>> {
>> alert("Format de data invālida (dd-mm-aaaa)");
>> form.txtDate.focus();
>> return false;
>> }
>> if ((form.txtDetails.value=="") && (form.CboType.value==7))[/color]
>
> 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) {
>[color=green]
>> {
>> 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;[/color]
>
> As you noted, these tests could be combined:
>
> var t = form.CboType[form.CboType.selectedIndex].value;
> if ((8==t || 7==t) && "" == form.txtDetails.value){
> ...
>[color=green]
>> }
>> return true;
>> }
>> </SCRIPT>
>>
>> The function is called by:
>>
>> <form method="post" name="frmMain" action="process.asp" onsubmit="return
>> checkform(this);" >[/color]
>
> 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);" >
>
> [...]
>[color=green]
>> <INPUT TYPE="text" NAME="txtDate" class="Days" STYLE="width:
>> 140px" readonly>
>> <A HREF="#" onClick="if(oDP)oDP.open(frmMain.txtDate);return
>> false;">[/color]
>
> 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;
> ">
>
> [...]
>
>
> --
> Rob[/color]


Closed Thread