1

¿Por que mi función no ejecuta el primer if en mi validación en Javascript? tengo este problema con mi código en javascript que si entra la función pero no las condiciones por lo tanto no entra la evaluación de los datos y envia los datos aun que los campos estes vacíos. No tengo idea cual es el error. Les dejo mi código html y mi javascript ojalá me puedan ayudar saludos.

Este es mi codigo js

function vale() {
    alert("Entra la Fucncion");
    var nombre, apellidos, correo, password, cofpassword, telefono, celular, expression, calle, colonia, ciudad, estado, cp, terminos;

    nombre = document.getElementById("nombre").value;
    apellidos = document.getElementById("apelli").value;
    correo = document.getElementById("correo").value;
    password = document.getElementById("contra").value;
    cofpassword = document.getElementById("confcont").value;
    telefono = document.getElementById("telf").value;
    celular = document.getElementById("celu").value;
    calle = document.getElementById("calle").value;
    colonia = document.getElementById("colonia").value;
    ciudad = document.getElementById("ciudad").value;
    estado = document.getElementById("estado").value;
    cp = document.getElementById("cp").value;
    terminos = document.getElementById("terminos").checked;

    expression = /\w+@\w+\.+[a-z]/;

    alert("Entra la Fucncion");
if (nombre == "" || apellidos == "" || correo == "" || password == "" || cofpassword == "" || telefono == "" || celular == "" || calle == "" || colonia == "" || ciudad == "" || estado == "" || cp == "") {
        alert("Todos los campos son obligatorios");
        return false;
    } else if (nombre.length > 30) {
        alert("El nombre es muy largo");
        return false;
    } else if (apellidos.length > 80) {
        alert("Los apellidos son muy largos");
        return false;
    } else if (correo.length > 100) {
        alert("El correo es muy largo");
        return false;
    } else if (!expression.test(correo)) {
        alert("El correo no es valido");
        return false;
    } else if (password.length > 20 || cofpassword.length > 20) {
        alert("La contraseña es muy larga");
        return false;
    } else if (password != cofpassword) {
        alert("La contraseña no coincide");
        return false;
    } else if (telefono.length > 10 || celular.length > 10) {
        alert("Los numeros de telefono o celular son debe ser de 10 digitos");
        return false;
    } else if (isNaN(telefono)) {
        alert("El telefono no es un numero");
        return false;
    } else if (isNaN(celular)) {
        alert("El celular no es un numero");
        return false;
    } else if (calle.length > 100) {
        alert("La calle es muy larga");
        return false;
    } else if (colonia.length > 50) {
        alert("La colonia es muy larga");
        return false;
    } else if (ciudad.length > 50) {
        alert("La ciudad es muy larga");
        return false;
    } else if (estado.length > 50) {
        alert("La estado es muy larga");
        return false;
    } else if (isNaN(cp)) {
        alert("El CP debe ser un numero");
        return false;
    } else if (terminos == false) {
        alert("Deve de Aceptar los terminos y Condiciones");
        return false;
    } else {
        return true;
    }

}

este es mi codigo html

<!DOCTYPE html>
<html>

<head>
    <title>Registro</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/header.css">
    <link rel="stylesheet" type="text/css" href="../css/estilos.css">
    <script src="validar.js"></script>
</head>

