1

Este es el código del formulario, pero no me toma al momento de abrir el archivo de HTML en Google.

El archivo de HTML me funciona sin problemas, solo que no me toman las validaciones. Intenté cambiar de versión pero no quiere funcionar.

<form id="registro_form">
  <h1 class="textologin">Ingrese sus datos para registrarse</h1>
  <div class="mb-3 px-lg-0 py-0 w-50 mx-auto">
    <label for="inputName" class="form-label">Nombre</label>
    <input type="text" class="form-control" name="inputName" id="inputName">
  </div>
  <div class="mb-3 px-lg-0 py-0 w-50 mx-auto">
    <label for="inputLastName" class="form-label">Apellido Paterno</label>
    <input type="text" class="form-control" name="inputLastName" id="inputLastName">
  </div>
  <div class="mb-3 px-lg-0 py-0 w-50 mx-auto">
    <label for="inputSecondLastName" class="form-label">Apellido Materno</label>
    <input type="text" class="form-control" name="inputSecondLastName" id="inputSecondLastName">
  </div>
  <div class="mb-3 px-lg-0 py-0 w-50 mx-auto">
    <label for="inputEmail" class="form-label">Correo electrónico</label>
    <input type="text" class="form-control" name="inputEmail" id="inputEmail">
    <div id="emailHelp" class="form-text">Nunca compartiremos tu correo electrónico con nadie más.</div>
  </div>
  <div class="mb-3 px-lg-0 py-0 w-50 mx-auto">
    <label for="InputPassword" class="form-label">Contraseña</label>
    <input type="password" class="form-control" name="inputPassword" id="inputPassword">
  </div>
  <div class="mb-3 form-check px-lg-0 py-0 w-50 mx-auto">
    <input type="checkbox" class="form-check-input" id="Check1">
    <label class="form-check-label" for="Check1">Verificado</label>
    <button type="submit" class="btn btn-primary ">Enviar</button>
  </div>
</form> 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
<script type="val/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script> 
<script src="./js/validacionfor

m.js

$(document).ready(function(){
  
    $("#registro_form").validate({
        

        rules:{
            inputName:{
                required:true,
                minlenght:4

            },
            inputLastName:{
                required:true,
                minlenght:4
            },
            inputSecondLastName:{
                required:true,
                minlenght:4
            },
            
            inputEmail:{
                required:true,
                email:true
            },

            InputPassword1:{
                required:true,
                minlenght:6
            },
            

            messages:{
                inputName:{
                    required:"el nombre es necesario para continuar",
                    minlenght:"Es necesario minimo 4 caracteres"
                }
            }

        }

    });

});

1 respuesta 1

0

Hay dos errores en tu código.

  • Estás dejando la llave messages dentro de la llave rules y ambas van al mismo nivel de las opciones que se pasan a la función validate.
  • Estás enviando llaves minlenght, que no existen, seguramente quieres referirte a minlength (con la h al final).

Como siempre, en javascript, debes asegurarte de anidar correctamente llaves y cuidarte de los errores de sintaxis.

Utilizando tu mismo formulario, dejo un snippet que corrige esos dos errores, para que puedas tomarlo como ejemplo funcional y colocar tus reglas a partir de él:

$(document).ready(function(){
  $("#registro_form").validate({
    rules:{
      inputName:{
        required: true,
        minlength: 4
      },
      inputLastName: {
        required: true,
        minlength: 4
      },
      inputEmail: {
        required: true,
        email: true
      }
    },
    messages: {
      inputName:{
        required: "El nombre es obligatorio",
        minlength: "El nombre no puede ser tan corto"
      },
      inputLastName: {
        required: "El apellido paterno es obligatorio",
        minlength: "El apellido paterno no puede ser tan corto"
      },
      inputEmail: {
        required: "Debe ingresar su correo electrónico",
        email: "Ingrese un correo electrónico válido"
      }
    }
  });
});
.error {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<form id="registro_form">
  <h1 class="textologin">Ingrese sus datos para registrarse</h1>
  <div class="mb-3 px-lg-0 py-0 w-50 mx-auto">
    <label for="inputName" class="form-label">Nombre</label>
    <input type="text" class="form-control" name="inputName" id="inputName">
  </div>
  <div class="mb-3 px-lg-0 py-0 w-50 mx-auto">
    <label for="inputLastName" class="form-label">Apellido Paterno</label>
    <input type="text" class="form-control" name="inputLastName" id="inputLastName">
  </div>
  <div class="mb-3 px-lg-0 py-0 w-50 mx-auto">
    <label for="inputSecondLastName" class="form-label">Apellido Materno</label>
    <input type="text" class="form-control" name="inputSecondLastName" id="inputSecondLastName">
  </div>
  <div class="mb-3 px-lg-0 py-0 w-50 mx-auto">
    <label for="inputEmail" class="form-label">Correo electrónico</label>
    <input type="text" class="form-control" name="inputEmail" id="inputEmail">
    <div id="emailHelp" class="form-text">Nunca compartiremos tu correo electrónico con nadie más.</div>
  </div>
  <div class="mb-3 px-lg-0 py-0 w-50 mx-auto">
    <label for="InputPassword" class="form-label">Contraseña</label>
    <input type="password" class="form-control" name="inputPassword" id="inputPassword">
  </div>
  <div class="mb-3 form-check px-lg-0 py-0 w-50 mx-auto">
    <input type="checkbox" class="form-check-input" id="Check1">
    <label class="form-check-label" for="Check1">Verificado</label>
    <button type="submit" class="btn btn-primary ">Enviar</button>
  </div>
</form>

Puedes probar el código aquí mismo en la respuesta haciendo clic al botón Ejecutar.

0

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.