construidos alrededor de un ValidationSummary con una caja a través de CSS

Por defecto Html.ValidationSummary() produce HTML así:construidos alrededor de un ValidationSummary con una caja a través de 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>

me gustaría para seleccionar todo el resumen de validación y añadir un cuadro delimitador alrededor de él a través de CSS, así que estoy añadiendo una clase CSS de esta manera:

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

Ahora el problema es que este se basa cajas separadas alrededor del mensaje de resumen validación y cada mensaje de error. Ciertamente no es lo que tenía en mente.

puedo añadir un div alrededor del resumen como este, pero esto se traducirá en una caja vacía de color rojo si no hay errores de validación, así que esto no es cierto:

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

me ocurren varias maneras de resolver esto:

Añadir un div delimitador condicionalmente con las etiquetas del lado del servidor
Añadir un div de delimitación a través de jQuery
escribir mi propio º HtmlHelper envoltura en impresiones un ValidationSummary compatible con CSS

Sin embargo, todo esto parece bastante incómodo para resolver una tarea tan simple. Debe haber una mejor manera de hacer esto. ¿Quizás alguna otra forma de escribir la clase CSS para que no obtenga un cuadro vacío cuando no hay un resumen de validación?

Editar: Solo para aclarar, yo estoy llamando a la ayuda HTML así:

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

Edición 2: El alcance de esta pregunta era ver si he pasado por alto algo muerto fácil y obvio. Parece que no, así que simplemente agregaré mi propia función HtmlHelper que se ajuste a mis necesidades. Votaré para cerrar mi propia pregunta.

Fuente

2009-06-02 Adrian Grigore

¿Personalizó su control de resumen de validación? No se procesa de la misma manera por defecto como lo ha publicado. – RSolberg

No, solo estoy usando el método ValidationSummary de sobrecarga (consulte la primera edición anterior) - Adrian Grigore 13 secs ago –

Me encanta cómo está disponible la fuente MVC: ábrala y escriba la suya. buena suerte –

Aquí es un poco de CSS que funcionará:

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

Es posible que tenga que jugar con los anchos dependiendo de su otra css.

Edición después comentario

me cambió ul.validation-summary-errores a cero el margen y el relleno y se retira el ancho. Debería funcionar en todos los navegadores ahora.

Fuente

2009-06-02 16:13:13 Emily

Casi :-)! Esto funciona bien en Firefox 3, pero se rompe en IE 7. Ver http://content.screencast.com/users/sandra123/folders/Jing/media/a8523c9c-dfc7-44a4-8461-05d0e159677c/2009-06-02_1928 .png –

¿Funcionó mi nueva versión del código? Debería arreglar la lista que se está enviando en IE7. – Emily

Si tenía un div de ajuste como el segundo ejemplo de código que proporcionó. Entonces sería fácil usar jQuery para "mover" la clase de error del tramo & ul a ese div externo.

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

Este código manipulará el HTML para que se vea así ...

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

Fuente

2009-06-02 16:22:29 jessegavin

Como dije, sé que es bastante fácil resolver este problema con jQuery. Pero esto parece una solución bastante incómoda. –

si estoy leyendo este derecho y sólo desea una frontera en la span.validation-summary-errors (y no en el contenido interno) a continuación:

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

debe hacerlo.

O, un poco menos 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... */

Fuente

2009-06-02 17:39:14

No, quiero un único borde que rodee el resumen de validación y los mensajes. –

Otra solución es necesario.

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

Fuente

2017-11-01 20:07:14

construidos alrededor de un ValidationSummary con una caja a través de CSS

Respuesta

Cuestiones relacionadas