H
Hong Hao
Recently, I was trying to modify an existing aspx page when client-side
validation on that page stopped working. I searched this group and the web
in general and found that other people have had the same issue. However,
none of the suggested fixes solved my particular problem. I tracked down the
cause of the problem, which is related to aspx page parser's handling of
controls inside html comments. The problem may be quite common and well
known. However, since I was not able to find an explanation anywhere, I am
going post my findings in case others run into the same issue.
The problem is related to how aspx page parser translates apsx controls
inside html comments. For example, the following code
<!--
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
-->
generates the following html
<!--
<input name="TextBox1" type="text" id="TextBox1" />
-->
Essentially, the parser ignores the comment and renders the control in html.
This presents no problem because the rendered html is enclosed inside html
comment and will be ignored by the browser. However, if there is a
validation control inside a html comment, such as the code below,
<!--
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator id="rfvTextBox1" runat="server"
ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
-->
a problem occurs. The parser translates this comment into
<!--
<input name="TextBox1" type="text" id="TextBox1" />
<span id="rfvTextBox1" controltovalidate="TextBox1"
evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue=""
style="color:Red;visibility:hidden;"></span>
-->
The parser also adds the following javascript to the rendered page
<script language="javascript" type="text/javascript">
<!--
var Page_Validators = new Array(document.all["rfvFName"],
document.all["rfvLName"], document.all["rfvEmail"],
document.all["rfvTextBox1"]);
// -->
</script>
In addition to the required field validator shown above, there are several
other validation controls on my page and all of them are listed in the array
Page_Validators. The issue is that document.all["rfvTextBox1"] always
returns null because it is enclosed inside html comment. The problem hits
home when client-side validation is initialized during a page load. Below is
the initialization function, copied exactly from WebUIValidation.js,
function ValidatorOnLoad() {
if (typeof(Page_Validators) == "undefined")
return;
var i, val;
for (i = 0; i < Page_Validators.length; i++) {
val = Page_Validators;
if (typeof(val.evaluationfunction) == "string") {
eval("val.evaluationfunction = " + val.evaluationfunction +
";");
}
if (typeof(val.isvalid) == "string") {
if (val.isvalid == "False") {
val.isvalid = false;
Page_IsValid = false;
}
else {
val.isvalid = true;
}
} else {
val.isvalid = true;
}
if (typeof(val.enabled) == "string") {
val.enabled = (val.enabled != "False");
}
ValidatorHookupControlID(val.controltovalidate, val);
ValidatorHookupControlID(val.controlhookup, val);
}
Page_ValidationActive = true;
}
This function hooks up each validators defined in the Page_Validators array.
However, as in the example given above, the last validator is null and the
code does not guard against nulls! This results in an exception, and the
variable Page_ValidationActive is never set to true, effectively turning off
client-side validation.
Hong Hao
validation on that page stopped working. I searched this group and the web
in general and found that other people have had the same issue. However,
none of the suggested fixes solved my particular problem. I tracked down the
cause of the problem, which is related to aspx page parser's handling of
controls inside html comments. The problem may be quite common and well
known. However, since I was not able to find an explanation anywhere, I am
going post my findings in case others run into the same issue.
The problem is related to how aspx page parser translates apsx controls
inside html comments. For example, the following code
<!--
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
-->
generates the following html
<!--
<input name="TextBox1" type="text" id="TextBox1" />
-->
Essentially, the parser ignores the comment and renders the control in html.
This presents no problem because the rendered html is enclosed inside html
comment and will be ignored by the browser. However, if there is a
validation control inside a html comment, such as the code below,
<!--
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator id="rfvTextBox1" runat="server"
ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
-->
a problem occurs. The parser translates this comment into
<!--
<input name="TextBox1" type="text" id="TextBox1" />
<span id="rfvTextBox1" controltovalidate="TextBox1"
evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue=""
style="color:Red;visibility:hidden;"></span>
-->
The parser also adds the following javascript to the rendered page
<script language="javascript" type="text/javascript">
<!--
var Page_Validators = new Array(document.all["rfvFName"],
document.all["rfvLName"], document.all["rfvEmail"],
document.all["rfvTextBox1"]);
// -->
</script>
In addition to the required field validator shown above, there are several
other validation controls on my page and all of them are listed in the array
Page_Validators. The issue is that document.all["rfvTextBox1"] always
returns null because it is enclosed inside html comment. The problem hits
home when client-side validation is initialized during a page load. Below is
the initialization function, copied exactly from WebUIValidation.js,
function ValidatorOnLoad() {
if (typeof(Page_Validators) == "undefined")
return;
var i, val;
for (i = 0; i < Page_Validators.length; i++) {
val = Page_Validators;
if (typeof(val.evaluationfunction) == "string") {
eval("val.evaluationfunction = " + val.evaluationfunction +
";");
}
if (typeof(val.isvalid) == "string") {
if (val.isvalid == "False") {
val.isvalid = false;
Page_IsValid = false;
}
else {
val.isvalid = true;
}
} else {
val.isvalid = true;
}
if (typeof(val.enabled) == "string") {
val.enabled = (val.enabled != "False");
}
ValidatorHookupControlID(val.controltovalidate, val);
ValidatorHookupControlID(val.controlhookup, val);
}
Page_ValidationActive = true;
}
This function hooks up each validators defined in the Page_Validators array.
However, as in the example given above, the last validator is null and the
code does not guard against nulls! This results in an exception, and the
variable Page_ValidationActive is never set to true, effectively turning off
client-side validation.
Hong Hao