Problem with pretty simple validation | | |
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%"> </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"> </td>
</tr>
<tr>
<td width="19%"> </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%"> </td>
<td align="right" width="68%">
</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 | | | | 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. | | | | 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 | | | | 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] |  | Similar JavaScript / Ajax / DHTML bytes | | | /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 226,439 network members.
|