none
Jquery Validate en MVC no funciona RRS feed

  • Pregunta

  • Hola.

    Tengo un problema con mi aplicación en MVC, resulta que quiero validar que un usuario este debidamente registrado y quiero enviar los datos de registro que el usuario defina en el formulario en formato JSON via Ajax.

    Como he ido por partes el asunto de validar que el usuario eset registrado contra una base de datos me funciono pero cuando quise utilizar Jquery Validate para verificar que tanto el campo username como el campo password no esten vacios pues simplemente no me valida nada, les dejo el muy simple ViewModel creado para el usuario

    public class Ejemplo
      {
       [Required(ErrorMessage="Favor especificar Username")]
       [DataType(DataType.Text)]
        public string usuario { get; set; }
            
       [Required(ErrorMessage="Favor especificar password")]
       [DataType(DataType.Password)]
        public string password { get; set; }
       }

    y mi formulario esta asi

    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script src="~/Scripts/jquery-1.10.2.js"></script>
        <script src="~/Scripts/jquery.validate.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
     <script type="text/javascript">
      $(document).ready(function () {
    
      $('#myform').validate({ // initialize the plugin
        rules: {
         usuario: {
             required: true,
             minlength: 12
                    },
         password: { required: true }
                    },
        messages: {
         usuario: {
           required: "must specify username --> validate !!!",
           minlength: "not a valid Lenght --> validate !!!"
                    },
         password: {
           required: "must specify a password --> validate !!!"
                    }
                },
          submitHandler:
            $("#myform").on('submit', function () {
              alert("have just pressed submit");
              if ($("#myform").valid()) {
              alert("here some code inside $.AJAX({})");
                            }
                return false;
                        })
            })
        });
    
    </script>
    </head>
    
    <body>
     <div> 
      <fieldset>
       <legend> Validaciones MVC </legend>
        @using (Html.BeginForm("Prueba", "Prueba", FormMethod.Post, new { @id = "myform" }))
         {
                    
        @Html.LabelFor(M => M.usuario);
        <br />
        @Html.EditorFor(M=>M.usuario)
        @Html.ValidationMessageFor(M => M.usuario);
        <br />
        @Html.LabelFor(M=>M.password)
        <br />
        @Html.EditorFor(M=>M.password);
        @Html.ValidationMessageFor(M=>M.password)
        <br />
        <br />
    
    <input type="submit" id="boton_id" name="boton_name" value="Enviar" />
                    }
      </fieldset>
     </div>
    <div id="response"></div>
    </body>
    </html>

    como les digo, no me valida y en la funcion SubmitHandler he puesto dos alert para probar si el if me devolvia un valor true, pero solo me muestra el alert --> alert("have just pressed submit"); nunca me muestra el segundo alert

    submitHandler:
      $("#myform").on('submit', function () {
        alert("have just pressed submit");
       if ($("#myform").valid()) {
         alert("here some code inside $.AJAX({})");
         }
         return false;
         })

    podrían ayudarme por favor e indicarme que hago mal o que me falta especificar?



    pabletoreto

    viernes, 26 de junio de 2015 20:04

Respuestas

  • ¿Cargas el formulario también a través de Ajax?

    Si es así el problema es que la validación de los controles se inicializa en la carga de la página, si cargas el formulario a través de Ajax debes hacerlo manualmente:

      $(document).ready(function () {
    
          $('#myform').validate({ // initialize the plugin
              rules: {
                  usuario: {
                      required: true,
                      minlength: 12
                  },
                  password: { required: true }
              },
              messages: {
                  usuario: {
                      required: "must specify username --> validate !!!",
                      minlength: "not a valid Lenght --> validate !!!"
                  },
                  password: {
                      required: "must specify a password --> validate !!!"
                  }
              },
              submitHandler:
                $("#myform").on('submit', function () {
                    alert("have just pressed submit");
                    if ($("#myform").valid()) {
                        alert("here some code inside $.AJAX({})");
                    }
                    return false;
                })
          });
    
          $.validator.unobtrusive.parse($("#myform"));
        });


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...


    sábado, 27 de junio de 2015 9:41

