Tengo un formulario con nombre, apellido y correo electrónico, y necesito hacer una alerta si un campo está vacío. Hice una alerta pero aparece para cada campo que está vacío.
Este es el js:`
document.querySelector("#book").addEventListener("click", () => { let inp = document.querySelectorAll(".form-control"); for (let i = 0; i < inp.length; i++) { if (inp[i].value == "") { alert("All fields must be filled!"); } } });`
La clase de control de formulario está en todos los campos de entrada. Si dejo las 3 entradas vacías, la alerta aparece 3 veces.
Por favor ayuda, mi cerebro está atascado.
puede usar array.some en las entradas obtenidas por querySelectorAll() para generar solo una alerta si un campo no está vacío
document.querySelector("#book").addEventListener("click", () => { let inputs = document.querySelectorAll(".form-control"); if ([...inputs].some(input => input.value === '')) { alert("All fields must be filled !"); } }); <input class="form-control" /> <input class="form-control" /> <button id="book">validate</button>Simplemente puede usar una matriz para obtener todos los errores dentro de una sola array y después de que finalice el ciclo, puede dar la alerta final.
document.querySelector("#book").addEventListener("click", () => { let inp = document.querySelectorAll(".form-control"); let errors = []; for (let i = 0; i < inp.length; i++) { if (inp[i].value == "") { errors.push("Error "+ i); } } if(errors != []){ alert("All fields must be filled!"); } });Si desea un mensaje genérico, puede mostrarlo una vez e incluso detener el ciclo:
document.querySelector("#book").addEventListener("click", () => { let inp = document.querySelectorAll(".form-control"); for (let i = 0; i < inp.length; i++) { if (inp[i].value == "") { alert("All fields must be filled!"); break; // <-- alert was shown, nothing else to do } } });Si desea mostrar un solo mensaje, pero específico para los campos que faltan, debe recopilarlos en el bucle y mostrar el mensaje único después, algo así como
document.querySelector("#book").addEventListener("click", () => { let inp = document.querySelectorAll(".form-control"); let missing=[]; for (let i = 0; i < inp.length; i++) { if (inp[i].value == "") { missing.push(inp[i].name); } } if(missing.length) { alert("Please fill the following fields too: "+missing.join()); } });