Autour d'un ValidationSummary avec une boîte via CSS

Par défaut Html.ValidationSummary() produit HTML comme ceci:Autour d'un ValidationSummary avec une boîte via CSS

<span class="validation-summary-errors">There were some errors...</span> 
<ul class="validation-summary-errors"> 
    <li>First Name too long</li> 
    <li>Invalid Email Address</li> 
</ul>

Je voudrais sélectionner le résumé de toute validation et ajouter un cadre de sélection autour d'elle via CSS, donc je suis d'ajouter une classe CSS comme ceci:

.validation-summary-errors{ 
background-color:#D9FFB2; 
border: 1px solid #5CBA30; 
color:#000000; 
margin-top:15px; 
margin-bottom:15px; 
}

maintenant, le problème est que cela attire des boîtes séparées autour du message récapitulatif de validation et chaque message d'erreur. Certainement pas ce que j'avais en tête.

je peux ajouter un div autour du résumé comme ça, mais cela se traduira par une boîte rouge vide s'il n'y a pas d'erreurs de validation, donc ce n'est pas ainsi:

<div class="my-validation-summary"> 
     <h2> 
      <%=Model.Message%> 
     </h2> 
     <%= Html.ValidationSummary("There were some errors...")%> 
    </div>

Je peux penser à plusieurs façons de résoudre ce:

Ajouter un div englobante conditionnellement avec des balises côté serveur
Ajouter un div englobante via jQuery
écrire ma propre e wrapper HtmlHelper à l'impression un ValidationSummary CSS-friendly

Cependant, tout cela semble assez gênant pour résoudre une tâche aussi simple. Il doit y avoir une meilleure façon de faire cela. Peut-être une autre façon d'écrire la classe CSS, donc je ne reçois pas une boîte vide quand il n'y a pas de résumé de validation?

Edit: Juste pour clarifier les choses, j'appelle l'aide html comme ceci:

<%=Html.ValidationSummary("There were some errors...") %>

Edit 2: était de voir la portée de cette question de savoir si je négligé mort facile quelque chose et évident. Il semble que je n'ai pas, donc je vais simplement ajouter ma propre fonction HtmlHelper qui correspond à mes besoins. Je vote pour clore ma propre question.

Source

2009-06-02 Adrian Grigore

Avez-vous personnalisé votre contrôle de résumé de validation? Il ne rend pas la même chose par défaut que vous l'avez posté. – RSolberg

Non, j'utilise simplement la méthode ValidationSummary de surcharge (voir la première édition ci-dessus) - Adrian Grigore il ya 13 secondes –

J'aime la façon dont la source MVC est disponible - ouvrez-le et écrivez le vôtre. bonne chance –

Voici quelques CSS qui fonctionne:

.validation-summary-errors { 
    background-color: #D9FFB2; 
    border:1px solid #5CBA30; 
    width: 400px; 
    } 
span.validation-summary-errors { 
    border-bottom-color: #D9FFB2; 
    display:block; 
    } 
ul.validation-summary-errors { 
    margin:0; 
    padding:0; 
    border-top:none; 
    }

Vous pourriez avoir à jouer avec les largeurs en fonction de votre autre css.

Modifier après commentaire

J'ai changé les erreurs de ul.validation-synthèse à zéro sur la marge et le rembourrage et enlevé la largeur. Il devrait fonctionner cross-navigateur maintenant.

Source

2009-06-02 16:13:13 Emily

Presque :-)! Cela fonctionne très bien dans Firefox 3, mais se brise dans IE 7. Voir http://content.screencast.com/users/sandra123/folders/Jing/media/a8523c9c-dfc7-44a4-8461-05d0e159677c/2009-06-02_1928 .png –

Est-ce que ma nouvelle version du code a fonctionné? Il devrait corriger la liste étant repoussée dans IE7. – Emily

Si vous avez eu un div enveloppant comme le deuxième exemple de code que vous avez fourni. Ensuite, il serait facile d'utiliser jQuery pour "déplacer" la classe d'erreur de l'étendue & ul vers cette div externe.

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(function() { 
     var className = "validation-summary-errors"; 
     $("." + className).removeClass(className).closest("div").addClass(className); 
    }); 
    </script> 
    <style type="text/css"> 
    .validation-summary-errors { border: solid 1px red; }, 
    </style> 
</head> 

<body> 
    <div> 
    <h2>My Modal Message</h2> 
    <span class="validation-summary-errors">There were some errors...</span> 
    <ul class="validation-summary-errors"> 
     <li>First Name too long</li> 
     <li>Invalid Email Address</li> 
    </ul> 
    </div> 
</body> 
</html>

Ce code va manipuler le HTML pour ressembler à ceci ...

<div class="validation-summary-errors"> 
    <h2>My Modal Message</h2> 
    <span class="">There were some errors...</span> 
    <ul class=""> 
     <li>First Name too long</li> 
     <li>Invalid Email Address</li> 
    </ul> 
    </div>

Source

2009-06-02 16:22:29 jessegavin

Comme je l'ai dit, je sais que c'est assez facile de résoudre ce problème avec jQuery. Mais cela semble être une solution plutôt gênante. –

Si je lis ce droit et que vous voulez une bordure sur la span.validation-summary-errors (et non sur le contenu interne) puis:

.validation-summary-errors  {border: 0 none transparent; /* set defaults for inner */ 
           } 

span.validation-summary-errors {background-color:#D9FFB2; /* sets the span */ 
           border: 1px solid #5CBA30; 
           color:#000000; 
           margin-top:15px; 
           margin-bottom:15px; 
           }

devrait le faire.

Ou, un peu moins fiable:

.validation-summary-errors  {background-color:#D9FFB2; 
           border: 1px solid #5CBA30; 
           color:#000000; 
           margin-top:15px; 
           margin-bottom:15px; 
           } 

.validation-summary-errors > .validation-summary-errors, 
.validation-summary-errors .validation-summary-errors 
           {border: 0 none transparent; /* should apply styles to */ 
           }       /* the children/descendants */ 
                  /* with the same name - untested though... */

Source

2009-06-02 17:39:14

Non, je veux une bordure unique qui entoure à la fois le résumé de validation et les messages. –

Une autre solution nécessaire.

@Html.ValidationSummary(false, "", new { @class = "YOUR CSS CLASS" })

Source

2017-11-01 20:07:14

Autour d'un ValidationSummary avec une boîte via CSS

Répondre

Questions connexes