Circondati da un ValidationSummary con una scatola tramite CSS

Per impostazione predefinita Html.ValidationSummary() produce HTML come questo:Circondati da un ValidationSummary con una scatola tramite 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>

vorrei selezionare l'intero sommario di convalida e aggiungere un riquadro attorno ad esso tramite CSS, così mi sono l'aggiunta di una classe CSS come questo:

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

Ora il problema è che questo attira scatole separate attorno al messaggio di riepilogo di convalida e di ogni messaggio di errore. Certamente non quello che avevo in mente.

posso aggiungere un div intorno al riassunto in questo modo, ma questo si tradurrà in una scatola rossa vuota se non ci sono errori di convalida, quindi questo non è il modo:

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

mi viene in mente diversi modi per risolvere questo:

Aggiungi una delimitazione div condizionalmente con tag server-side
Aggiungi una delimitazione div tramite jQuery
scrivere il mio HtmlHelper involucro ° alle stampe un ValidationSummary CSS-friendly

Tuttavia, tutto questo sembra abbastanza imbarazzante per la risoluzione di un compito così semplice. Ci deve essere un modo migliore per farlo. Forse un altro modo di scrivere la classe CSS in modo da non ottenere una casella vuota quando non c'è un riepilogo di convalida?

Edit: Giusto per chiarire, sto chiamando l'helper HTML come questo:

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

Edit 2: Lo scopo di questa domanda è stato quello di vedere se ho trascurato qualcosa di morto-facile e ovvio. Sembra che non l'abbia fatto, quindi aggiungerò semplicemente la mia funzione HtmlHelper che si adatta alle mie esigenze. Sto votando per chiudere la mia domanda.

fonte

2009-06-02 Adrian Grigore

Hai personalizzato il controllo di riepilogo della convalida? Non esegue il rendering allo stesso modo per impostazione predefinita come è stato pubblicato. – RSolberg

No, sto solo usando il metodo ValidationSummary di overload (vedi prima modifica sopra) - Adrian Grigore 13 secondi fa –

Mi piace come è disponibile la sorgente MVC: aprila e scrivi la tua. buona fortuna –

Ecco alcuni CSS che funziona:

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

Potrebbe essere necessario giocare con la larghezza a seconda del vostro altro CSS.

Edit dopo il commento

ho cambiato ul.validation-sintesi-errors per azzerare il margine e padding e rimosso la larghezza. Dovrebbe funzionare cross-browser ora.

fonte

2009-06-02 16:13:13 Emily

Quasi :-)! Funziona bene in Firefox 3, ma si interrompe in IE 7. Vedi http://content.screencast.com/users/sandra123/folders/Jing/media/a8523c9c-dfc7-44a4-8461-05d0e159677c/2009-06-02_1928 .png –

La mia nuova versione del codice ha funzionato? Dovrebbe correggere l'elenco che viene spostato in IE7. – Emily

Se si dispone di un div involucro come il secondo esempio di codice fornito. Quindi sarebbe facile usare jQuery per "spostare" la classe di errore dallo span & a quel div esterno.

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

Questo codice manipolerà l'HTML in modo che assomigli a questo ...

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

fonte

2009-06-02 16:22:29 jessegavin

Come ho detto, so che è abbastanza facile risolvere questo problema con jQuery. Ma questa sembra una soluzione abbastanza imbarazzante. –

Se sto leggendo questo diritto e si desidera solo un bordo sul span.validation-summary-errors (e non sui contenuti interni) poi:

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

dovrebbe farlo.

Oppure, un po 'meno affidabile:

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

fonte

2009-06-02 17:39:14

No, desidero un singolo bordo che circonda sia il riepilogo di convalida che i messaggi. –

Un'altra e la soluzione necessaria.

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

fonte

2017-11-01 20:07:14

Circondati da un ValidationSummary con una scatola tramite CSS

risposta

Problemi correlati