0

Estoy realizando una práctica en javascript y estoy intentando validar que todos los campos de los <input>s estén llenos, para después mostrar el botón de enviar formulario, pero al momento de validar que cada <input> esté lleno, se genera el botón con tan solo un <input> lleno, cuando el botón se debe mostrar cuando todos los <input>s se llenen

const form = document.querySelectorAll('.form__element-input');
const boton = document.querySelector('#enviar');

form.forEach((input, index) => {
    boton.classList.add('none__send');
    input.addEventListener('change', () => {
        if (input.value.trim() !== '') {
            boton.classList.remove('none__send');
            return;
        }
    })
});
.none__send {
  display:none;
}
<form method="post" class="form">
    <div class="form__title">
    </div>
    <div class="form__element">
        <input type="number" name="cedula" class="form__element-input"/>
    </div>
    <div class="form__element">
        <input type="number" name="telefono" class="form__element-input"/>
    </div>
    <div class="form__element">
        <input type="text" name="nombre" class="form__element-input"/>
    </div>
    <div class="form__button">
        <button type="submit" id="enviar">enviar</button>
    </div>
</form>

1 respuesta 1

5

Al recorrer todos los elementos, añades un eventListener a cada uno, ese evento se ejecutará cuando se escribe en el <input>, haciendo que cuando se escriba en ese elemento, se muestre el botón sin importar si los otros estén llenos, debes usar el selector con querySelectorAll otra vez, este método te da un NodeList, el cual no tiene métodos nativos de un array como Array.prototype.some, por lo que lo podemos convertir de una manera simple

[...querySelectorAll("...")]

De esta manera concatenamos lo que esté adentro del iterable valor de retorno de querySelectorAll a un array, convirtiendo todo a un array

El propósito de esto es que una vez sea un array, usar Array.prototype.some para comprobar si hay algún <input> vacío

const form = [...document.querySelectorAll('.form__element-input')];
const boton = document.querySelector('#enviar');

form.forEach((input, index) => {
    boton.classList.add('none__send');
    input.addEventListener('input', () => {
        if (form.some(el => el.value.trim() === "")) {
            boton.classList.add('none__send');
        } else {
            boton.classList.remove('none__send');
        }
    })
});
.none__send {
  display:none;
}
<form method="post" class="form">
    <div class="form__title">
    </div>
    <div class="form__element">
        <input type="number" name="cedula" class="form__element-input"/>
    </div>
    <div class="form__element">
        <input type="number" name="telefono" class="form__element-input"/>
    </div>
    <div class="form__element">
        <input type="text" name="nombre" class="form__element-input"/>
    </div>
    <div class="form__button">
        <button type="submit" id="enviar">enviar</button>
    </div>
</form>

1
  • Gran respuesta muchas gracias Commented el 19 abr. 2021 a las 20:45

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.