Skip to main content
se añadieron 1354 caracteres en el cuerpo
Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24

formas mas sencillas de validar con css(valid,invalid) y html(required):

input:invalid {
    border: 1px solid #CB000F;
    color: red
}

input:valid {
    color: #00882D;
    font-weight: bold;
}

input:indeterminate {
    background-color: grey;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/ValidarFormulario/validar2.js"></script>
</head>

<body>
    <form action="" name="formulario" method="GET">
        <input type="text" name="nombre" id="nombre" maxlength="30" placeholder="Nombre" required>
        <br>
        <input type="radio" name="sexo" id="hombre" value="Hombre" required> Hombre
        <input type="radio" name="sexo" id="mujer" value="Mujer" required> Mujer
        <br>
        <input type="checkbox" name="terminos" id="terminos" required> Terminos y Condiciones
        <br>
        <input type="submit" id="btn" name="btn" value="Enviar">
    </form>
</body>

</html>

NOTA: es mejor hacer un return alert(); asi solo mostrara el campo que necesita ser completado y no todos "es un poco tedioso enviar en blanco y recibir tantos alert()" fuera de que el navegador podría bloquearlos!

NOTA: es mejor hacer un return alert(); asi solo mostrara el campo que necesita ser completado y no todos "es un poco tedioso enviar en blanco y recibir tantos alert()" fuera de que el navegador podría bloquearlos!

formas mas sencillas de validar con css(valid,invalid) y html(required):

input:invalid {
    border: 1px solid #CB000F;
    color: red
}

input:valid {
    color: #00882D;
    font-weight: bold;
}

input:indeterminate {
    background-color: grey;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/ValidarFormulario/validar2.js"></script>
</head>

<body>
    <form action="" name="formulario" method="GET">
        <input type="text" name="nombre" id="nombre" maxlength="30" placeholder="Nombre" required>
        <br>
        <input type="radio" name="sexo" id="hombre" value="Hombre" required> Hombre
        <input type="radio" name="sexo" id="mujer" value="Mujer" required> Mujer
        <br>
        <input type="checkbox" name="terminos" id="terminos" required> Terminos y Condiciones
        <br>
        <input type="submit" id="btn" name="btn" value="Enviar">
    </form>
</body>

</html>

NOTA: es mejor hacer un return alert(); asi solo mostrara el campo que necesita ser completado y no todos "es un poco tedioso enviar en blanco y recibir tantos alert()" fuera de que el navegador podría bloquearlos!

Origen Enlace
Bryro
  • 9.5k
  • 1
  • 11
  • 24

tu error se da en la asignacion de las variables ya que desde que inicia el script ya toma los valores iniciales.

para corregirlo solo debes incluir la asignacion luego del evento.

ejemplo:

let botonEnvia = document.getElementById("btn");

function validarFormulario() {
    botonEnvia.addEventListener("click", (evento) => {
        evento.preventDefault();
        let cajaTexto = document.getElementById("nombre")
        // sexo es el name no una clase
        // utilizamos selector de attributo para especificar
        let radioButtons = document.querySelectorAll('input[name="sexo"]')
        let terminos = document.getElementById("terminos")
        if (cajaTexto.value == "") {
            return alert("Falta tu nombre.");
        }
        // debemos validamos que no sea true
        // si pones || aunque alguno sea selecciona
        // seguira mandando el alert
        if (radioButtons[0].checked == false && radioButtons[1].checked==false) {
            return alert("Completa el campo sexo.");
        }
        if (terminos.checked == false) {
            return alert("Acepta los términos.");
        }
        return alert("todo correcto!");
    });
}

validarFormulario();
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/ValidarFormulario/validar2.js"></script>
</head>

<body>
    <form action="" name="formulario" method="GET">
        <input type="text" name="nombre" id="nombre" maxlength="30" placeholder="Nombre">
        <br>
        <!-- falta el class="sexo" en los radio buttons -->
        <input type="radio"  name="sexo" id="hombre" value="Hombre"> Hombre
        <input type="radio"  name="sexo" id="mujer" value="Mujer"> Mujer
        <br>
        <input type="checkbox" name="terminos" id="terminos"> Terminos y Condiciones
        <br>
        <input type="submit" id="btn" name="btn" value="Enviar">
    </form>
</body>

</html>

NOTA: es mejor hacer un return alert(); asi solo mostrara el campo que necesita ser completado y no todos "es un poco tedioso enviar en blanco y recibir tantos alert()" fuera de que el navegador podría bloquearlos!