Help - client side validation not working, driving me MAD!

[Alan Silver]

Hello,

I have some simple client-side Javascript validation that was working
fine until now. For some reason (don't ask me), it has stopped working
and I can't figure out why. I have switched to version 2.0 (from 1.1)
and have changed the page to use a master page, but other than that,
it's the same.

I am trying to validate the from date for a credit card to make sure the
date has already passed. The code is pretty straightforward. I have two
dropdown controls and a custom validator...

<aspropDownList ID="drpFromMonth" RunAt="server">
<asp:ListItem value="01">01/January</asp:ListItem>
.... etc ...
<asp:ListItem value="12">12/December</asp:ListItem>
</aspropDownList>

<aspropDownList ID="drpFromYear" RunAt="server" />

<asp:CustomValidator ControlToValidate="drpFromMonth"
OnServerValidate="ValidateValidFrom"
ClientValidationFunction="ValidateValidFromDate" Display="Dynamic"
ErrorMessage="not valid yet" Text="not valid yet" Runat="Server" />

The values for drpFromYear are set in code. The client-side function
looks like this...

function ValidateValidFromDate(s, e) {
fromMonth = parseInt(document.aspnetForm.drpFromMonth.selectedIndex);
fromYear = parseInt(document.aspnetForm.drpFromYear.options[document.aspnetForm.drpFromYear.selectedIndex].value);
now = new Date;
nowMonth = now.getMonth();
nowYear = now.getYear();
dateOK = false;
if (fromYear > nowYear) {
dateOK = false;
}
if (fromYear == nowYear) {
if (fromMonth <= nowMonth) {
dateOK = true;
} else {
dateOK = false;
}
}
if (fromYear < nowYear) {
dateOK = true;
}
e.IsValid = dateOK;
}

I originally had document.form1.drpFromMonth in there, which worked.
Since I had this error, I tried changing it to
document.aspnetForm.drpFromMonth as that uses the form name that is
generated by the framework. I tried setting the form's id myself, but it
was ignored. Whatever I did, the generated page had aspnetForm as the
form name and ID. I changed my client-side code to use this, but it
still didn't work.

When I try the page, I get an error...

document.aspnetForm.drpFromMonth.selectedIndex is null or not an object

I have tried various variations, like document.forms[0].drpFromMonth and
document.all["drpFromMonth"], but with the same result.

Anyone any idea how to get this to work? TIA

 

[Rajeev Gopal]

Hi Alan,

Can you try RegisterClientScript method, in the Page_Load event?

Thanks,
Rajeev Gopal
www.geekswithblogs.net/rajeevgopal

 

[Alan Silver]

I have some simple client-side Javascript validation that was working

fine until now. For some reason (don't ask me), it has stopped working
and I can't figure out why. I have switched to version 2.0 (from 1.1)
and have changed the page to use a master page, but other than that,
it's the same.

OK, I think I have found out the problem more specifically, but haven't
yet found an answer. Maybe if I clarify what's happening, someone may be
able to help.

Consider the following simple (air) code...

</form id="form1" runat="server">
<asp:Textbox id="txtName" runat="server" />
</form>

When used on a normal (master-less) page, the HTML that is emitted looks
something like this...

<form action="http://whatever/page.aspx" method="post">
<input type="text" id="txtName">
</form>

If you now use the same code in a master page, it looks very different.
Specifically, the id of the textbox is *not* the same as the one you
specified, it is something like "ctl00_cphMainBody_txtName", where
"cphMainBody" is the id of the contentplaceholder control in the master
page.

Furthermore, any id you give the form is ignored, and the id is set to
"aspnetForm". This looks like a bug in the framework to me. Sure I can
use "aspnetForm" in my Javascript, but who says that autogenerated name
won't change in another version of the framework? At least when I set
the id, I know what it will be. I can find ways around that (like using
document.forms[0]), but it still leaves the more serious problem...

How do I get a reference to the text box in client-side Javascript? I
can't predict what the text box's id will be. Any client-side validation
that needs to reference a control not passed as a parameter cannot be
referenced.

Anyone any comments? This seems like a major problem with using master
pages. I can see *why* it's happening, but I can't see any way of
getting around it.

 

[Alan Silver]

OK, I think I have found out the problem more specifically, but haven't

yet found an answer.

<g>Predictably, I found an answer shortly after posting.

http://forums.asp.net/1119696/ShowPost.aspx explains that you need to
use server-side code to write the ClientID of the control into the
Javascript. I found that the code shown there didn't work, but when
changed to...

alert(document.forms[0].<%= txtName.ClientID %>.value);

it worked fine. When the page is rendered, the Javascript looks
something like...

alert(document.forms[0].ctl00_cphMainBody_txtName.value);

which is what I wanted ;-)

I still reckon the other issue with the id of the form tag is a bug
though. I would be interested to hear anyone else's opinion on this.

 

[Edwin Knoppert]

me.textbox1.clientid

insert it in js in <%= %> tags

 

[n33470]

Alan,

I can't tell from your sample code, but you will need to
programmatically build your JS function "ValidateValidFromDate". As
you programmatically build that function, instead of "hardwiring" the
reference to the drop down list by doing this:
"document.aspnetForm.drpFromMonth". You should reference ClientId
properties of your controls to get the actual name that will appear in
HTML, substitute those in your function.

For example, you could do something like the following (literalJSScript
is an ASP.NET Literal server control placed on the page somewhere):

literalJScript.Text += "<script language=\"javaScript\" >";
literalJScript.Text += "function ValidateValidFromDate() { ";
literalJScript.Text += " var drpFormDate = document." +
this.Form.ClientId+"[\"" + drpFromDate.ClientID +"\"]; ";

Does this make sense?

 

[Alan Silver]

Does this make sense?

Lots!! It's very similar to the answer I found and posted just a few
minutes ago (which may not have appeared on the server yet). The way I
was doing was to use <%= txtName.ClientID %> in an otherwise normal
<script> block, but the principle is the same. I prefer the way I
showed, simply because the Javascript is easier to read, so easier to
debug. Both would work as well.

Thanks for the reply.

 

[Alan Silver]

me.textbox1.clientid

insert it in js in <%= %> tags

Thanks, I found that just after posting (and posted it for others to
see, but it might not be visible yet).

Thanks very much for the reply.

Hello,

I have some simple client-side Javascript validation that was working fine
until now. For some reason (don't ask me), it has stopped working and I
can't figure out why. I have switched to version 2.0 (from 1.1) and have
changed the page to use a master page, but other than that, it's the same.

I am trying to validate the from date for a credit card to make sure the
date has already passed. The code is pretty straightforward. I have two
dropdown controls and a custom validator...

<aspropDownList ID="drpFromMonth" RunAt="server">
<asp:ListItem value="01">01/January</asp:ListItem>
... etc ...
<asp:ListItem value="12">12/December</asp:ListItem>
</aspropDownList>

<aspropDownList ID="drpFromYear" RunAt="server" />

<asp:CustomValidator ControlToValidate="drpFromMonth"
OnServerValidate="ValidateValidFrom"
ClientValidationFunction="ValidateValidFromDate" Display="Dynamic"
ErrorMessage="not valid yet" Text="not valid yet" Runat="Server" />

The values for drpFromYear are set in code. The client-side function looks
like this...

function ValidateValidFromDate(s, e) {
fromMonth = parseInt(document.aspnetForm.drpFromMonth.selectedIndex);
fromYear =

parseInt(document.aspnetForm.drpFromYear.options[document.aspnetForm.dr
pFromYear.selectedIndex].value);
now = new Date;
nowMonth = now.getMonth();
nowYear = now.getYear();
dateOK = false;
if (fromYear > nowYear) {
dateOK = false;
}
if (fromYear == nowYear) {
if (fromMonth <= nowMonth) {
dateOK = true;
} else {
dateOK = false;
}
}
if (fromYear < nowYear) {
dateOK = true;
}
e.IsValid = dateOK;
}

I originally had document.form1.drpFromMonth in there, which worked. Since
I had this error, I tried changing it to
document.aspnetForm.drpFromMonth as that uses the form name that is
generated by the framework. I tried setting the form's id myself, but it
was ignored. Whatever I did, the generated page had aspnetForm as the form
name and ID. I changed my client-side code to use this, but it still
didn't work.

When I try the page, I get an error...

document.aspnetForm.drpFromMonth.selectedIndex is null or not an object

I have tried various variations, like document.forms[0].drpFromMonth and
document.all["drpFromMonth"], but with the same result.

Anyone any idea how to get this to work? TIA

 

[n33470]

Alan,

With respect to the formName....that's not a bug. It comes from the
fact that the form on your ASPX page is not named with the "id"
attribute. If the "id" is not specified ASP.NET assigns a default name
to the form. In previous versions of ASP.NET the default was the name
of the class (which I like better), but in ASP.NET 2.0 the default name
is somewhat non-deterministic. If you use need the form's name, you
can use the ClientId property of that as well.

I'm working through this exact problem right now because we have
automated testing tools which depend on the full JavaScript object name
of the form. I'm adding code to our base page class that will assign a
better ID to the form. If interested, here it is:

if (this.Form != null && this.Form.ID == null)
{
string pageName = this.GetType().BaseType.Name;
this.Form.ID = pageName;
}

--steve

 

[Alan Silver]

Steve,

Thanks for the reply. I was surprised to think that such a bug could
have got this far!! See below...

With respect to the formName....that's not a bug. It comes from the
fact that the form on your ASPX page is not named with the "id"
attribute. If the "id" is not specified ASP.NET assigns a default name
to the form. In previous versions of ASP.NET the default was the name
of the class (which I like better),

Hmm, my 1.1 code set the id of the form and that was used, not the class
name. I had the opening part of the form tag in a user control, so it
was common to all pages. I always got an id of "form1", which was what I
set.

but in ASP.NET 2.0 the default name
is somewhat non-deterministic. If you use need the form's name, you
can use the ClientId property of that as well.

I actually found it worked better using document.forms[0] instead of the
form id.

<snip>

Thanks for the reply