0

Estoy desarrollando una aplicación con MVC ASP.NET, la aplicación lleva un formulario para que el usuario se registre y cree una cuenta, el formulario lo estoy validando con JQuery Validate pero no funcionan las validaciones.... Este es el código...

    <div class="container">
    <form action="" method="post" class="form-group" id="FormUsuario">
        <label>Nombre</label>
        <input type="text" name="Nombre" id="Nombre" class="form-control" placeholder="Nombre" />
        <br />
        <label>Primer apellido</label>
        <input type="text" name="Apellido_1" id="Apellido_1" class="form-control" placeholder="Primer Apellido" />
        <br />
        <label>Segundo apellido</label>
        <input type="text" name="Apellido_2" id="Apellido_2" class="form-control" placeholder="Segundo Apellido" />
        <br />
        <label>Correo electrónico</label>
        <input type="email" name="E_mail" id="E_mail" class="form-control" placeholder="Correo Electrónico" />
        <br />
        <label>Teléfono</label>
        <input type="text" name="Telefono" id="Telefono" class="form-control" placeholder="Telefono" />
        <br />
        <label>Contraseña</label>
        <input type="password" name="Contrasenna" id="Contrasenna" class="form-control" placeholder="Contraseña" />
        <br />
        <label>Confirmar contraseña</label>
        <input type="password" name="txtContrasennaConf" id="txtContrasennaConf" class="form-control" placeholder="Confirmar Contraseña" />
        <br />
        <button type="submit" class="btn btn-success" name="btnCrearCuenta" id="btnCrearCuenta" value="Crear Cuenta">Crear cuenta</button>
        @Html.ValidationSummary(true)
    </form>
</div>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js" ></script>
<script>
    
    $(document).ready(function () { 
        EstableceMensajesJqueryValidate();
        EstableceValidaciones();
    });

    function EstableceValidaciones() {
        $("#FormUsuario").validate({
            rules: {
                Nombre: {
                    required: true,
                    maxlength: 50
                },
                Apellido_1: {
                    required: true,
                    maxlength: 50
                },
                Apellido_2: {
                    maxlength: 50
                },
                E_mail: {
                    required: true,
                    maxlength: 50,
                    email: true
                },
                Telefono: {
                    required: true,
                    maxlength: 50,
                    digits: true
                },
                Contrasenna: {
                    required: true,
                },
                txtContrasennaConf: {
                    required: true,
                    equalTo:"Contrasenna"
                }
            }
        });
    }
    function EstableceMensajesJqueryValidate() {
        $.extend($.validator.messages, {
            maxlength: $.validator.format("Favor ingrese {0} o menos caracteres"),
            minlength: $.validator.format("Favor ingrese al menos {0} caracteres"),
            required: $.validator.format("Valor Requerido"),
            url: "Debe ingresar una dirección web válida",
            rangelength: $.validator.format("Favor ingrese un valor entre {0} y {1} caracteres de longitud"),
            range: $.validator.format("Favor ingrese un valor entre {0} y {1}"),
            max: $.validator.format("Favor ingrese un valor menor o igual a: {0}"),
            min: $.validator.format("Favor ingrese un valor mayor o igual a: {0}"),
            number: "Favor ingrese un número válido",
            digits: "Favor ingrese solo números",
            email: "Favor ingrese una dirección de correo electrónico válida",
            accept: $.validator.format("Favor seleccione un formato válido {0}"),
            extension: $.validator.format("Favor seleccione un formato válido {0}"),
            require_from_group: $.validator.format("Ingrese al menos uno de estos valores"),
            equalTo: $.validator.format("Los contraseñas no coinciden")

        });
    }
</script>

Como ven estoy usando la versión 3.4.1, ya lo he probado con diferentes proyectos y me pasa lo mismo no me valida... A lo que tengo entendido el parámetro que recibe la función .validate es el id del formulario y las rules las van con el name... Espero que me puedan ayudar...Muchas gracias,saludos!

