Bug with Latest Google Chrome and ASP.NET Validation
Hello,
This is something that drove me insane today, I have a
dropdown control with a required field validator on this control. the
dropdown is also set to autopostback. Now up until after lunch today
this was working fine in chrome but after lunch it stopped. Turns out
my Chrome updated to the latest version which seemed to break
validation in the case which is shown below try the below on a page in
the latest Chrome you will see that a postback will not happen, remove
the validator and postback will work just fine.
Selected: <%= DropDown.SelectedValue %>
<asp:DropDownList ID="DropDown" runat="server" AutoPostBack="true">
<asp:ListItem Value="" Text=""></asp:ListItem>
<asp:ListItem Value="0" Text="0"></asp:ListItem>
<asp:ListItem Value="1" Text="1"></asp:ListItem>
<asp:ListItem Value="2" Text="2"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredTest" runat="server" ControlToValidate="DropDown" ErrorMessage="Must Select Item">
</asp:RequiredFieldValidator>
I thought this must be an issue in the validation library for ASP.NET and after time narrowed it down to the ValidatorHookupEvent method in the library:
function ValidatorHookupEvent(control, eventType, functionPrefix) {
var ev;
eval("ev = control." + eventType + ";");
if (typeof (ev) == "function") {
ev = ev.toString();
ev = ev.substring(ev.indexOf("{") + 1, ev.lastIndexOf("}"));
}
else {
ev = "";
}
var func;
if (navigator.appName.toLowerCase().indexOf('explorer') > -1) {
func = new Function(functionPrefix + " " + ev);
} else {
func = new Function("event", functionPrefix + " " + ev);
}
eval("control." + eventType + " = func;");
}
Now the line in bold is in question: func = new Function("event", functionPrefix + " " + ev);, this is wrapping the ev argument which is the original
onchange event on the dropdown in our case the postback and the ValidatorOnChange method, if you look at how chrome wraps the function in the
onchange when you view the value of func after it has wrapped the two together:
function anonymous(event) { ValidatorOnChange(event); with (this.ownerDocument ? this.ownerDocument : {}) { with (this.form ? this.form : {}) { with (this) { return (function(evt){javascript:setTimeout('__doPostBack(\'DropDown\',\'\')', 0)}).call(this, evt); } } } }
And in firefox the wrapping is not like chrome as you can see chrome has an evt argument where firefox is different:
function anonymous(event) { ValidatorOnChange(event);javascript: setTimeout("__doPostBack('DropDown','')", 0); } Now the thing to note in Chrome look at the onchange of the dropdown, say alert the items onchange event to view what it looks like, it has an evt argument which seems to cause the issue.
function onchange(evt) {with (this.ownerDocument ? this.ownerDocument : {}) { with (this.form ? this.form : {}) { with (this) { return (function(evt){javascript:setTimeout('__doPostBack(\'DropDown\',\'\')', 0)}).call(this, evt); } } }}
In firefox the onchange in firefox it uses an event argument and not evt like chrome.function onchange(event) {
javascript: setTimeout("__doPostBack('DropDown','')", 0);
}
I found a simmilar problem and got an answer: http://code.google.com/p/chromium/issues/detail?can=2&q=&colspec=ID%20Stars%20Pri%20Area%20Type%20Status%20Summary%20Modified%20Owner&sort=&id=650, Look at the bottom, particularly this comment:The additional function wrapper was added in r2111
(http://src.chromium.org/viewvc/chrome?view=rev&revision=2111) and has been in Chrome
from version 0.2.153.0.
From what I can see this is what is causing the issue, now who is at blame I cannot say but this is mighty anyoing :(, I knew this was working and for it to just
stop was painful and took some time to debug. But now that I know the issue it is time to tackle fixing it. There is a bit more that I have missed but it is late and I just got
down what I had for the moment. I will look into this more and keep you informed of what I come across.
Stay Tuned
Stefan