1

Necesito validar un formulario HTML con Javascript pero no esta funcionando

HTML

<!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>
        <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>
    <script>
        validarFormulario();
    </script>
</body>

</html>

Javascript

let cajaTexto = document.getElementById("nombre")
let radioButtons = document.querySelectorAll(".sexo")
let terminos = document.getElementById("terminos")
let botonEnvia = document.getElementById("btn")

function validarFormulario() {
    botonEnvia.addEventListener("click", (evento) => {
        evento.preventDefault()
        if (cajaTexto.value == "") {
            alert("Falta tu nombre.");
        }
        if (radioButtons[0].checked == true || radioButtons[1].checked == true) {} else {
            alert("Completa el campo sexo.");
        }
        if (terminos.checked == false) {
            alert("Acepta los términos.");
        }
    });
}

El problema es que no hace las validaciones, no me muestra los alert.

Según la primera respuesta me da este error error

2
  • Ya lo reviso, pero no me hace la validación de TextBox, debería ir validando conforme vaya entrando en los if entonces me debería de mostrar tres mensajes consecutivos si no se a ingresado nada. @BetaM Commented el 18 may. 2020 a las 19:01
  • Si es true debería de enviar los datos, ¿como se lo indico? Commented el 18 may. 2020 a las 19:03

2 respuestas 2

1

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>

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!

3
  • Con la primera forma no me valida, estoy usando el Google Chome de Microsoft(Cromium) Commented el 18 may. 2020 a las 21:22
  • He copiado todo tu código HTML y Javascript y no me funciona en ningún navegador, ¿No se como te sale acá? Commented el 18 may. 2020 a las 22:08
  • Lo solucione de la siguiente manera <script src="/ValidarFormulario/validar2.js" defer></script> Commented el 19 may. 2020 a las 2:30
1

Deberías considerar lo siguiente:

  • Los checkbox no te los esta tomando en cuenta por que:
    • Los recuperas indicando el nombre de una clase, pero la misma no la asignaste a las etiquetas HTML
    • Tienes mal condicionada la evaluación de los checkbox ya que si están checked quiere decir que el usuario ya eligió algo
    • Entonces para el punto anterior debería alcanzar con cambiar el valor a evaluar de true a false
  • Considera que tus if deben seguir la estructura de if/else if/else ya que si los pones como independientes, es decir como if solamente entonces evaluaría cada condición por separado

Código:

    <!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>
            <input type="radio" class="sexo" name="sexo" id="hombre" value="Hombre"> Hombre
            <input type="radio" class="sexo" 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>
        <script>
          let cajaTexto = document.getElementById("nombre")
    let radioButtons = document.querySelectorAll(".sexo")
    let terminos = document.getElementById("terminos")
    let botonEnvia = document.getElementById("btn")
    
    function validarFormulario() {
        botonEnvia.addEventListener("click", (evento) => {
            evento.preventDefault()
            if (cajaTexto.value == "") {
                alert("Falta tu nombre.");
            } else if (radioButtons[0].checked == false && radioButtons[1].checked == false) {
                alert("Completa el campo sexo.");
            }
            else if (terminos.checked == false) {
                alert("Acepta los términos.");
            } else {
              alert("Todo bien se procesa")
            }
        });
    }
    validarFormulario();
        </script>
    </body>
    
    </html>

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.