Todas las respuestas

  • como tienes definido tu web config?

    tienes que tener estas dos claves en tu sección de appsettings

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


    Si se solucionó tu consulta no olvides marcar la respuesta. Si te ayudó, vótala como útil. Saludos



    viernes, 26 de junio de 2015 20:33
    Moderador
  • también deberías cambiar esta parte de tu js

    if ($("#myform").valid()) {

    por

    if ($("#myform").validate()) {
        


    Si se solucionó tu consulta no olvides marcar la respuesta. Si te ayudó, vótala como útil. Saludos

    viernes, 26 de junio de 2015 20:37
    Moderador
  • también deberías cambiar esta parte de tu js

    if ($("#myform").valid()) {

    por

    if ($("#myform").validate()) {
        


    Si se solucionó tu consulta no olvides marcar la respuesta. Si te ayudó, vótala como útil. Saludos

    Hola.

    Con respecto a lo del web config si esta habilitado, aunque me parece que cuando utilizas AJAX debes hacer tus propias validaciones en JavaScript(por eso escogi Jquery Validate).

    seguiendo tu recomendacion, deje mi codigo asi:

     $(document).ready(function () {
    
            $("#myform").on('submit', function () {
                alert("have just pressed submit");
                if ($("#myform").validate()) {
                    alert("here some code inside $.AJAX({})");
                }
                return false;
            });
    
     $('#myform').validate({ // initialize the plugin
        rules: {
           usuario: {
             required: true,
             minlength: 12
                    },
            password: { required: true }
                },
              messages: {
             usuario: {
            required: "must specify username --> validate !!!",
            minlength: "not a valid Lenght --> validate !!!"
                    },
              password: {
           required: "must specify a password --> validate !!!"
                    }
               // },
               // submitHandler: function () {
               //     alert("formulario enviado");
                }
            })
        });
    Ahora si me muestra los dos alert pero no me valida que los campos no esten vacios.


    pabletoreto

    viernes, 26 de junio de 2015 20:46
  • la verdad es que no he usado Jquery Validate a fondo.Simplemente decorando las propiedades del modelo, activando los,settings en el web.config y ejecutando .validate() me realiza la validación cliente. Mostrando el mensaje en el ValidationMessageFor

    Si se solucionó tu consulta no olvides marcar la respuesta. Si te ayudó, vótala como útil. Saludos


    viernes, 26 de junio de 2015 21:05
    Moderador
  • probaría a comentar el codigo que tienes de initialize plugin

    Si se solucionó tu consulta no olvides marcar la respuesta. Si te ayudó, vótala como útil. Saludos

    viernes, 26 de junio de 2015 21:05
    Moderador
  • ¿Cargas el formulario también a través de Ajax?

    Si es así el problema es que la validación de los controles se inicializa en la carga de la página, si cargas el formulario a través de Ajax debes hacerlo manualmente:

      $(document).ready(function () {
    
          $('#myform').validate({ // initialize the plugin
              rules: {
                  usuario: {
                      required: true,
                      minlength: 12
                  },
                  password: { required: true }
              },
              messages: {
                  usuario: {
                      required: "must specify username --> validate !!!",
                      minlength: "not a valid Lenght --> validate !!!"
                  },
                  password: {
                      required: "must specify a password --> validate !!!"
                  }
              },
              submitHandler:
                $("#myform").on('submit', function () {
                    alert("have just pressed submit");
                    if ($("#myform").valid()) {
                        alert("here some code inside $.AJAX({})");
                    }
                    return false;
                })
          });
    
          $.validator.unobtrusive.parse($("#myform"));
        });


    Píldoras .NET
    Artículos, tutoriales y ejemplos de código .NET

    Píldoras JS
    Artículos, tutoriales y ejemplos de código JavaScript, HTML5, CSS3, ...


    sábado, 27 de junio de 2015 9:41