jQuery validation plugin en ASP.NET [Parte I]

Hola a todos, bueno en mis días de descanso seguimos compartiendo conocimiento. En nuestro previo post hablamos sobre jQuery validation plugin en WebForms de Asp.Net con masterpage, hoy hablaremos de como darle contexto de mensajes de español a las validaciones.

 

  • Primer método.

bueno la forma mas fácil es colocando lo que necesitamos en los mensajes.

   1:  <script type="text/javascript">
   2:          $(document).ready(function() {
   3:              $("#form1").validate({
   4:                  rules: {
   5:                      <%=txtNombre.UniqueID %>: {
   6:                          minlength: 2,
   7:                          required: true
   8:                      },
   9:                       <%=txtMail.UniqueID %>: {                        
  10:                          required: true,
  11:                          email:true
  12:                      },
  13:                       <%=txtApellido.UniqueID %>: {                        
  14:                          minlength: 2,
  15:                          required: true
  16:                      },
  17:                       <%=txtFecha.UniqueID %>: {                        
  18:                          required: true,
  19:                          date:true
  20:                      }
  21:                  }, messages: {
  22:                      <%=txtNombre.UniqueID %>:{ 
  23:                          required: "* Campo Requerido*", 
  24:                          minlength: "* Por favor digitar al menos 2 caracteres *" 
  25:                      },
  26:                      <%=txtMail.UniqueID %>:{ 
  27:                          required: "* Campo Requerido*", 
  28:                          email:"* Direccion de correo invalida *"
  29:                      }
  30:                      ,
  31:                      <%=txtApellido.UniqueID %>:{ 
  32:                          required: "* Campo Requerido*", 
  33:                          minlength:"* Por favor digitar al menos 2 caracteres *"
  34:                      },
  35:                      <%=txtFecha.UniqueID %>:{ 
  36:                          required: "* Campo Requerido*", 
  37:                          date:"* Por favor digitar una fecha *"
  38:                      }
  39:                  }
  40:              });
  41:          });
  42:      </script>

Y así quedaría.

image

image

  • Segundo método

Para el segundo método vamos a usar metodo jQuery.extend para extender jQuery.validator.messages, para esto hay que hacerlo en un archivo aparte y la referencia tiene que estar después del jQuery validation.

   1:  jQuery.extend(jQuery.validator.messages, {
   2:      required: "Este campo es requerido",
   3:      remote: "Porfavor corrije el valor de este campoPlease fix this field.",
   4:      email: "Ingresa una dirección de correo válida.",
   5:      url: "Ingresa una URL válida.",
   6:      date: "Ingresa una fecha válida.",
   7:      dateISO: "Ingresa una fehca válida (ISO).",
   8:      number: "Ingresa un número válido.",
   9:      digits: "Ingresa sólo letras.",
  10:      creditcard: "Ingresa un número de tarjeta de crédito válido.",
  11:      equalTo: "Ingresa el nuevo valor de nuevo.",
  12:      accept: "Ingresa un valor con extensión válida.",
  13:      maxlength: $.validator.format("Porfavor ingresa menos de {0} caractéres."),
  14:      minlength: $.validator.format("Porfavor ingresa almenos {0} caractéres."),
  15:      rangelength: $.validator.format("Porfavor ingresa un valor entre {0} y {1} caractéres de longitud."),
  16:      range: $.validator.format("Ingresa un valor entre {0} y {1}."),
  17:      max: $.validator.format("Ingresa un valor menor o igual que {0}."),
  18:      min: $.validator.format("Ingresa un valor mayor o igual a {0}.")
  19:  }); 

Observen las referencias.

   1:  <script src="Scripts/jquery-1.6.3-vsdoc.js" type="text/javascript"></script>
   2:  <script src="Scripts/jquery-1.6.3.js" type="text/javascript"></script>
   3:  <script src="Scripts/jquery.validate-vsdoc.js" type="text/javascript"></script>
   4:  <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
   5:  <script src="Scripts/Script.js" type="text/javascript"></script>

Y así quedaría la validación.

image

Bueno eso es todo, espero que les sirva.

Saludos. Romny

Publicado por

Romny Duarte

Ingeniero de sistemas con experiencia en desarrollo web y móvil, geek, amante de la lectura y de la tecnología.

2 comentarios en “jQuery validation plugin en ASP.NET [Parte I]”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *