Rendre le conteneur d'un résumé de validation visible lorsque le résumé de validation devient visible

Question

J'ai le balisage suivant. Le errorPanel a d'abord été utilisé uniquement pour afficher les messages d'exception côté serveur, et fonctionne très bien comme ça. Maintenant, je voudrais intégrer mon résumé de validation dans le même .

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

Mon problème est maintenant que la validation requise arrive côté client, et je veux garder cela, donc je n'ai pas eu l'occasion de côté serveur pour rendre errorPanel visible, afin de rendre le résumé de validation visible. Je vois que j'ai deux options: Faire le côté serveur de validation, et utiliser mon code là pour rendre le panneau visible, ou accrocher le code côté client en quelque sorte et attraper un événement là quand le résumé devrait être rendu visible, puis également rendre le errorPanel visible. Comment pourrais-je aller à propos de ce dernier?

Answer 1

Voici une approche qui n'est vraiment pas recommandée, mais je me suis amusé à l'écrire, et cela pourrait vous mener à des idées loufoques!

(P.S. J'utilise jQuery pour rendre la vie plus facile)

Prenez le Visible="false" votre asp: Panel, nous ferons tout côté client. Maintenant, au moment de la préparation du document, nous allons cacher le panneau et jouer avec le code de validation d'ASP.NET.

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

Ce eval prend la fonction ValidatorCommonOnSubmit() qui est généré par les validateurs ASP.NET, et il modifie en place pour juste avant qu'il ne retourne son résultat, il appelle myValidatorHook() avec ce résultat.

(voir this StackOverflow question pour où j'ai eu l'idée)

Maintenant, notre crochet:

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

assez simple - si le validateur retourne vrai (page valide), masquer le panneau; si elle renvoie false (la page n'a pas été validée), affichez-la. Utilisation à vos risques et périls!

Si le JavaScript généré par les validateurs ASP.NET change, cela se gâte horriblement - mais je l'ai testé dans ASP.NET 2.0, 3.5 et 4.0, et ça a fonctionné de la même manière dans les trois.

Answer 2

J'ai eu un problème similaire où j'avais un contenant div autour d'un ensemble de champs de validation ASP, je voulais montrer seulement le conteneur s'il y avait une erreur à afficher.

J'ai utilisé jQuery pour masquer le conteneur selon la réponse de Carson63000, mais j'ai ensuite utilisé jQuery pour voir la visibilité des erreurs et montrer à nouveau le conteneur si quelque chose était 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(); 
    } 
}); 

La seule précision autre précision que je voudrais ajouter est que les champs de validation standard sont mis à visibility: hidden par défaut et Display="Dynamic" validations sont display: none

Answer 3

vieille question, mais de toute façon.

J'ai trouvé une solution simple et propre à cela.Pas de serveur, pas de javascript nécessaire. Vous pouvez simplement mettre votre contenu de errorPanel dans HeaderText ValidationSummary Control. Comme l'a dit sur MSDN site:

La propriété HeaderText n'est pas codés en HTML. Par conséquent, les balises HTML peuvent être incluses dans HeaderText.

Votre exemple:

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

Et PLBlum aussi clouée sur Microsoft asp.net forum: