0

estoy realizando un login para un trabajo, pero al momento de intentar realizar una validacion con jQuery validator simplemente no funciona, no se si se trate de un error al vincularlo mediante los scripts pero cualquier ayuda es mas que bienvenida. En seguida les adjunto mi codigo. Cabe resaltar que estoy usando HTML5.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="plugins/fontawesome-free/css/all.css">
    <link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.css">
    <link rel="stylesheet" href="dist/css/adminlte.css">
</head>
<body class="login-page">
    <div class="login-box">
        <div class="login-logo">
            <a href="#"><strong>Institucion </strong></a>
        </div>
        <div class="card">
            <div class="card-body login-card-body">
                <p class="login-box-msg">Inicia sesión</p>
                <form action="#" method="post" id="login">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" name="" id="nombre" placeholder="Nombre">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fa fa-user"></span>
                            </div>
                        </div>
                    </div>

                    <div class="input-group mb-3">
                        <input type="text" class="form-control" name="" id="apellidos" placeholder="Apellidos">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fa fa-user"></span>
                            </div>
                        </div>
                    </div>

                    <div class="input-group mb-3">
                        <input type="email" class="form-control" name="" id="correo" placeholder="Correo electrónico">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fa fa-envelope"></span>
                            </div>
                        </div>
                    </div>

                    <div class="input-group mb-3">
                        <input type="number" class="form-control" name="" id="telefono" placeholder="Teléfono">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fa fa-phone"></span>
                            </div>
                        </div>
                    </div>

                    <div class="input-group mb-3">
                        <input type="password" class="form-control" name="" id="contra" placeholder="Contraseña">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fa fa-lock"></span>
                            </div>
                        </div>
                    </div>

                    <div class="input-group mb-3">
                        <input type="password" class="form-control" name="" id="confirmContra" placeholder="Confirmar Contraseña">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fa fa-lock"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <button type="submit" class="btn btn-danger btn-block">Cancelar &#10008</button>
                        </div>
                        <div class="col-6">
                            <button type="submit" class="btn btn-primary btn-block" id="registro">Registrate &#10003</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>    
aqui termina el apartado de el formulario, a continuacion pondre los scripts y mi intento fallido de validar el campo de "nombre"

    <script src="js/jquery.min.js"></script> 
    <script src="plugins/bootstrap/js/bootstrap.bundle.js"></script>
    <script src="dist/js/adminlte.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/additional-methods.js"></script>

    <script>
         $(document).ready(function(){
            $.validator.setDefaults({
                submitHandler: function(){
                    alert("Enviado");
                }
            });
          $("#login").submit(function(e){
              e.preventDefault();
          }).validate({
              rules:{
                  "nombre":{
                      required: true
                    },
                },
                messages:{
                    "nombre":{
                        required:"Ingresa tu nombre"
                    },
                },

                errorElement: "em",
                errorPlacement: function(error, element){
                    error.addClass("help-block");
                    error.insertAfter(element);
                }
            })
        });
    </script>
</body>
</html>

Se que es mucho codigo para revisar pero en serio necesito ayuda, no se si se trate de mis vinculaciones, en todo caso estaria feliz de enviar mas informacion respecto al contenido de mis carpetas.

2 respuestas 2

1

Solo te faltaría agregar a todos los name="" su identificador, además de cambiar el type="submit" por type="button" al botón Cancelar.

$(document).ready(function() {
  $.validator.setDefaults({
    submitHandler: function() {
      alert("Enviado");
    }
  });
  $("#login").submit(function(e) {
    e.preventDefault();
  }).validate({
    rules: {
      "nombre": {
        required: true
      },
      "apellidos": {
        required: true
      },
      "correo": {
        required: true
      },
      "telefono": {
        required: true
      },
      "contra": {
        required: true
      },
      "confirmContra": {
        required: true
      }
    },
    messages: {
      "nombre": {
        required: "Ingresa tu nombre"
      },
      "apellidos": {
        required: "Ingresa tus apellidos"
      },
      "correo": {
        required: "Ingresa tu correo"
      },
      "telefono": {
        required: "Ingresa tu teléfono"
      },
      "contra": {
        required: "Ingresa tu contraseña"
      },
      "confirmContra": {
        required: "Ingresa tu contraseña"
      }
    },

    errorElement: "em",
    errorPlacement: function(error, element) {
      if (element.attr('type') == "text") {
        error.addClass("help-block");
        error.insertAfter(element.parent('div'));
      } else {
        error.addClass("help-block");
        error.insertAfter(element.parent('div'));
      }
    }
  })
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<form method="post" id="login">
  <div class="input-group mb-3">
    <input type="text" class="form-control" name="nombre" id="nombre" placeholder="Nombre">
    <div class="input-group-append">
      <div class="input-group-text">
        <span class="fa fa-user"></span>
      </div>
    </div>
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" name="apellidos" id="apellidos" placeholder="Apellidos">
    <div class="input-group-append">
      <div class="input-group-text">
        <span class="fa fa-user"></span>
      </div>
    </div>
  </div>

  <div class="input-group mb-3">
    <input type="email" class="form-control" name="correo" id="correo" placeholder="Correo electrónico">
    <div class="input-group-append">
      <div class="input-group-text">
        <span class="fa fa-envelope"></span>
      </div>
    </div>
  </div>

  <div class="input-group mb-3">
    <input type="number" class="form-control" name="telefono" id="telefono" placeholder="Teléfono">
    <div class="input-group-append">
      <div class="input-group-text">
        <span class="fa fa-phone"></span>
      </div>
    </div>
  </div>

  <div class="input-group mb-3">
    <input type="password" class="form-control" name="contra" id="contra" placeholder="Contraseña">
    <div class="input-group-append">
      <div class="input-group-text">
        <span class="fa fa-lock"></span>
      </div>
    </div>
  </div>

  <div class="input-group mb-3">
    <input type="password" class="form-control" name="confirmContra" id="confirmContra" placeholder="Confirmar Contraseña">
    <div class="input-group-append">
      <div class="input-group-text">
        <span class="fa fa-lock"></span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <button type="button" class="btn btn-danger btn-block">Cancelar &#10008</button>
    </div>
    <div class="col-6">
      <button type="submit" class="btn btn-primary btn-block" id="registro">Registrate &#10003</button>
    </div>
  </div>
</form>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/additional-methods.min.js"></script>

3
  • Muchas gracias eso soluciono mi problema, solo tengo uno nuevo donde el mensaje de error se muestra dentro de la caja de texto, en vez de fuera de la misma el 22 mar. 2020 a las 23:58
  • Para eso podrías usar una condición dentro de tu función errorPlacement haciendo un insertAfter(element.parent('div')); puedes usar otros padres del elemento o usar otras condiciones para que vayas probando y ver como te quedan. Te edito la respuesta para que tú mismo lo veas.
    – Synay
    el 23 mar. 2020 a las 1:26
  • 1
    Muchas gracias en verdad me salvaste la vida el 23 mar. 2020 a las 20:50
0

Ok trata segun el ejemplo de la libreria:

<script>
    $.validator.setDefaults({
        submitHandler: function(){
            alert("Enviado");
        }
    });

     $().ready(function(){
        $("#login").submit(function(e){
            e.preventDefault();
        }).validate({
            rules:{
                "nombre":{
                    required: true
                },
            },
            messages:{
                "nombre":{
                    required:"Ingresa tu nombre"
                },
            },

            errorElement: "em",
            errorPlacement: function(error, element){
                error.addClass("help-block");
                error.insertAfter(element);
            }
        })
    });
</script>
12
  • Entonces lo cambiado a submit?, muchas gracias por responer. el 21 mar. 2020 a las 1:01
  • ¿No es un tanto redundante decir que una etiqueta button sea de tipo button?
    – user128299
    el 21 mar. 2020 a las 1:02
  • no cambia a type="button" y dime que pasa. no se puede recrear tu escript porque no se sabe como tus libraries corren.
    – Jpv
    el 21 mar. 2020 a las 1:02
  • no. porque button adentro de un formulario hace submit imediatamente. Si el formulario es Method=POST entonces manda $_POST al target.
    – Jpv
    el 21 mar. 2020 a las 1:03
  • Si pero como el ya maneja JS entonces lo puede dejar solo como button y capturar su evento submit para prevenirlo
    – user128299
    el 21 mar. 2020 a las 1:04

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.