How do i display a single alert for multiple fields being empty?-CodePudding

I have a form with first name, last name and email, and i need to make an alert if a field is empty. I made an alert but it comes up for every field that is empty.

This is the 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!");
    }
  }
});

The form-control class is on all the input fields. If i leave all 3 inputs empty, the alert comes up 3 times.

Please help, my brain is stuck.

CodePudding user response：

You can simply use an array to get all errors inside a single array and after the loop finish then you can give the final alert.

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!");
  }
});

CodePudding user response：

If you want a generic message, you can just display it once, and even stop the loop:

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
    }
  }
});

If you want to show a single message, but specific to the missing field(s), you have to collect them in the loop, and show the single message after, something like

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());
  }
});

CodePudding user response：

You can use the FormData object, then loop through all of the entries. If at least one of them is empty, send one alert and return out of the function.

<form>
    <label for="firstName">First name:</label>
    <input type="text" placeholder="first name" name="firstName" />
    <label for="lastName">last name:</label>
    <input type="text" placeholder="last name" name="lastName" />
    <label for="email">First name:</label>
    <input type="text" placeholder="email" name="email" />
    <button type="submit">submit</button>
</form>

<script>
    const form = document.querySelector('form');

    const handleClick = (e) => {
        e.preventDefault();
        const formData = [...new FormData(e.target)];

        for (const [key, val] of formData) {
            if (!val) return alert('Failed to fill all fields.');
        }

        alert('Success!');
    };

    form.addEventListener('submit', handleClick);
</script>

CodePudding user response：

you can use array.some on inputs get by querySelectorAll() to raise only one alert if one fields is not empty

document.querySelector("#book").addEventListener("click", () => {
  let inputs = document.querySelectorAll(".form-control");
  if ([...inputs].some(input => input.value === '')) {
      alert("All fields must be filled !");
  }
});

<input  />
<input  />
<button id="book">validate</button>

CodePudding user response：

Us a boolean variable to remember whether any field is empty while looking at them in the loop.

document.querySelector("#book").addEventListener("click", () => {
  let anyEmpty = false;

  let inp = document.querySelectorAll(".form-control");
  for (let i = 0; i < inp.length; i  ) {
    if (inp[i].value == "") {
      anyEmpty = true;
      break;
    }
   
    if(anyEmptry) {
      alert("All fields must be filled!");
    }
  }
});