0

Mi código consiste en un formulario para registrar un usuario y JavaScript se debe encargar de comprobar que la información de los campos sea correcta.

Aquí estaría mi código de html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
        <meta charset="UTF-8"/>
        <script type="text/javascript" src="miJavaScript.js"></script>
        <title>Registrarse</title>
    </head>
        <div class="container">
            <div class="cabecera">
                <header>
                    <div class = "titulo">
                        <h1>Organizacion DVD XIII</h1>
                    </div>
                    <div class="buscador">
                        <input type="text" id="letras" placeholder="Buscar cualquier pelicula" maxlenght="500">
                        <input type="submit" id="boton" name="buscar" value = "Buscar">  
                        <select name="categorias" id="buscador_cat" >
                            <option value="Prueba1">Todas las categorias</option>
                            <option value="Prueba2">Prueba 2</option>
                            <option value="Prueba3">Prueba 3</option>
                        </select>
                    </div>
                    <div class="links">
                         <a href="index.html">Indice</a>
                         <a href="login.html">Log In</a>
                     </div>
                </header>
            </div>
            
            <div class="navegacion">

                <nav>
                    <ul>
                        <li><a href="catalogo.html">Catalogo</a></li>
                        <li><a href="#">Carrito</a></li>
                        <li><a href="historial.html">Historial</a></li>
                    </ul>
                </nav>
            </div>

            <div class="loguearse"> 
                <article>
                    <form id="sigin" action = "signin.php" method="post" onsubmit="return validar();">
                        <h2>Registrarse</h2>
                        <label><b>Nombre de usuario</b></label>
                        <input type="text" id ="nombre" placeholder="Introduzca usuario" name="name" required >
                        <div id="nombreErr"></div>
                        <label><b>Contrasenia</b></label>
                        <input type="password" id ="pass" placeholder="Introduzca contrasenia" name="psw" required >
                        <div id="passErr"></div>
                        <label><b>Confirma contrasenia</b></label>
                        <input type="password" id ="pass2" placeholder="Introduzca contrasenia" name="psw2" required >
                        <div id="pass2Err"></div>
                        <label><b>Email</b></label>
                        <input type="text" id ="email" placeholder="Introduzca email" name="email" required >
                        <div id="emailErr"></div>
                        <label><b>Tarjeta de credito</b></label>
                        <input type="text" id ="cash" placeholder="Introduzca tarjeta" name="creditcard" required ><br>
                        <div id="cashErr"></div>
                        <input type="submit" name="registrarse" value="Registrarse">
                    </form>
               </article>
            </div>

           
            
            
            <div class="pie">
                <footer>
                    Copyright &copy; Organizacion DVD XIII
                </footer>
            </div>
        </div>
</html>
    

El código se encuentra en un fichero php porque luego me gustaría guardar la información que se registra, no se si el problema puede ser ese.

Aquí el código de JavaScript:

function validar(){
    var nombre, nombreErr, pass, passErr, pass2, pass2Err, email, emailErr, cash, cashErr, mensajeErr;
    nombre = document.getElementById("nombre").value; //Cogemos el valor de nombre
    nombreErr = document.getElementById("nombreErr").value; //Cogemos la referencia al error del nombre
    pass = document.getElementById("pass").value; //Cogemos el valor de password
    passErr = document.getElementById("passErr").value; //Cogemos la referencia al error de password 
    pass2 = document.getElementById("pass2").value; //Cogemos el valor de password2
    pass2Err = document.getElementById("pass2Err").value; //Cogemos la referencia al error de password2
    email = document.getElementById("email").value; //Cogemos el valor de email
    emailErr = document.getElementById("emailErr").value; //Cogemos la referencia al error de email 
    cash = document.getElementById("cash").value; //Cogemos el valor de cash
    cashErr = document.getElementById("cashErr").value; //Cogemos la refernecia al error de cash
    mensajeErr = ""; //Variable con el mensaje de error

    
    if(nombre.match(/^[a-zA-Z]+$/)){
        nombreErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Uso de carateres prohibidos.";
        nombreErr.innerHTML = mensajeErr;
        return false;
    } else if (nombre == ""){
        nombreErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Nombre de usuario vacio.";
        nombreErr.innerHTML = mensajeErr;
        return false;
    } else if(pass.lenght < 8 || pass.lenght > 25){
        passErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* La contrasenya debe encontrarse entre 8 y 25 carateres";
        passErr.innerHTML = mensajeErr;
        return false;
    } else if(!pass.match(/^[0-9a-zA-Z]+$/)){
        passErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Uso de caracteres prohibidos.";
        passErr.innerHTML = mensajeErr;
        return false;
    } else if(pass != pass2){
        pass2Err.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* La contrasenya no coinciden.";
        alert("Las contrasenyas no coinciden");
        pass2Err.innerHTML = mensajeErr;
        return false;
    } else if(email.length == 0){
        emailErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Campo vacio.";
        emailErr.innerHTML = mensajeErr;
        return false;
    } else if(!email.match(/^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i)){
        emailErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Formato no valido.";
        emailErr.innerHTML = mensajeErr;
        return false;
    } else if(cash.lenght == 0){
        passErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Campo vacio.";
        cashErr.innerHTML = mensajeErr;
        return false;
    } else if(!cash.match(/^[0-9]+$/)){
        cashErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Formato no valido.";
        cashErr.innerHTML = mensajeErr;
        return false;
    } else {
        return true;
    }

}

