検証要約が表示されたときに、検証サマリーのコンテナを表示します。

Question

次のマークアップがあります。 errorPanelは、最初にサーバー側の例外メッセージを表示するためにのみ使用され、そのようにうまく機能します。今度は、私の検証サマリーを同じ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> 

私の問題は今、必要な検証がクライアント側に起こるということである、と私はそれを維持したいので、私は、検証の概要を見えるようにするために、errorPanelを見えるようにするには、noサーバー側の機会を持っていません。

私には2つのオプションがあります：バリデーションサーバー側を行い、そこに自分のコードを使用してパネルを表示させるか、何らかの形でクライアント側のコードにフックして、要約を表示し、 errorPanelも表示させるようにしてください。どのように私は後者について行くことができますか？

Answer 1

これは実際にはお勧めしないアプローチですが、私はそれを書くのが楽しいですし、それはあなたに何か奇妙なアイデアにつながるかもしれません！

は

があなたのASPオフVisible="false"してください（私は生活を楽にするためにjQueryを使用していますP.S.）：パネルは、我々はそれをすべてのクライアント側やります。今

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

、文書準備時に、私たちはパネルを非表示になり、ASP.NETの検証コードを台無し。 evalの

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

は、ASP.NETのバリデータが生成されるValidatorCommonOnSubmit()機能を取り、それはその結果を返す直前に、それはその結果とmyValidatorHook()を呼び出すような場所でそれを修正します。

（私はアイデアを得た場所のためのthis StackOverflow questionを参照してください）今

、私たちのフック：十分

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

シンプル - バリデータは（ページを検証する）真を返した場合、パネルを非表示。 falseを返すと（ページが検証されなかった）、それを表示します。

自己責任で使用してください。 ASP.NETバリデータによって生成されたJavaScriptが変更された場合、これはひどく壊れますが、ASP.NET 2.0,3.5,4.0でテストしましたが、3つすべてで同じように動作しました。

Answer 2

ASP検証フィールドの周りにdivが含まれているのと同様の問題がありました。表示するエラーがあった場合にのみコンテナを表示したかったのです。

私は、Carson63000の答えに従ってコンテナを隠すためにjQueryを使いましたが、jQueryを使用してエラーの可視性を見て、何かが見える場合は再びコンテナを表示しました。私が追加し

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(); 
    } 
}); 

だけ明確化、他の明確化は、標準の検証フィールドは、デフォルトでvisibility: hiddenに設定されていることであるとDisplay="Dynamic"検証はとにかくdisplay: none

Answer 3

古い質問ですが、。

私は、これに対して簡単で清潔な解決法を見つけました。サーバー側はなく、JavaScriptは必要ありません。 errorPanelのコンテンツをValidationSummary Controlの見出しのテキストに置きます。 Like the MSDN site：

HeaderTextプロパティはHTMLエンコードされていません。したがって、HTMLタグは をHeaderTextに含めることができます。

あなたの例：

<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> 
... 

そしてPLBlumもMicrosoft asp.net forumでそれを釘付け：