Sígueme en Facebook

3 de febrero de 2011
0 comentarios

jQuery: Validate() para gente con prisas

17:25

Este plug-in de jQuery es muy potente para realizar validación javascript previa a la llamada al servidor. Aquí expongo un ejemplo en Asp.net Mvc2.



1) Incluir librería (en el ejemplo, con T4mvc):

<script src="<%: Links.Content.js.jquery_validate_min_js %>" type="text/javascript"> script>

2) Identificas el formulario a validar con un id : “Alta”

<% using (Html.BeginForm("Alta""Registro"nullFormMethod.Post, new { id = "alta" }))
       { %>
    <fieldset class="formulario">
        <div class="formAlta">
            <p>
                <strong>
                    <%: Html.LabelFor(model => model.Usuario.Persona1.Nombre)%>
                strong>
            p>
        div>

3) En el content donde colocas el código Javascript relacionas la función con el formulario mediante el identificador “Alta”:

<asp:Content ID="Content4" ContentPlaceHolderID="ScriptsContenido" runat="server">

 <script type="text/javascript">
     $().ready(function () {
         $("#alta").validate({


  
4) Defines la regla:

rules: {
"Usuario.Persona1.Nombre": {
                     required: true,
                     minlength: 2
                 }
},


5)   Defines el mensaje a mostrar para cada elemento:

   messages: {
  "Usuario.Persona1.Nombre": {
         required: "Nombre obligatorio",
         minlength: "El nombre debe tener al menos 2 caracteres"
   }



6) Adaptas el CSS.


7) Anexo I : Para validadar algo un poco más complejo, como por ejemplo que el Email no existe en la base de datos:

7.1 )  En la vista .ascx ( con javascript empotrado)

rules: {
                 "Usuario.Email": {
                     required: true,
                     email: true,
                     remote: { url: "/Registro/CompruebaEmail", async: true, type: "post" }
                 },


7.2) En el controlador:

        ///
        /// Comprobamos que el email no exista ya en la base de datos

      ///

        /// Email que no debe existir ya en nuestra base de datos
        /// Devolvemos true o false en formato json
        public virtual JsonResult CompruebaEmail(FormCollection form)
        {
            string email = Request.Params["Usuario.Email"];
            bool noExiste = usuarioNegocio.ObtenerTodosLosElementos().Where(u => u.Email.Equals(email)).Count() == 0;
            return Json( noExiste );
        }



8)  Página oficial :

0 comentarios:

Publicar un comentario

 
Toggle Footer
Top