CODEWITHSUNDEEP
asp.netvalidation
ProfK
ProfK

Reputation: 51084

Make the container of a validation summary visible when the validation summary becomes visible

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?

Upvotes: 1

Views: 3696

Answers (3)

RenatoIvancic
RenatoIvancic

Reputation: 2092

Old question, but anyway.

I found one simple and clean solution to this. No server-side, no javascript needed. You can simply put your content of errorPanel in HeaderText of ValidationSummary Control. Like said on MSDN site:

The HeaderText property is not HTML encoded. Therefore, HTML tags can be included in HeaderText.

Your example:

<asp:ValidationSummary ID="validationSummary" runat="server" EnableClientScript="true"  CssClass="error"
HeaderText='<div style="float: right;"><a href="#" class="error-close" style="font-size: 10px">Close</a></div><span ID="errorLabel" runat="server"></span>'/>
<fieldset>
...

And PLBlum also nailed it on Microsoft asp.net forum:

Upvotes: 0

Alan Whitelaw
Alan Whitelaw

Reputation: 16900

I had a similar problem where I had a containing div around a set of ASP validation fields, I wanted to only show the container if there was an error to show.

I used jQuery to hide the container as per Carson63000's answer, but then used jQuery to look at the visibility of the errors and show the container again if something was visible.

jQuery(function () {
    jQuery(".checkout-validation").hide();
    var show = false;
    jQuery(".checkout-validation span").each(function () {
        if (jQuery(this).css('display') != 'none' && jQuery(this).css('visibility') != 'hidden') {
            show = true;
        }
    });
    if (show == true) {
        jQuery(".checkout-validation").show();
    }
});

The only clarification other clarification I would add is that standard validation fields are set to visibility: hidden by default and Display="Dynamic" validations are display: none

Upvotes: 0

Carson63000
Carson63000

Reputation: 4232

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.

Upvotes: 2

Related Questions