2
  • Ya generado el HTML, con el lenguaje de servidor que sea, no sería ese tu problema. Prueba a hacer un 'debug básico', para ver si tienes errores de sintaxis o de otro tipo. La consola de desarrollo de cualquier navegador moderno te mostrara posibles errores de tu código. Con Chome (en windows) pulsa F12 y ve a la pestaña "Console".
    – Orici
    el 14 oct. 2017 a las 10:28
  • Un consejo, ve añadiendo código poco a poco y probando que funciona, no escribas todo de golpe que luego no suelen funcionar las cosas a la primera ni aunque controles, y si ya no sabes como encontrar y solucionar los errores pues...
    – Orici
    el 14 oct. 2017 a las 10:44

3 respuestas 3

3

El código tiene muchos errores, pero viendolo de manera rápida pude darme cuenta de que falla lo siguiente:

  • Creaste una función para la validación pero nunca la invocas para hacer uso de ella.
  • Tienes el script de javascript en el head (Se carga primero que todos los elementos HTML, y por ello las funciones del DOM te arrojarán error), debes colocarlo antes de la etiqueta (Curiosamente me he dado cuenta que no añadiste la etiqueta body).

De momento pude que ver esto falla, sin embargo no lo corrí en mi navegador, creo estar seguro que tendrás que corregir otras cosas, pero puedes comenzar por aquí. Un saludo

1
  • ¿No la invoco dentro del "form" al empezar el formulario? Según he visto por internet onsubmit="return validador();" debería estar haciendolo.
    – Lexo
    el 14 oct. 2017 a las 17:01
0

Ya encontré el error. A parte de muchos errores que me habéis dicho, el hecho de que no me funcionara el JavaScript era que intentaba coger valores de vacíos.

Si corregimos las líneas del fichero JavaScript quedaría así:

