Disable ASP.NET 1.1 Validator using JavaScript - Not Working in Firefox

Question

The following attempt works in IE8 but not in Firefox (cannot use JQuery for this):

case 'Template:templateControl:residenceRBL2': 
    if (selected.value == 'Within USA') 
    {
        /* Enable zip textbox and validator */
 document.getElementById("Template_templateControl_zipTxt1").disabled=false;
 ValidatorEnable(document.getElementById('<%=firstPersonZipReqVal.ClientID%>'),
            true);
 ...
    }
    else if (selected.value == 'Outside USA') 
    {
        /* Disable zip textbox and validator */
 document.getElementById("Template_templateControl_zipTxt1").disabled=true;
 ValidatorEnable(document.getElementById('<%=firstPersonZipReqVal.ClientID%>'),
            false);
 ...
    }
    break;

    <asp:Label ID="firstPersonZipLabel" Runat="server"></asp:Label><br />
 <asp:TextBox ID="zipTxt1" Height="19" Width="100" 
        Runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="firstPersonZipReqVal" 
        ControlToValidate="zipTxt1" Display="Dynamic" 
            ErrorMessage="First Person Zip" 
                Runat="server">*</asp:RequiredFieldValidator>

Description of problem: depending on a radiobuttonlist selection, a required validator is disabled/re-enabled for a textbox. Basically, if their address is outside USA, then the zip textbox validator is disabled. In Firefox, this will not work at all.

UPDATE 1: 09-07-2010 I got the textbox disabled in Firefox; I was using the name attribute instead of the id. My only issue now is how to access the "ClientID" of an ASP.NET validator control in JS?

UPDATE 2: 09-07-2010 Per the MSDN documentation, I thought I could do something like this:

ValidatorEnable(firstPersonZipReqVal, false);

Unfortunately this doesn't seem to work in Firefox either...

http://stackoverflow.com/questions/422554/asp-net-broken-rendering-of-validation-client-side-code-in-firefox

UPDATE 3: 09-08-2010

The reason Firefox is not playing nice is because ASP.NET 1.1 is treating it as a down-level browser. If I put clientTarget="upLevel" in the Page tag, Firefox works as expected. Unfortunately, this breaks the entire site layout. Is there a more gradual way to fix the browsercaps for Firefox? This version of browserCaps also breaks the layout.

Current browserCaps in Web.Config look like this:

 <browserCaps> 
  <case match="Gecko/[-\d]+">
   browser=Netscape
   frames=true
   tables=true
   cookies=true
   javascript=true
   javaapplets=true
   ecmascriptversion=1.5
   w3cdomversion=1.0
   css1=true
   css2=true
   xml=true
   tagwriter=System.Web.UI.HtmlTextWriter
   <case match="rv:1.0[^\.](?'letters'\w*)">
    version=6.0
    majorversion=6
    minorversion=0
    <case match="^b" with="${letters}">
     beta=true
    </case>
   </case>
   <case match="rv:1(\.\d+)(\.\d)?(?'letters'\w*)">
    version=7.0
    majorversion=7
    minorversion=0
    <case match="^b" with="${letters}">
     beta=true
    </case>
   </case>
  </case>
 </browserCaps>

UPDATE: 09-11-2010

The following link may provide the answer; can someone assist with the code for the 50 points?

http://www.4guysfromrolla.com/articles/051204-1.aspx

Answer 1

how to access the "ClientID" of an ASP.NET validator control in JS

You're accessing it the proper way in your code, though you may need to use double quotes instead of single quotes:

document.getElementById("<%=firstPersonZipReqVal.ClientID%>")

Answer 2

This is too long to add to a comment and is a separate stab at the answer from my above post.

I am straight copy-and-pasting this from a post about this issue, but a user tried something like this:

function disableValidator(elem)
{
    elem.style.cssText = "";
    elem.style.display = 'none';
    elem.style.accelerator = true;
}

disableValidator( document.getElementById("<%=firstPersonZipReqVal.ClientID%>") );

Answer 3

I believe that the problem here is that you call the Javascript before the DOM is ready, so thats why can not find your elements with the getElementByID.

There are 2 solutions.

1. Render your JavaScript on the bottom of the page, at least after your controls.
2. Place your Javascript call on a function and first call it with window.onload.

And for sure you need to call them with the palswim suggestion using <%=firstPersonZipReqVal.ClientID%>

I am not 100% that this is the issue because I do not see the full code, but this is the main reason when the getElementByID is not find an existing control.

Answer 4

Marked as answer - see link to Scott Mitchell's article on this above.