MVC3 Validación del lado del cliente errática/inconsistente

Question

La validación del lado del servidor funciona bien, pero el lado del cliente no funcionará en algunos campos.

Usando:

"jquery-1.5.1.min.js" 
"modernizr-1.7.min.js" 
"jquery.validate.min.js" 
"jquery.validate.unobtrusive.min.js". 

HTML5 marcado semántico

MVC3, la maquinilla de afeitar, Código primeras anotaciones

datos de la clase:

using System.ComponentModel.DataAnnotations; 

[Required, MaxLength(30, ErrorMessage = "First Name must be {1} characters or less")] 
public string FirstName { get; set; } 

[Range(20, 50, ErrorMessage = "{0} must be between {1} and {2}")] 
public double Waist { get; set; } 

Vista:

El la vista está fuertemente tipada.

@using (Html.BeginForm()) { @Html.ValidationSummary(true) 

    <span class="editor-label"> First Name </span> 

    <span class="editor-field"> 

    @Html.EditorFor(model => model.FirstName) 

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

    </span><br /><br /> 

    <span class="editor-label">@Html.LabelFor(model => model.Waist): 20 to 50</span> 

    <span class="editor-field"> 

    @Html.EditorFor(model => model.Waist) 

    @Html.ValidationMessageFor(model => model.Waist) 

    </span><br /><br /> 

La validación del lado del cliente funciona para Waist pero no FirstName. El lado del servidor funciona para ambos.

Cuando miro el código fuente, la cintura tiene un rango de valores de datos.

datos-val-range = "Cintura debe estar entre 20 y 50"

No hay datos-val-rango para FirstName.

Cualquier ayuda muy apreciada.

Gracias,

Joe

estoy usando IE9 de 64 bits.

Ante una mayor investigación, la longitud de cadena requerida y parcialmente funciona. Cambié los atributos de Dataannotation a esto.

[Required(ErrorMessage = "First Name is required")]  [StringLength(30, MinimumLength = 2, ErrorMessage = "First Name must be {2} to {1} characters")]  public string FirstName { get; set; } 

Ahora, cuando voy a editar mi ver y borrar el cuadro de texto nombre y primer pestaña a la siguiente me sale error de validación. Si luego ingreso un carácter, recibo el mensaje StringLength, cuando posteriormente borro el campo, obtengo el mensaje Requerido. Cada vez más cerca, pero todavía no está funcionando correctamente.

datos-val-length = se agrega a la fuente cuando uso StringLength

Answer 1

MaxLength y MinLength no funciona con la validación del lado del cliente. Se podría utilizar StringLength lugar:

[Required] 
[StringLength(30, ErrorMessage = "First Name must be {1} characters or less")] 
public string FirstName { get; set; } 

Y hay una propiedad MinimumLength que se podía establecer si desea simular el atributo MinLength:

[Required] 
[StringLength(30, MinimumLength = 10, ErrorMessage = "First Name must be between 10 and 30 characters")] 
public string FirstName { get; set; } 

---

ACTUALIZACIÓN:

Parece que Desea activar la validación con entusiasmo, incluso si el formulario no se envía.Se podría añadir el siguiente script para lograr que:

<script type="text/javascript"> 
    $(function() { 
     var settngs = $.data($('form')[0], 'validator').settings; 
     settngs.onfocusout = function (element) { $(element).valid(); }; 
    }); 
</script> 

---

ACTUALIZACIÓN 2:

Aquí hay un ejemplo completo. Cree un nuevo proyecto ASP.NET MVC 3 usando la plantilla de Internet.

Modelo:

public class MyViewModel 
{ 
    [Required(ErrorMessage = "First Name is required")] 
    [StringLength(30, MinimumLength = 2, ErrorMessage = "First Name must be {2} to {1} characters")] 
    public string FirstName { get; set; } 
} 

controlador:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(new MyViewModel 
     { 
      FirstName = "foo" 
     }); 
    } 

    [HttpPost] 
    public ActionResult Index(MyViewModel model) 
    { 
     return View(model); 
    } 
} 

Vista:

@model MyViewModel 

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     var settngs = $.data($('form')[0], 'validator').settings; 
     settngs.onfocusout = function (element) { $(element).valid(); }; 
    }); 
</script> 

@using (Html.BeginForm()) 
{ 
    @Html.EditorFor(x => x.FirstName) 
    @Html.ValidationMessageFor(x => x.FirstName) 
    <button type="submit">OK</button> 
}