1

Hola a todos soy algo nuevo en la progamacion web tengo un inconveniente con mi codigo ya que no valida nada de el formulario y redirige directamente a la otra pagina , he buscado varias soluciones y videos pero no he dado con la respuesta concreta a la solucion, adjunto el codigo en html y javascript. tambien tengo la duda si esta bien hacer el return con un onsubmit en el formulario, o puedo crear directamente el evento con un onclick dentro del input de registro

function validar() {
    var nombre, apeliidos, correo, usuario, clave, telefono, expresion;
    nombre = document.getElementById("Nombre").value;
    apeliidos = document.getElementById("Apellidos").value;
    correo = document.getElementById("Correo").value;
    usuario = document.getElementById("Usuario").value;
    clave = document.getElementById("Clave").value;
    telefono = document.getElementById("Telefono").value;
    expresion = /\w+@\w+\.+[a-z]/;

    if(nombre == "" || apeliidos == "" || correo == "" || usuario == "" || clave == "" || telefono === "") {

        alert("Todos los campos son obligatorios");
        return false;
    }
    if(nombre.length>30) {
        alert("El nombre es muy largo");
        return false;
    }
    if(apeliidos.length>80) {
        alert("Los apellidos son muy largos ");
        return false;
    }
    if(correo.length>100) {
        alert("El correo es muy largo");
        return false;
    }
    if(!expresion.test(correo)){
        alert("el correo no es valido ");
        return false;
    }
    if(usuario.length>80 || clave.length>20) {
        alert("El usuario y la clave solo deben tener 20 caracteres como maximo");
        return false;
    }
    if(telefono.length>10) {
        alert("El telefono es muy largo");
        return false;
    }
    if(isNaN(telefono)) {
        alert("el telefono ingresado no es un número ");
        return false;
    }
    
    

}
    <form action="registrar.php" id="formulario" method="post" class="form-register" onsubmit="return validar()"> 
        <h2 style="font-family: 'Pacifico', cursive;" class="form__titulo">Crear cuenta</h2>
        <div class="contenedor-inputs">
            <input type="text"id="Nombre" name="nombre" placeholder="Nombre" class="input-48" required>
            <input type="text"id="Apellidos" name="apellidos" placeholder="Apellidos" class="input-48" required>
            <input type="email"id="Correo" name="correo" placeholder="Correo" class="input-100" required>
            <input type="text"id="Usuario" name="usuario" placeholder="Usuario" class="input-48" required>
            <input type="password"id="Clave" name="clave" placeholder="Contraseña" class="input-48" required>
            <input type="text"id="Telefono" name="telefono" placeholder="Telefono" class="input-100" required >
            <input type="submit"  value="Registrar" class="btn-enviar">
           
            <p class="form__link">¿Ya tienes una cuenta?<a href="#">Ingresa aquí</a></p>
        </div>
    </form>
    <script src="validar.js"></script> 
</body>
</html>

1 respuesta 1

1

No funciona porque el evento onsubmit debes colocarlo en la etiqueta <form> no en uno de los inputs del formulario, no es lo mismo.

Esto es lo que tienes, borra el onsubmit de ellí

<input type="text"id="Nombre" name="nombre" placeholder="Nombre" class="input-48" onsubmit="return validar()">

Agregalo aqui

<form action="registrar.php" id="formulario" method="post" 
  class="form-register" onsubmit="return validar()"> 

Dado que tu formulario tiene un ID en lugar de agregar el onsubmit puedes escuchar el evento con

const formulario = document.getElementById('formulario');

formulario.addEventListener('submit', (event) => {
  if(!validar()){
    event.preventDefault();
  }
});

Copy-Paste de tu código para que veas que si funciona

function validar() {
    var nombre, apeliidos, correo, usuario, clave, telefono, expresion;
    nombre = document.getElementById("Nombre").value;
    apeliidos = document.getElementById("Apellidos").value;
    correo = document.getElementById("Correo").value;
    usuario = document.getElementById("Usuario").value;
    clave = document.getElementById("Clave").value;
    telefono = document.getElementById("Telefono").value;
    expresion = /\w+@\w+\.+[a-z]/;

    if(nombre == "" || apeliidos == "" || correo == "" || usuario == "" || clave == "" || telefono === "") {

        alert("Todos los campos son obligatorios");
        return false;
    }
    if(nombre.length>30) {
        alert("El nombre es muy largo");
        return false;
    }
    if(apeliidos.length>80) {
        alert("Los apellidos son muy largos ");
        return false;
    }
    if(correo.length>100) {
        alert("El correo es muy largo");
        return false;
    }
    if(!expresion.test(correo)){
        alert("el correo no es valido ");
        return false;
    }
    if(usuario.length>80 || clave.length>20) {
        alert("El usuario y la clave solo deben tener 20 caracteres como maximo");
        return false;
    }
    if(telefono.length>10) {
        alert("El telefono es muy largo");
        return false;
    }
    if(isNaN(telefono)) {
        alert("el telefono ingresado no es un número ");
        return false;
    }
    
    

}
<form action="registrar.php" id="formulario" method="post" class="form-register" onsubmit="return validar()"> 
        <h2 style="font-family: 'Pacifico', cursive;" class="form__titulo">Crear cuenta</h2>
        <div class="contenedor-inputs">
            <input type="text"id="Nombre" name="nombre" placeholder="Nombre" class="input-48" required>
            <input type="text"id="Apellidos" name="apellidos" placeholder="Apellidos" class="input-48" required>
            <input type="email"id="Correo" name="correo" placeholder="Correo" class="input-100" required>
            <input type="text"id="Usuario" name="usuario" placeholder="Usuario" class="input-48" required>
            <input type="password"id="Clave" name="clave" placeholder="Contraseña" class="input-48" required>
            <input type="text"id="Telefono" name="telefono" placeholder="Telefono" class="input-100" required >
            <input type="submit"  value="Registrar" class="btn-enviar">
           
            <p class="form__link">¿Ya tienes una cuenta?<a href="#">Ingresa aquí</a></p>
        </div>
    </form>

Algo que podría faltar en tu función validar es retornar un true al finalizar todas las pruebas satisfactoriamente, digo podría porque en la prueba que hice funciona tu código aun sin este.

Por otro lado valida que en la consola no tengas errores en algún otro lado, si tienes un error javascript en alguna otra función que se ejecute antes, impedirá que llegue a ejecutarse.

3
  • si disculpa subi mal el codigo ya lo corregi y puse el onsubmit dentro de la etiqueta form de igual me sigue sin validar
    – Liodos
    Commented el 3 jul. 2020 a las 5:22
  • Edite la respuesta para agregar tu propio código y veas que si funciona Commented el 3 jul. 2020 a las 7:48
  • gracias amigo si tenia errores en javascript en otro lado por eso no validaba
    – Liodos
    Commented el 3 jul. 2020 a las 21:27

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.