0

Tengo un problema con el envío de un formulario. Los input se validan cada vez que pierden el foco pero, a su vez, se validan todos los input cuando se presiona el botón submit. He conseguido que si el fallo de validación se encuentra en el nombre o en el email se detenga el envío y salte una alerta para que el usuario conozca donde se encuentra el error. Ahora bien, no consigo realizar lo mismo con las contraseñas. Aunque de forma individual las funciones de contraseña funcionan, cuando se introduce la validación de submit se envían aunque sean erróneas. ¿Hay alguna forma de solucionar esto o alguien sabe si las contraseñas deben ser tratadas de distinta forma?

Adjunto el código:

HTML

    <form id="formulario" name="formulario">
    <fieldset>
        <legend>Datos para enviar</legend>
        <ul>
            <li>
                <label for="nombre">Introduce tu nombre:</label>
                <input type="text" id="nombre" name="nombre" placeholder="escribe tu nombre" onchange="noVacio(this)">
            </li>
            <li>
                <label for="email">Introduce tu email</label>
                <input type="email" id="email" name="email" placeholder="escribe tu email" onchange="validarEmail(this)">
            </li>
            <li>
                <label for="contrasena">Introduce la contraseña</label>
                <input type="password" name="contrasena" id="contrasena" placeholder="escribe tu contraseña" onchange="validar_clave()">
            </li>
            <li>
                <label for="contrasena2">Introduce de nuevo la contraseña</label>
                <input type="password" name="contrasena2" id="contrasena2" placeholder="escribe tu contraseña" onchange="claveCorrecta()">
            </li>
        </ul>

        <button id="inputsubmit" type="submit" class="formsubmit" onclick="verificar()">Enviar</button>

        <button id="inputreset" type="reset" class="formreset">Borrar datos</button>

    </fieldset>

</form>

JavaScript:

function noVacio(elem){

var cadena = elem.value;
if(cadena == null || cadena.length == 0){
     alert("Introduzca un valor, el campo es obligatorio.");
     return false;
}else {
    return true;    
}
}


function esCorreoE(elem) {
var cadena = elem.value;
cadena = cadena.toLowerCase();
if (cadena.indexOf("@") > 1) {
    var addr = cadena.substring(0, cadena.indexOf("@"));
    var dominio = cadena.substring(cadena.indexOf("@") + 1, cadena.length);
        if (dominio.indexOf(".") == -1) {
        alert("Verifica que el dominio sea correcto");
        return false;
        }
        for (var i = 0; i < addr.length; i++) {
            unCaracter = addr.charAt(i).charCodeAt(0);
            if ((i == 0 && (unCaracter == 45 || unCaracter == 46)) || (i == addr.length - 1 && unCaracter == 46)) {
                alert("Verifica la porción del nombre de usuario");
                return false;
            }
            if (unCaracter == 45 || unCaracter == 46 || unCaracter == 95 || (unCaracter > 47 && unCaracter < 58) ||
            (unCaracter > 96 && unCaracter < 123)) {
            continue;
            } else {
                alert("Verifica la porción del nombre de usuario.");
                return false;
            }
        }
        for (i = 0; i < dominio.length; i++) {
            unCaracter = dominio.charAt(i).charCodeAt(0);
            if ((i == 0 && (unCaracter == 45 || unCaracter == 46)) || ((i == dominio.length - 1 || i == dominio.length - 2) &&
                unCaracter == 46)) {
                alert("Verifica el dominio de la dirección.");
                return false;
            }
            if (unCaracter == 45 || unCaracter == 46 || unCaracter == 95 || (unCaracter > 47 && unCaracter < 58) ||
            (unCaracter > 96 && unCaracter < 123)) {
                continue;
            } else {
                alert("Verifica el dominio de la dirección.");
                return false;
            }
}
return true;
}
alert("La dirección de correo no está correctamente formateada. Por favor, compruébala.");
return false;
}

function validar_clave(){
var contrasenya = document.formulario.contrasena.value;
//La contraseña deberá tener al menos 10 valores, sino alert
if(contrasenya.length >= 6)
{       
    var minuscula = false;
    var mayuscula = false;
    var numero=false;

    //Hacemos un bucle para ver si existe, al menos, una minuscula y dos simbolos
    for(var i = 0;i<contrasenya.length;i++)
    {
        if(contrasenya.charCodeAt(i) >= 97 && contrasenya.charCodeAt(i) <= 122)
        {
            minuscula = true;
        }
        else if(contrasenya.charCodeAt(i) >= 65 && contrasenya.charCodeAt(i) <= 90)
        {
            mayuscula = true;
        }           
        else if(contrasenya.charCodeAt(i) >= 48 && contrasenya.charCodeAt(i) <= 57){
            numero = true;
        }       
    }           

    //Si no encontramos ninguna minuscula, alert
    if(minuscula != true){
        alert("La contraseña no incluye ninguna minúscula");
    }
    //Si no encontramos ningun simbolo
    if(mayuscula != true){
        alert("La contraseña no incluye ninguna mayúscula");
    }
    if(numero != true){
    alert("La contraseña debe algún dígito");
    }
    //Si tiene lo solicitado, true
    if(minuscula == true && mayuscula == true  && numero == true)
    {
        return true;
    }
}
else{
    alert("La contraseña debe incluir, al menos, 6 caracteres");
}
return false;
}