function validar(){
    var nombre, nombreErr, pass, passErr, pass2, pass2Err, email, emailErr, cash, cashErr, mensajeErr;
    nombre = document.getElementById("nombre").value; //Cogemos el valor de nombre
    nombreErr = document.getElementById("nombreErr"); //Cogemos la referencia al error del nombre
    pass = document.getElementById("pass").value; //Cogemos el valor de password
    passErr = document.getElementById("passErr"); //Cogemos la referencia al error de password 
    pass2 = document.getElementById("pass2").value; //Cogemos el valor de password2
    pass2Err = document.getElementById("pass2Err"); //Cogemos la referencia al error de password2
    email = document.getElementById("email").value; //Cogemos el valor de email
    emailErr = document.getElementById("emailErr"); //Cogemos la referencia al error de email 
    cash = document.getElementById("cash").value; //Cogemos el valor de cash
    cashErr = document.getElementById("cashErr"); //Cogemos la refernecia al error de cash
    mensajeErr = ""; //Variable con el mensaje de error

    
    if(nombre.match(/^[a-zA-Z]+$/)){
        nombreErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Uso de carateres prohibidos.";
        nombreErr.innerHTML = mensajeErr;
        return false;
    } else if (nombre == ""){
        nombreErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Nombre de usuario vacio.";
        nombreErr.innerHTML = mensajeErr;
        return false;
    } else if(pass.length < 8 || pass.length > 25){
        passErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* La contrasenya debe encontrarse entre 8 y 25 carateres";
        passErr.innerHTML = mensajeErr;
        return false;
    } else if(!pass.match(/^[0-9a-zA-Z]+$/)){
        passErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Uso de caracteres prohibidos.";
        passErr.innerHTML = mensajeErr;
        return false;
    } else if(pass != pass2){
        pass2Err.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* La contrasenya no coinciden.";
        alert("Las contrasenyas no coinciden");
        pass2Err.innerHTML = mensajeErr;
        return false;
    } else if(email.length == 0){
        emailErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Campo vacio.";
        emailErr.innerHTML = mensajeErr;
        return false;
    } else if(!email.match(/^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i)){
        emailErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Formato no valido.";
        emailErr.innerHTML = mensajeErr;
        return false;
    } else if(cash.length == 0){
        passErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Campo vacio.";
        cashErr.innerHTML = mensajeErr;
        return false;
    } else if(!cash.match(/^[0-9]+$/)){
        cashErr.innerHTML = ""; //innerHtml anyade codigo a lo que haya
        mensajeErr = "* Formato no valido.";
        cashErr.innerHTML = mensajeErr;
        return false;
    } else {
        return true;
    }

}

Muchas gracias por vuestra ayuda!

0

Te cambio la primera parte de tu código para que puedas ver lo que recuperas de cada campo, como te dije en el comentario. Aun sin errores aparentes, la instrucción Console.log( "mensaje" ); muestra un mensaje en la consola de depuración del navegador. Además, te añadí una función para reemplazar cada llamada a document.getElementById( "id" ).value;. Ésto reduce mucho tu JS al minificar.

function getValueById( id ) {

                return document.getElementById( id ).value;
            }
            function validar(){
                var nombre, 
                    nombreErr, 
                    pass, 
                    passErr, 
                    pass2, 
                    pass2Err, 
                    email, 
                    emailErr, 
                    cash, 
                    cashErr, 
                    mensajeErr = ""; //Variable con el mensaje de error

                    nombre    = getValueById( "nombre" ); //Cogemos el valor de nombre
                    nombreErr = getValueById( "nombreErr" ); //Cogemos la referencia al error del nombre
                    pass      = getValueById( "pass" ); //Cogemos el valor de password
                    passErr   = getValueById( "passErr" ); //Cogemos la referencia al error de password 
                    pass2     = getValueById( "pass2" ); //Cogemos el valor de password2
                    pass2Err  = getValueById( "pass2Err" ); //Cogemos la referencia al error de password2
                    email     = getValueById( "email" ); //Cogemos el valor de email
                    emailErr  = getValueById( "emailErr" ); //Cogemos la referencia al error de email 
                    cash      = getValueById( "cash" ); //Cogemos el valor de cash
                    cashErr   = getValueById( "cashErr" ); //Cogemos la refernecia al error de cash
                    Console.log( "Valor de nombre: " . nombre );
                    Console.log( "Valor de nombreErr: " . nombreErr );
                    Console.log( "Valor de pass: " . pass );
                    Console.log( "Valor de passErr: " . passErr );
                    Console.log( "Valor de pass2: " . pass2 );
                    Console.log( "Valor de pass2Err: " . pass2Err );
                    Console.log( "Valor de email: " . email );
                    Console.log( "Valor de emailErr: " . emailErr );
                    Console.log( "Valor de cash: " . cash );
                    Console.log( "Valor de cashErr: " . cashErr );

...

Lo más básico para saber si tu función se esta ejecutando sería:

function validar() {
    Console.log( "Ejecutando validar()..." );
}

Ahora, debes llamar a esta función para que se ejecute. Viendo tu código puedes usar un evento onclick asociado al botón de submit, que no debe enviar el formulario directamente, sino ejecutar tu función.

Cambia la línea:

<input type="submit" name="registrarse" value="Registrarse">

por ejemplo por está otra

<button onclick="validar()">Registrarse</button>
1
  • He copiado tu código y sigue sin mostrarme nada. Ni siquiera en la consola del navegador.
    – Lexo
    el 14 oct. 2017 a las 17:15

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.