@ Html.TextBoxFor textbox no se resalta después de la validación fallida

Question

Estoy usando MVC3 con Razor. Para la entrada Tengo dos tipos de control:

1. @Html.TextBoxFor
2. @Html.TextAreaFor

de validación de campos Ambos han requerido. @Html.TextAreaFor resalte el cuadro si la validación falla donde @Html.TextBoxFor no.

Aquí está mi código

HTML:

@Html.TextBoxFor(m => m.FirstName) 

Modelo:

[Required(ErrorMessage = "First Name is required")] 
public string FirstName { get; set; } 

¿Por qué es el cuadro de texto creado usando @Html.TextBoxFor no hightlighted cuando su validación falla?

Answer 1

Para tener una validación del lado del cliente, debe asegurarse de tener los scripts necesarios incluidos en su Vista (ya sea a través de la vista _Layout.cshtml o su vista directa). Poner esto en la parte superior de la vista:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

Asegúrese de que la ruta de acceso y los nombres de script son correctos. Esto le permitirá utilizar la validación del lado del cliente (es decir, resaltar el cuadro de texto).

Answer 2

Asegúrate de que las variables que estás asignando a estos campos de entrada son [Obligatorio] en tu clase de modelo ... También eliminaste cualquier CSS en un proceso de "limpieza"? Intenta agregar esto si no está ahí.

.field-validation-error 
{ 
color: #ff0000; 
} 
.field-validation-valid 
{ 
display: none; 
} 
.input-validation-error 
{ 
border: 1px solid #ff0000; 
background-color: #ffeeee; 
} 
.validation-summary-errors 
{ 
font-weight: bold; 
color: #ff0000; 
} 
.validation-summary-valid 
{ 
display: none; 
} 

Answer 3

que se enfrentaron mismo problema hoy en día:

Con el fin de aumentar la validación de cuadro de texto o cualquier otro campo que sólo tiene estas dos líneas:

En el regulador: ModelState.AddModelError("ErrorEmail", "Error Message");

En Vista: @Html.ValidationMessage("ErrorEmail")

Y en web.config

<appSettings> 
    <add key="ClientValidationEnabled" value="true" /> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
    </appSettings> 

Estaba sobrescribiendo css de validación con mi propio sitio web css, por eso no mostraba el borde rojo alrededor del cuadro de texto.

haciendo estilo de error de validación importante resuelto mi problema:

input.input-validation-error { 
    border: 1px solid #e80c4d !important; 
} 

Answer 4

añadir tanto .input validación de errores y clases .input.input validación de errores.

Answer 5

Tuve este problema yo mismo. Agregué una nueva clase de CSS al archivo Site.css (o la hoja de estilos que prefiera).

textarea.input-validation-error { 
border: 1px solid #e80c4d; 
} 

Answer 6

Sé que esto es viejo, pero en caso de cualquier otra persona está en busca de esto, asegúrese de que también usa

@Html.ValidationMessageFor(m => m.FirstName) 

Después de que su cuadro de texto