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

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?

https://web.archive.org/web/20211020134119/https://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

well, question is very old, but fr1.1 still alive - actually Mitchell's article does not provide workaround, let me show mine:
1. Web config browserCaps should contain "msdomversion", something be like this:

        <browserCaps>
        <case match="^Mozilla/5\.0 \([^)]*\) (Gecko/[-\d]+)(?'VendorProductToken' (?'type'[^/\d]*)([\d]*)/(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*)))?">
            browser=Gecko
            <filter>
                <case match="(Gecko/[-\d]+)(?'VendorProductToken' (?'type'[^/\d]*)([\d]*)/(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*)))">
                type=${type}
                </case>
                <case>
                    <!-- plain Mozilla if no VendorProductToken found -->
                type=Mozilla
                </case>
            </filter>
            frames=true
            tables=true
            cookies=true
            javascript=true
            javaapplets=true
            ecmascriptversion=1.2 
            w3cdomversion=1.0
            css1=true
            css2=true
            xml=true
            msdomversion=6.0
            tagwriter=System.Web.UI.HtmlTextWriter
            <case match="rv:(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*))">
                version=${version}
                majorversion=0${major}
                minorversion=0${minor}
                <case match="^b" with="${letters}">
                    beta=true
                </case>
            </case>
        </case>
        <case match="Chrome/(?'version'(?'major'\d+)\.(?'minor'\d+\.\d+).\d+)">
            browser=Chrome
            version=${version}
            majorversion=${major}
            minorversion=${minor}
            frames=true
            tables=true
            cookies=true
            javascript=true
            javaapplets=true
            ecmascriptversion=1.5
            w3cdomversion=1.0
            msdomversion=6.0
            css1=true
            css2=true
            xml=true
            tagwriter=System.Web.UI.HtmlTextWriter
        </case>
    </browserCaps>

2. WebUIValidation.js should be modified:
2.1 replace calls to document.all by document.getElementById (Mitchell)
2.2 rename variable "final" (Mitchell)
2.3 add function to read expando as attributes:

function ValidatorValidatorGetAttribute(item, attribName)
{
    var retVal = null;
    var attribs = item.attributes;
    for (var i = attribs.length - 1; i >= 0; i--)
    {
        var attrib = attribs[i];
        if (attrib.nodeName == attribName)
        {
            retVal = attrib.nodeValue;
        }
    }
    return retVal;
}

2.4 add expando handling logic, for example in ValidatorOnLoad:

if (typeof(val.evaluationfunction) == "string") {
    eval("val.evaluationfunction = " + val.evaluationfunction + ";");
}
else
if (typeof(ValidatorGetAttribute(val,'evaluationfunction')) == "string") {
    eval("val.evaluationfunction = " + ValidatorGetAttribute(val,'evaluationfunction') + ";");
}

3. Add client side script on the page (automatic script checks if it runs on IE browser only)

var nonIEBrowser = false;
if (typeof(clientInformation) == "undefined")
    nonIEBrowser = true;
if ((typeof(clientInformation) != "undefined") && (clientInformation.appName.indexOf("Explorer") == -1))
    nonIEBrowser = true;
//None - IE browsers, and possibly IE 10+ 
if (nonIEBrowser) 
{
    if (typeof(Page_ValidationVer) == "undefined")
        alert("Unable to find script library '/aspnet_client/system_web/1_1_4322/WebUIValidation.js'. Try placing this file manually, or reinstall by running 'aspnet_regiis -c'.");
    else if (Page_ValidationVer != "125")
        alert("This page uses an incorrect version of WebUIValidation.js. The page expects version 125. The script library is " + Page_ValidationVer + ".");
    else
        ValidatorOnLoad();
}

that's all. At least it works for me :)

Answer 3

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 4

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 5

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