8
  • Se ve que version de jquery estás probando, pero no qué versión de jquery.validate, ¿cuál es?
    – jachguate
    Commented el 25 abr. 2021 a las 5:04
  • La versión que estoy usando es la v1.17.0....
    – Aguero
    Commented el 25 abr. 2021 a las 23:44
  • Quizás sea la versión, como puedes ver en mi respuesta, con la 1.19.2 funciona... o es que no te has explicado bien en qué no funciona...]
    – jachguate
    Commented el 26 abr. 2021 a las 0:02
  • Gracias por su respuesta jachguate, ejecute el código atreves del snippet y las validaciones funcionan, pero cuando lo pruebo en el navegador y envío el formulario vació para probar que las validaciones que hice con jquery funcionan, no aparece nada comparado a como sale en el ejemplo que ejecute por acá.....
    – Aguero
    Commented el 26 abr. 2021 a las 0:22
  • Viendo los datos que salen en la pantalla de salida de Visual Studio al momento de realizar la prueba en el navegador encontré este mensaje:
    – Aguero
    Commented el 26 abr. 2021 a las 2:10

1 respuesta 1

1

No sé a que le llamas "no validar", pero este es básicamente tu mismo código con jquery 3.4.1 y jquery.validate 1.19.2.

En mi opinión, si que valida. Puedes probarlo aquí mismo dando clic al botón "Ejecutar", al final del snippet.

$(document).ready(function () { 
        EstableceMensajesJqueryValidate();
        EstableceValidaciones();
    });

    function EstableceValidaciones() {
        $("#FormUsuario").validate({
            rules: {
                Nombre: {
                    required: true,
                    maxlength: 50
                },
                Apellido_1: {
                    required: true,
                    maxlength: 50
                },
                Apellido_2: {
                    maxlength: 50
                },
                E_mail: {
                    required: true,
                    maxlength: 50,
                    email: true
                },
                Telefono: {
                    required: true,
                    maxlength: 50,
                    digits: true
                },
                Contrasenna: {
                    required: true,
                },
                txtContrasennaConf: {
                    required: true,
                    equalTo:"Contrasenna"
                }
            }
        });
    }
    function EstableceMensajesJqueryValidate() {
        $.extend($.validator.messages, {
            maxlength: $.validator.format("Favor ingrese {0} o menos caracteres"),
            minlength: $.validator.format("Favor ingrese al menos {0} caracteres"),
            required: $.validator.format("Valor Requerido"),
            url: "Debe ingresar una dirección web válida",
            rangelength: $.validator.format("Favor ingrese un valor entre {0} y {1} caracteres de longitud"),
            range: $.validator.format("Favor ingrese un valor entre {0} y {1}"),
            max: $.validator.format("Favor ingrese un valor menor o igual a: {0}"),
            min: $.validator.format("Favor ingrese un valor mayor o igual a: {0}"),
            number: "Favor ingrese un número válido",
            digits: "Favor ingrese solo números",
            email: "Favor ingrese una dirección de correo electrónico válida",
            accept: $.validator.format("Favor seleccione un formato válido {0}"),
            extension: $.validator.format("Favor seleccione un formato válido {0}"),
            require_from_group: $.validator.format("Ingrese al menos uno de estos valores"),
            equalTo: $.validator.format("Los contraseñas no coinciden")

        });
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<div class="container">
    <form action="" method="post" class="form-group" id="FormUsuario">
        <label>Nombre</label>
        <input type="text" name="Nombre" id="Nombre" class="form-control" placeholder="Nombre" />
        <br />
        <label>Primer apellido</label>
        <input type="text" name="Apellido_1" id="Apellido_1" class="form-control" placeholder="Primer Apellido" />
        <br />
        <label>Segundo apellido</label>
        <input type="text" name="Apellido_2" id="Apellido_2" class="form-control" placeholder="Segundo Apellido" />
        <br />
        <label>Correo electrónico</label>
        <input type="email" name="E_mail" id="E_mail" class="form-control" placeholder="Correo Electrónico" />
        <br />
        <label>Teléfono</label>
        <input type="text" name="Telefono" id="Telefono" class="form-control" placeholder="Telefono" />
        <br />
        <label>Contraseña</label>
        <input type="password" name="Contrasenna" id="Contrasenna" class="form-control" placeholder="Contraseña" />
        <br />
        <label>Confirmar contraseña</label>
        <input type="password" name="txtContrasennaConf" id="txtContrasennaConf" class="form-control" placeholder="Confirmar Contraseña" />
        <br />
        <button type="submit" class="btn btn-success" name="btnCrearCuenta" id="btnCrearCuenta" value="Crear Cuenta">Crear cuenta</button>
    </form>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.