<body>
    <header>
        <div class="Contenedor">
            <div class="fondo">

                <a href="../index.html"><img src="../Img/UembekuaLogo.png" id="Logo" alt="Logo Uembekua" onsubmit="return vale()"></a>

            </div>
            <nav>
                <ul class="nav">
                    <li><a href="../index.html">Home</a></li>
                    <li><a href="Servicios.html">Servicios</a>
                        <ul class="Submenu">
                            <li><a href="Paquetes.html">Paquetes</a></li>
                            <li><a href="Cursos.html">Cursos</a></li>
                            <li><a href="Vacaciones.html">Vacaciones</a></li>
                            <li><a href="Masajes.html">Masajes</a></li>
                            <li><a href="Precios.html">Precios</a></li>
                            <li><a href="Reservacion.html">Reserva tu Servicio</a></li>
                        </ul>
                    </li>
                    <li><a href="Conocenos.html">Conocenos</a></li>
                    <li><a href="Instalaciones.html">Instalaciones</a></li>
                    <li><a href="Informacion.html">Info</a></li>

                </ul>
            </nav>

        </div>
    </header>
    <main>

        <section>
            <form style="padding: 20px; margin-top: 20px" method="post" action="reg.php" onsubmit=" return vale()">

                <font style="font-family: Rockwell;">
                    <center>

                        <table align="Center" cellpadding="5px" cellspacing="5px">
                            <tr>
                                <td align="center" colspan="3">
                                    <h2>Crear cuenta</h2><br>
                                </td>

                            </tr>
                            <tr>
                                <td>Nombre:</td>
                                <td colspan="2"><input type="text" placeholder="Nombre" id="nombre" name="nombre"><br></td>
                            </tr>

                            <tr>
                                <td>Apellidos: </td>
                                <td colspan="2"><input type="text" placeholder="Apellidos" id="apelli" name="apelli"><br></td>
                            </tr>



                            <tr>
                                <td>Correo:</td>
                                <td colspan="2"><input type="email" placeholder="[email protected]" id="correo" name="correo"><br></td>
                            </tr>
                            <tr>
                                <td>Contraseña:</td>
                                <td colspan="2"><input type="password" placeholder="Contaseña" id="contra" name="contra"><br></td>
                            </tr>

                            <tr>
                                <td>Confirmar contraseña:</td>
                                <td colspan="2"><input type="password" placeholder="Contaseña" id="confcont"><br></td>
                            </tr>
                            <tr>
                                <td>Teléfono:</td>
                                <td colspan="2"><input type="text" placeholder="Tu teléfono" id="telf" name="telf"><br></td>
                            </tr>
                            <tr>
                                <td>Celular:</td>
                                <td colspan="2"><input type="text" placeholder="Tu celular" id="celu" name="celu"><br></td>
                            </tr>
                               <tr>
                                <td>Calle#:</td>
                                <td colspan="2"><input type="text" placeholder="Tu Calle#" id="calle" name="calle"><br></td>
                            </tr>
                            </tr>
                               <tr>
                                <td>Colonia:</td>
                                <td colspan="2"><input type="text" placeholder="Tu colonia" id="colonia" name="colonia"><br></td>
                            </tr>
                            </tr>
                               <tr>
                                <td>Ciudad:</td>
                                <td colspan="2"><input type="text" placeholder="Ciudad" id="ciudad" name="ciudad"><br></td>
                            </tr>
                              <tr>
                                <td>Estado:</td>
                                <td colspan="2"><input type="text" placeholder="Estado" id="estado" name="estado"><br></td>
                            </tr>
                            <tr>
                                <td>CP:</td>
                                <td colspan="2"><input type="text" placeholder="CP" id="cp" name="cp"><br></td>
                            </tr>

                              <tr cellpadding="5" align="center">

                                <td colspan="2"><input type="checkbox" name="terminos"><a href="https://www.timeinc.net/subs/privacy/termsofservice/pptos.html">Terminos y Condiciones</a></td>
                                </tr>

                            <tr cellpadding="5" align="center">

                                <td colspan="2"><input type="submit" id="save" value="Registrarse"></td>
                                </tr>

                        </table>
                    </center>
                </font>
            </form>
            <center>
             <a href="Reservacion.html"><input type="submit" name="cancel" value="Cancelar"></a>
            </center>
        </section>

    </main>

    <footer>
        <p align="center" id="copyright">Uémbekua &mdash; Todos los derechos reservados &copy; </p>
        <a href="#"><img src="../Img/facebook1.png" id="img1"></a>
        <a href="#"><img src="../Img/instagram1.png" id="img2"></a>
    </footer>

</body>

</html>

1 respuesta 1

2

Está rompiendo porque a el checkbox terminos no tiene id: <input type="checkbox" name="terminos">

Lo que está pasando es que en esta línea: terminos = document.getElementById("terminos").checked; no encuentra el elemento html e intenta obtener la propiedad checked, al ser null y no contar con la propiedad, el script falla y se detiene por completo, antes de considerar el if.

Para solucionar el problema sólo deberías agregar el id al elemento para que el script pueda verlo: <input type="checkbox" name="terminos" id="terminos">

4
  • Muchas gracias no lo hab ia visto te lo agradesco
    – Mario Traz
    el 12 may. 2019 a las 0:26
  • Disculpa, es normal que funcione en el localhost, pero ya en el host en linea no entra ni la función, que crees cual sea el problema ?
    – Mario Traz
    el 12 may. 2019 a las 1:14
  • Seguramente sea como estas llamando al script desde el html, prueba cambiando el src del script a un path relativo ./validar.js
    – ramirozap
    el 12 may. 2019 a las 9:00
  • perfecto. ya esta solucionado gracias
    – Mario Traz
    el 12 may. 2019 a las 13:01

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.