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>