Client-side validation in Firefox

rbirkby — Wed, 01 Nov 2006 07:49:00 GMT

Recently, I was faced with a problem whereby client-side validation of controls failed to work in Firefox. Only server-side validation was working. Client side validation was working fine in IE.

This was puzzling as everything I read said that ASP.Net v2 supported client-side validation in Firefox. No amount of Googling helped to identify the problem, so I had to track it down from scratch - and the results were quite interesting. If you have

set in your web.config, then client-side validation is disabled in firefox.

To see why, we have to jump down into the validation framework that ASP.Net sends to the web browser. The actual Javascript validation function looks like:

function ValidatorValidate(val) {

val.isvalid = true;

if (val.enabled != false) {

if (typeof(val.evaluationfunction) == "function") {

val.isvalid = val.evaluationfunction(val);

}

ValidatorUpdateDisplay(val);

}

Using Venkman, I was able to see that val.evaluationfunction wasn't a function at all, therefore the page wasn't getting validated because of this. A bit more searching found that this evaluationfunction is an expando attribute. In ASP.Net v1, this expando is an IE-only HTML expando, defined directly in the HTML markup. In ASP.Net v2, this is a Javascript expando attribute, defined on the DOM via Javascript, and therefore compatible with both IE and Firefox.

For example, the RequiredFieldValidator calls RegisterExpandoAttribute. You can call this method yourself like:

Page.ClientScript.RegisterExpandoAttribute(TextBox1.ClientID, "value", TextBox1.Text);

This produces a block of Javascript just before the closing </form> tag like:

<!--

var TextBox1 = document.all ? document.all["TextBox1"] : document.getElementById("TextBox1");

TextBox1.value = "";

// -->

</script>

where "value" has become the new expando attribute. In the case of the RequiredFieldValidator, the expando name is" evaluationfunction" and it is added to the <span> representing the control at runtime.

It turned out that this block of Javascript wasn't being sent to Firefox in my situation, and I didn't know why. Instead, the evaluationfunction expando attribute was being rendered directly on the <span> element in HTML.

So after good deal of decompilation using Reflector, and debugging using Reflection Invokeing of private methods, I discovered the problem was that RegisterExpandoAttribute checks the XHTML Rendering Mode prior to generating the Javascript and if that rendering mode is set to Legacy, then the expando is rendered directly onto the <span> element and no Javascript code is rendered. The result of this is to prevent Firefox from performing client-side validation when Legacy XHTML mode is set.

I have no idea why the ASP.Net team chose to do this for validation. Perhaps the Legacy XHTML setting should have been called "ASPNetv1Conformance" because that's actually what it does. The docs for Legacy mode state:

"Reverts a number of rendering changes made for conformance to the v1.1 rendering behavior."

C# Nuggets : xhtml, expando

Client-side validation in Firefox