Question

I have the following markup. The errorPanel was first only used to show server side exception messages, and works fine like that. Now I’d like to incorporate my validation summary into that same errorPanel.

<asp:Panel ID="errorPanel" runat="server" CssClass="error" Visible="false">
    <div style="float: right;">
        <a href="#" class="error-close" style="font-size: 10px">Close</a></div>
    <asp:Label ID="errorLabel" runat="server"></asp:Label>
    <asp:ValidationSummary ID="validationSummary" runat="server" EnableClientScript="true" />
</asp:Panel>
<fieldset>
    <legend>Create New Role</legend><asp:Label ID="newRoleNameLabel" runat="server" AssociatedControlID="newRoleNameText">Role Name:</asp:Label>
    <asp:TextBox ID="newRoleNameText" runat="server" Width="100px"></asp:TextBox>
    <asp:RequiredFieldValidator ID="newRoleNameRequired" runat="server" EnableClientScript="true" ControlToValidate="newRoleNameText" Display="Dynamic" ErrorMessage="Please enter a role name.">*</asp:RequiredFieldValidator>
    <asp:Button ID="createButton" runat="server" Text="Create" OnClick="createButton_Click" />
</fieldset>

My problem now is that the required validation happens client side, and I want to keep that, so I have no server side opportunity to make errorPanel visible, in order to make the validation summary visible.

I see I have two options: Do validation server side, and use my code there to make the panel visible, or hook into the client side code somehow and catch an event there when the summary should be made visible, and then also make the errorPanel visible. How could I go about the latter?

Answer 1

Here is an approach which is really not recommended, but I had fun writing it, and it might lead you to some zany ideas!

(p.s. I am using jQuery to make life easier)

Take the Visible="false" off your asp:Panel, we’ll do it all client side.

<asp:Panel ID="errorPanel" runat="server" CssClass="error">

Now, at document ready time we will hide the panel, and mess with ASP.NET’s validation code.

$(document).ready(function () {
    // This is more like it!
    $("#<% =errorPanel.ClientID %>").hide();
    eval('ValidatorCommonOnSubmit = ' + ValidatorCommonOnSubmit.toString().replace('return result;', 'myValidatorHook(result); return result;'));
});

That eval takes the ValidatorCommonOnSubmit() function which is generated by the ASP.NET validators, and modifies it in place so just before it returns its result, it calls myValidatorHook() with that result.

(see this StackOverflow question for where I got the idea)

Now, our hook:

function myValidatorHook(validated) {
    if (validated) {
        $("#<% =errorPanel.ClientID %>").hide();
    }
    else {
        $("#<% =errorPanel.ClientID %>").show();
    }
}

Simple enough – if the validator returned true (page validates), hide the panel; if it returned false (page did not validate), show it.

Use at your own risk! If the JavaScript generated by the ASP.NET validators changes, this will break horribly – but I did test it in ASP.NET 2.0, 3.5 and 4.0, and it worked the same in all three.