2011-01-10 50 views
7

Para los campos de mi vista ASP.NET MVC que se han atribuido según sea necesario, ¿hay alguna forma para que el marco represente automáticamente algún tipo de indicador de que el campo está marcado como requerido en los metadatos?Indicador de campo obligatorio ASP.NET MVC

Respuesta

13

debe ser capaz de hacer esto con CSS desde MVC3 añade en los atributos personalizados al elemento:

<input data-val="true" data-val-required="The Username field is required." id="Username" name="Username" type="text" value="" /> 

Usted puede teclear fuera necesario-data-val la de CSS, así:

de entrada [-requiere de datos-val] { fondo: rojo } o conjunto una imagen de fondo de un asterisco etc.

+0

Solo lo agrega con javascript. –

+0

Acabo de encontrar esto útil también. – KTF

+0

Muy inteligente, me encantan las respuestas como esta –

12

lo hice de esa manera porque mis campos obligatorios deben ser dinámicas (que se define en un archivo de configuración)

Añadir al final de la vista:

<script type="text/javascript"> 
     $('input[type=text]').each(function() { 
      var req = $(this).attr('data-val-required'); 
      if (undefined != req) { 
       var label = $('label[for="' + $(this).attr('id') + '"]'); 
       var text = label.text(); 
       if (text.length > 0) { 
        label.append('<span style="color:red"> *</span>'); 
       } 
      } 
     }); 
    </script> 
+0

M.A.G.I.C: D ¡Gracias! – Stian

+0

Awesome-sauce. Esto funciona genial, ¡gracias! Vea mi comentario a continuación para una expansión que incluye más tipos de campo. – dadwithkids

+0

Sugeriría poner esto en $ (documento) .Ready – shlgug

0

Adición de atributos HTML no es suficiente. Esto solo causará un error de validación de JavaScript. Si desea indicar que el campo es obligatorio, probablemente quiera agregarle un asterisco. Puedes hacerlo por medio del método de extensión de HtmlHelper. Se puede encontrar una explicación detallada aquí

Indicating required field in MVC application

4

Aquí es uno que se adhiera un asterisco rojo a la derecha de cualquier cosa con el atributo 'data-val-required'.

<script type="text/javascript"> 
    $('[data-val-required]').after('<span style="color:red; font-size: 20px; vertical-align: middle;"> *</span>'); 
</script> 
3

que modifica la respuesta de Renato Saito para incluir más tipos de campo (todos los tipos de entrada y listas de selección) y utilizar el espacio de nombres de jQuery en lugar de los $ genérico. Aquí está mi revisión:

<script type="text/javascript"> 
// add indicator to required fields 
jQuery('input,select').each(function() { 
    var req = jQuery(this).attr('data-val-required'); 
    if (undefined != req) { 
     var label = jQuery('label[for="' + jQuery(this).attr('id') + '"]'); 
     var text = label.text(); 
     if (text.length > 0) { 
      label.append('<span style="color:red"> *</span>'); 
     } 
    } 
}); 
</script> 
0

Una pequeña modificación se hace desde mi lado. En realidad, tenía claves principales (Columnas de identidad en DB). Eso no quería resaltar. Así que utilicé el fragmento de código a continuación para seleccionar solo los campos input[type=text] que tienen el atributo requerido en la anotación.

$("[data-val-required]").not(":hidden").not(":radio").not(":checkbox").after('<span style="color:red;max-width:10px;min-height:30px;">*</span>'); 
Cuestiones relacionadas