0

estoy practicando javascript con los formularios, lo que trato de hacer es que cuando el usuario no escriba nada en los inputs se debe de mostrar un mensaje mediante listas, para ello cree 2 funciones una para el nombre y otra para el correo y para que se ejecuten simultaneamente puse las 2 en una misma funcion cuando el input del nombre esta vacio me muestra el mensaje perfectamente pero el input del correo no me lo muestra estando este vacio tambien, no entiendo por que siendo estas 2 funciones casi el mismo codigo

<div class="contenedor">
    <form action="" class="formulario" id="formulario" name="formulario">
        <div class="input-formulario">
            <input type="text" name="nombre" placeholder="Nombre">
            <input type="email" name="correo" placeholder="Correo">

            <div class="sexo">
            <input type="radio" name="sexo" id="hombre" value="hombre">
            <label for="hombre" class="label-radio hombre">Hombre</label>
            <input type="radio" name="sexo" id="mujer" value="hombre">
            <label for="mujer" class="label-radio mujer">Mujer</label>
            </div>

            <div class="terminos">
            <input type="checkbox" name="terminos" id="terminos">
            <label for="terminos">Acepto Terminos y Condiciones</label>
            </div>
            <ul class="error" id="error"></ul>
        </div>
        <input type="submit" class="btn" value="Registrarse">
    </form>
</div>
<script src="formulario.js"></script>

//(function(){

var formulario = document.getElementById("formulario"),

    nombre = formulario.nombre,

    correo = formulario.correo,

    sexo = formulario.sexo,

    terminos = formulario.terminos,

    error = document.getElementById ("error");

function validarNombre(e){
    if(nombre.value == "" || nombre.value == null){
        error.style.display = "block";
        error.innerHTML += "<li>por favor rellena el nombre</li>";
        console.log ("por favor rellena el nombre");

        e.preventDefault();
    } else {
        error.style.display = "none";
    }
}

function validarCorreo(e){
    if(correo.value == "" || correo.value == null){
        error.style.display = "block";
        error.innerHTML += "<li>por favor rellena el correo</li>";
        console.log ("por favor rellena el correo");

        e.preventDefault();
    } else {
        error.style.display = "none";
    }
}

//function validarSexo(e){}

//function validarTerminos(e){}

function validarFormulario(e){
    validarNombre(e);
    validarCorreo(e);
    //validarSexo(e);
    //validarTerminos(e);
}
formulario.addEventListener("submit", validarNombre);    

//}())

1
  • La plataforma SO en español, soporta la creación de snippets, por favor considera agregar aquí todo el código necesario
    – BetaM
    el 27 sep. 2019 a las 1:36

1 respuesta 1

0

En el listener debes poner:

formulario.addEventListener("submit", validarFormulario); 

En ves de:

formulario.addEventListener("submit", validarNombre); 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.