ASP.NET MVC 3: Client-Side Validation Enabled por Default

En las versiones anteriores de MVC, era necesario invocar al método Html.EnableClientValidation() desde una vista para habilitar la validación del lado del cliente. Por ejemplo debíamos escribir algo similar a esto en la vista:

1:<script type="text/javascript" src="/Scripts/MicrosoftAjax.js"/> 
2:<script type="text/javascript" src="/Scripts/MicrosoftMvcValidation.js"/> 
3:<h2> Create</h2> 
4: <% Html.EnableClientValidation();  %>
5: <% using  (Html.BeginForm()) { %>  
6:   <%=  Html.ValidationSummary(true )  %>  
7:
8:       <fieldset> 
9:           <legend> Campos</legend> 
10:           <div  class="editor-label"> 
11:                <%=  Html.LabelFor(model => model.Nombre)  %>  
12:           </div> 
13:           <div  class="editor-field"> 
14:                <%=  Html.TextBoxFor(model => model.Nombre)  %>  
15:                <%=  Html.ValidationMessageFor(model => model.Nombre)  %>  
16:           </div> 
17:           <p> 
18:               <input  type="submit"  value="Create"  /> 
19:           </p> 
20:       </fieldset> 
21:<% }  %>

Lo que teníamos que tener en cuenta era la invocación al método EnableClientValidation y las referencias a los scripts MicrosoftAjax,js MicrosoftMvcValidation.js (este último nos permitía validar las propiedades de un modelo que tenían asignados atributos de validación DataAnnotations desde el lado del cliente).

En MVC 3 este paso ya no es necesario ya que la validación del lado del cliente está habilitada de forma predeterminada. Podemos habilitarla o deshabilitarla modificando la siguiente entrada en nuestro web.config:

1:<appSettings> 
2:  <add key= "ClientValidationEnabled " value= "true "/>  
3:  <add key= "UnobtrusiveJavaScriptEnabled " value= "true "/>  
4:</appSettings>

La key ClientValidationEnabled en true nos permite trabajar con la validación del lado del cliente de manera predetermina. La key UnobtrusiveJavaScriptEnable en true nos evitara mezclar el código javascript dentro del HTML, tal como se explico en este post.

También es necesario agregar en la vista la referencia a la librería de jQuery jquery.validate.js. Esta librería es la que trabajara en conjunto con los atributos DataAnnotation que hayamos definido en el modelo de la vista para poder realizar las validaciones client-side.

Veamos todo con un ejemplo muy simple, lo primero que vamos hacer es crear un modelo reducido para la entidad Cliente y al mismo vamos a definirle el atributo Nombre como requerido:

1: using  System;
2: using  System.Collections.Generic;
3: using  System.Linq;
4: using  System.Web;
5: using  System.ComponentModel.DataAnnotations;
6:
7: namespace Mvc3.Models
8: {
9:     public class ClienteModel 
10:     {
11:         [Required(ErrorMessage= "El nombre es obligatorio.")]
12:         public string Nombre { get; set; }
13:
14:         public int? Edad { get; set; }
15:     }
16: }

En el controlador vamos a definir los métodos de acción de creación del cliente:

1: namespace Mvc3.Controllers
2: {
3:     public class ClienteController : Controller 
4:     {
5:         public ActionResult Create()
6:         {
7:            return View();
8:         }
9:
10:         [HttpPost]
11:         public ActionResult Create(ClienteModel model)
12:         {
13:             if(ModelState.IsValid)
14:             {
15:                 return View();
16:             }
17:
18:             return View(model);
19:         }
20:     }
21: }

Finalmente vamos a crear la vista, hacemos click derecho sobre el método de acción Create, y en el menú elegimos “Add View…“. En la ventana que se nos abre elegimos que sea de tipado fuerte y elegimos nuestro modelo previamente creado: ClienteModel. También vamos a seleccionar que sea un formulario de creación y para quinenes hayan definido una master page la seccionan. En nuestro caso vamos a usar como ViewEngine Razor.

Configurando la vista

Configurando la vista

Van  a ver que al crear la vista esta ya incluye las referencias a los script necesarios para la validación del lado del cliente:

1:  @model   Mvc3.Models.ClienteModel 
2:  @{
3:     ViewBag.Title = "Create";
4:     Layout = "~/Views/Shared/_Layout.cshtml";
5:  }
6:
7: <h2>Create</h2> 
8:
9: <script src="  @Url.Content("~/Scripts/jquery.validate.min.js")"  
10:         type="text/javascript"></script> 
11: <script src="  @Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"  
12:         type="text/javascript"></script> 
13:
14:  @ using Html.BeginForm()) {
15:      @ Html.ValidationSummary(true )
16:     <fieldset> 
17:         <legend>ClienteModel</legend> 
18:
19:         <div class="editor-label"> 
20:              @ Html.LabelFor(model => model.Nombre)
21:         </div> 
22:         <div class="editor-field"> 
23:              @ Html.EditorFor(model => model.Nombre)
24:              @ Html.ValidationMessageFor(model => model.Nombre)
25:         </div> 
26:
27:         <div class="editor-label"> 
28:              @ Html.LabelFor(model => model.Edad)
29:         </div> 
30:         <p> 
31:             <input type="submit"  value="Create"  /> 
32:         </p> 
33:     </fieldset> 
34: }
35: <div> 
36:      @ Html.ActionLink("Back to List" , "Index" )
37: </div> 

