Cómo mostrar los resultados de la validación MVC 3 del lado del cliente en el resumen de validación

Question

Tengo un formulario de registro en el que utilizo la validación del lado del cliente (Obligatorio, StringLength, etc. especificado en mi modelo de vista). La forma es actualmente más o menos como el scaffolder lo crea:

@using (Html.BeginForm("Index", "Registration")) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>Registration details</legend> 
     @Html.ValidationSummary(false, "Please correct these errors:") 
     @Html.ValidationMessageFor(model => model.Username) 
     <div class="editor-label"> 
      @Html.LabelFor(model => model.Username) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Username) 
     </div> 
     <p> 
      <input type="submit" value="Register" /> 
     </p> 
    </fieldset> 
} 

La única diferencia es que moví el ValidationMessageFor a la parte superior derecha debajo de la ValidationSummary.

Lo que me gustaría hacer es mostrar los errores de validación del lado del cliente en el resumen de validación. Actualmente solo se muestran en la parte superior del formulario pero no usan el resumen de validación. ¿Cómo puedo mostrar los errores de validación del lado del cliente usando el resumen de validación? ¿Esto es posible?

actualización

Darin he utilizado el código en un nuevo proyecto y esto es lo que parece para mí cuando las patadas de validación del lado del cliente en:

Client side validation http://i56.tinypic.com/i3f320.jpg

esperaba que esto para que se muestre EN el resumen de validación con los estilos de resumen de validación aplicados. También presenté la forma que a continuación se parece a esto:

After submit http://i55.tinypic.com/2hqcowh.jpg

Gracias,

B3n

Answer 1

Los mensajes de error de validación normalmente se muestran como parte del resumen de validación por defecto. El ValidationFor normalmente debe ir junto con el control que causa el error de validación para aclarar qué control debe actualizarse

Answer 2

Según lo que puedo ver en el código de muestra, tiene dos Html.ValidationSummary dentro del formulario. El primero toma true como argumento, lo que significa que excluye todos los errores de propiedad. El segundo toma false y funciona tanto para los errores de validación del lado del cliente como del lado del servidor. Ejemplo:

Modelo:

public class MyViewModel 
{ 
    [Required] 
    [StringLength(5)] 
    public string Username { get; set; } 

    [Required] 
    public string Name { get; set; } 
} 

controlador:

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

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

Vista:

@model AppName.Models.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> 

@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary(false, "Please correct these errors:") 

    @Html.ValidationMessageFor(model => model.Username) 
    @Html.ValidationMessageFor(model => model.Name) 

    @Html.LabelFor(model => model.Username) 
    @Html.EditorFor(model => model.Username) 

    @Html.LabelFor(model => model.Name) 
    @Html.EditorFor(model => model.Name) 

    <input type="submit" value="Register" /> 
} 

Answer 3

Este artículo parece explicar cómo añadir el lado del cliente Resumen de validación en el resumen de validación:

http://geekswithblogs.net/stun/archive/2011/01/28/aspnet-mvc-3-client-side-validation-summary-with-jquery-validation-unobtrusive-javascript.aspx

Sin embargo, no lo probé por mi cuenta y no parece tener ninguna diferencia con su código. Si no funciona un buen punto para buscar el archivo podría ser jquery.validate.unobtrusive.js en una función que realmente coloca errores de validación:

function onErrors(form, validator) { // 'this' is the form element 
    var container = $(this).find("[data-valmsg-summary=true]"), 
     list = container.find("ul"); 

    if (list && list.length && validator.errorList.length) { 
     list.empty(); 
     container.addClass("validation-summary-errors") 
      .removeClass("validation-summary-valid"); 

     $.each(validator.errorList, function() { 
      $("<li />").html(this.message).appendTo(list); 
     }); 
    } 
} 

Answer 4

He resuelto este problema después de 2 días de intensa investigación y finaly , ¡encontré la respuesta por mi cuenta y por mis experimentaciones!

Para mostrar el mensaje de validación del lado del cliente en el Resumen validador hay 3 sencillos pasos:

1- poner <add key="ClientValidationEnabled" value="false" /> en la sección <appSettings> de su web.config

2- añadir su validación, la " false "atribut en su vista: @Html.ValidationSummary(false)

3- Elimine todos ValidationMessageFor(x => x.Property) en su vista.

cuando haga clic en el botón Enviar, el mensaje de Validación del lado del cliente se mostrará en su resumen de validación.

¡Disfrútalo!

Answer 5

Resolví el problema en mi proyecto.

1. añadir a continuación clave en el archivo de configuración

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

1. Añadir a continuación el código en página HTML en la que desea mostrar resumen de validación

   @Html.ValidationSummary(false)

2. Elimine todas las líneas @ Html.ValidationFor de la vista.

Answer 6

Tuve este mismo problema. Me fijo asegurándose de que las secuencias de comandos siguientes se incluyeron en mi página:

@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/bundles/jquery") 

espero que hace el truco para usted, también.