function claveCorrecta (){
var contrasenya1 = document.formulario.contrasena.value;
var contrasenya2 = document.formulario.contrasena2.value;

if(contrasenya1 != contrasenya2){
    alert("No ha introducido la misma contraseña, vuelva a intentarlo");
    return false;
} else {
    return true;
}
}

function validarEmail(elem){
noVacio(elem);
esCorreoE(elem);
}

function verificar(){
if(noVacio(nombre)==false ){
    alert("Rellene el apartado de nombre");
    event.preventDefault();
    return false;
}

if(noVacio(email)==false) {
    alert("Rellene el apartado email");
    event.preventDefault();
    return false;
}

if(esCorreoE(email)==false){
    event.preventDefault();
    return false;
}

if(validar_clave()==false ){
    alert("No es una contraseña válida");
    event.preventDefault();
    return false;
}

if(claveCorrecta()==false ){
    alert("Las contraseñas no son identicas");
    event.preventDefault();
    return false;
}
}

1 respuesta 1

0

Estas mezclando contextos diferentes y complicándote la vida. JS es un lenguaje muy polivalente y lo puedes usar a tu favor.

Index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="newjs.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Ejemplo</title>
</head>
<body>
    <form action="about:blank" target="_blank">
        <fieldset>
            <legend>Datos para enviar</legend>
            <ul>
                <li>
                    <label for="nombre">Introduce tu nombre:</label>
                    <input id="nombre" type="text" placeholder="John Smith" onkeyup="checkName()">
                </li>
                <li>
                    <label for="email">Introduce tu email</label>
                    <input id="email" type="email" placeholder="[email protected]" onkeyup="CheckEmail()">
                </li>
                <li>
                    <label for="contrasena">Introduce la contraseña</label>
                    <input id="pwd" type="password" placeholder="****" onkeyup="CheckPaswd(this)">
                    <div class="aclaracion" hidden>Tiene que tener al mens 1 número, 1 mayúsucula, 1 minúsula y ser mayor de 4 caracteres</div>
                </li>
                <li>
                    <label for="contrasena2">Introduce de nuevo la contraseña</label>
                    <input id="pwd2" type="password" placeholder="****" onkeyup="CheckPaswd(this)">
                    <div class="aclaracion" hidden>Tiene que tener al mens 1 número, 1 mayúsucula, 1 minúsula y ser mayor de 4 caracteres</div>
                    <div class="aclaracion2" hidden>Las contraseñas no coinciden</div>
                </li>
            </ul>
            <button id="submit" type="submit" value="Submit" disabled>Enviar</button>
            <button type="reset" onclick="erase()">Borrar datos</button>
        </fieldset>
    </form>
</body>
</html>

newjs.js

function checkName() {
    let nombre = document.getElementById("nombre")
    if (nombre.value.length < 3) {
        nombre.classList.add('invalido')
        nombre.classList.remove('valido')
    } else {
        nombre.classList.add('valido')
        nombre.classList.remove('invalido')
    }

    checkStatus();
}

function CheckEmail() {
    let email = document.getElementById('email')

    if(email.validity.valid) {
        email.classList.add('valido')
        email.classList.remove('invalido')
    } else {
        email.classList.add('invalido')
        email.classList.remove('valido')
    }

    checkStatus();
}

function CheckPaswd(elemnt) {
    let pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{4,}$/
    let mensaje = elemnt.nextElementSibling

    if(pattern.test(elemnt.value)) {
        elemnt.classList.add('valido')
        elemnt.classList.remove('invalido')
        mensaje.setAttribute('hidden', '')

    } else {
        elemnt.classList.add('invalido')
        elemnt.classList.remove('valido')
        mensaje.removeAttribute('hidden')
    }

    if(elemnt.id === 'pwd2') {
        let pwd = document.getElementById('pwd')
        let pwd2 = elemnt

        if(pwd.value == pwd2.value) {
            elemnt.classList.add('valido')
            elemnt.classList.remove('invalido')
            mensaje.nextElementSibling.setAttribute('hidden', '')
        } else {
            elemnt.classList.add('invalido')
            elemnt.classList.remove('valido')
            mensaje.nextElementSibling.removeAttribute('hidden')
        }
    }

    checkStatus();
}

function checkStatus() {
    let contador = document.getElementsByClassName('valido').length
    let btn = document.getElementById('submit')

    if(contador === 4) {
        btn.removeAttribute('disabled')
    } else {
        btn.setAttribute('disabled', '')
    }
}

function erase() {
    let btn = document.getElementById('submit')
    btn.setAttribute('disabled', '')
}

styles.css

input {
    border-radius: 3px;
 }

 .aclaracion .aclaracion2 {
    color: gray;
    margin-left: 15px;
 }

 .invalido {
    border-color: red;
 }

 .valido {
     border-color: green;
 }

Un consejo:

El mundo Web se centra en tres pilares HTML, Objetos DOM y JS. Si lo aprendes bien y sabes como interactúan, no tendrás mas problemas.

Un saludo 👋🏻

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.