Ya tenemos todo configurado, ejecutamos y podremos chequear que definitivamente las validaciones se hacen del lado del cliente.

Validación del formulario

Validación del formulario

Si queremos validar que esto es del todo correcto, deshabilitamos en el web.config la entrada ClientValidationEnabled y volvemos a ejecutar. Efectivamente vamos a ver que en este caso la validación se hace desde el servidor provocando el submit del formulario.

Espero que les haya sido de utilidad!

Anuncios

13 comentarios en “ASP.NET MVC 3: Client-Side Validation Enabled por Default

  1. Buenas, me gusto tu blog.
    Queria hacerte una pregunta, un poco afuera de esta publicación.
    Estoy comenzando en .NET, considerandome un junior o trainner en este lenguaje, lo que quería preguntarte, si podes aconsejarme cuál certificación podría hacer, para este ambiente, la de ASP.NET
    desde ya.. muchas gracias.
    abrazo.

  2. Buenas me gustaría hacerte una pregunta.
    no se si vendrá al tema pero hice una pequeña aplicación y cuando doy guardar si pasa la validación guarda correctamente pero si doy varios clicks al botón guardar, guarda tantas veces como click se hizo. hay alguna forma de solucionar eso??.
    desde ya muchas gracias.

      • muchas gracias por tu pronta respuesta.

        si tenia pesando hacer algo por el estilo (pensaba deshabilitar en boton) y esa librería esta interesante, hace lo que debe cuando pasa la validación de cliente, pero no se como hacer para que no se ejecute cuando no pasa la validación de cliente que ofrece el mvc3 (la misma que describes en el articulo). lo acabo de probar y se cuelga cuando no pasa la validación.
        Existe alguna forma de verificar si pasa la validación de cliente o no que ofrece mvc? espero me haya explicado bien.

        gracias de antemano

      • No entiendo muy bien cual es el problema entonces… a que te referís con que no se ejecute cuando no pasa la validación o con que se cuelga?

        Estas validando en el POST que el modelo sea valido?

        Abrazos!

      • bueno me respondo a mi =D

        Encontré la solución solo tenia que agregar una condición antes del “$.blockUI()” entonces quedaría así.

        $(“form”).submit(function () {
        if($(this).valid()){
        $.blockUI();
        //tambien una función simplemente para bloquer el boton.
        }
        });

        entonces solo se ejecutara cuando pase la validacion =D.

        muchas gracias por tu respuesta. podrías hacer un tema de esto puede que le sirva a otras personas.

        un abrazo y muy buen blog.

      • Viendo el código ya me imagino cual era el problema :). Vamos a poner el tema en carpeta para un próximo post.

        Abrazos y me alegra que te guste el blog!

  3. Poco escribo en este tipo de Blog pero despues de crear una aplicacion de Intranet no me funcionaban las validaciones, hasta que encontre este. Felicitaciones !. segun veo lo que pasa es que cuando creo una aplicacion de la plantinlla de intranet toca escribir los script que indicas.

    .

    Ahora tengo otro problema y es que cuando ingreso a la aplicacion facilmente me muestra el login y con eso cargo un menu dinamico de acuerdo al usuario. Cada menu me lleva a una pagina diferente en la cual lleno unos datos para llamar diferentes web services, el problema radica en que estos web services me piden el usuario autenticado pero las vistas las lleno de la siguiente manera .

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

    }

    @Html.ActionLink(“Back to List”, “Index”)

    La pregunta es como hago para poder enviar en el login del usuario en un string para afectar dicho modelo, cosa que cuando el controlador reciba el objeto ya llevo el string de una propiedad Login
    Gracias

    Se que es dificil entender tanto texto .

    • Hola Juan, disculpa la demora en la respuesta.

      No estoy seguro cual es el problema, ya que no entiendo a que te referís con “enviar en el login del usuario en un string para afectar dicho modelo”. Si me podrías dar un ejemplo de lo datos necesitan viajar entre la vista y el controlador, tal vez me pueda dar una mejor idea para poder ayudarte.

      De todas formas, algunos tips que pueden “ayudarte” en el problema:
      – Guardar la info que necesitas en la sesión del usuario.
      – Agregar aquellos datos que necesites como propiedades del ViewModel, para cuando recibas dicho modelo dispongas de los datos.

      Como te comente al principio, si me podes dar un ejemplo mas concreto del problem, mucho mejor.

      Abrazos,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s