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

Discussion in 'ASP .Net' started by Alan Silver, Dec 5, 2005.

  1. Alan Silver

    Alan Silver Guest

    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...

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

    <asp:DropDownList 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

    --
    Alan Silver
    (anything added below this line is nothing to do with me)
     
    Alan Silver, Dec 5, 2005
    #1
    1. Advertising

  2. Alan Silver

    Rajeev Gopal Guest

    Rajeev Gopal, Dec 5, 2005
    #2
    1. Advertising

  3. Alan Silver

    Alan Silver Guest

    >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
    (anything added below this line is nothing to do with me)
     
    Alan Silver, Dec 6, 2005
    #3
  4. Alan Silver

    Alan Silver Guest

    >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.

    --
    Alan Silver
    (anything added below this line is nothing to do with me)
     
    Alan Silver, Dec 6, 2005
    #4
  5. me.textbox1.clientid

    insert it in js in <%= %> tags


    "Alan Silver" <> schreef in bericht
    news:...
    > 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...
    >
    > <asp:DropDownList ID="drpFromMonth" RunAt="server">
    > <asp:ListItem value="01">01/January</asp:ListItem>
    > ... etc ...
    > <asp:ListItem value="12">12/December</asp:ListItem>
    > </asp:DropDownList>
    >
    > <asp:DropDownList 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
    >
    > --
    > Alan Silver
    > (anything added below this line is nothing to do with me)
     
    Edwin Knoppert, Dec 6, 2005
    #5
  6. Alan Silver

    n33470 Guest

    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?
     
    n33470, Dec 6, 2005
    #6
  7. Alan Silver

    Alan Silver Guest

    <snip>
    >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
    (anything added below this line is nothing to do with me)
     
    Alan Silver, Dec 6, 2005
    #7
  8. Alan Silver

    Alan Silver Guest

    >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.

    >"Alan Silver" <> schreef in bericht
    >news:...
    >> 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...
    >>
    >> <asp:DropDownList ID="drpFromMonth" RunAt="server">
    >> <asp:ListItem value="01">01/January</asp:ListItem>
    >> ... etc ...
    >> <asp:ListItem value="12">12/December</asp:ListItem>
    >> </asp:DropDownList>
    >>
    >> <asp:DropDownList 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
    >>
    >> --
    >> Alan Silver
    >> (anything added below this line is nothing to do with me)

    >
    >


    --
    Alan Silver
    (anything added below this line is nothing to do with me)
     
    Alan Silver, Dec 6, 2005
    #8
  9. Alan Silver

    n33470 Guest

    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
     
    n33470, Dec 6, 2005
    #9
  10. Alan Silver

    Alan Silver Guest

    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

    --
    Alan Silver
    (anything added below this line is nothing to do with me)
     
    Alan Silver, Dec 6, 2005
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paul King

    ASP_WP driving me mad...

    Paul King, Sep 24, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    487
    Paul King
    Sep 24, 2004
  2. Marc

    Footer driving me mad

    Marc, Jul 8, 2003, in forum: HTML
    Replies:
    19
    Views:
    710
  3. DaLoverhino

    J2EE is driving me mad.

    DaLoverhino, Jun 26, 2006, in forum: Java
    Replies:
    2
    Views:
    286
  4. Grey Knight

    An error which is driving me slowly mad

    Grey Knight, Oct 14, 2004, in forum: C Programming
    Replies:
    2
    Views:
    315
    Rouben Rostamian
    Oct 14, 2004
  5. Allan Wenham
    Replies:
    3
    Views:
    205
    Allan Wenham
    Oct 27, 2004
Loading...

Share This Page