How to display form validation error messages accurately for more than two input fields using only JavaScript?

Question

I have created a JavaScript function that checks a form during submitting the input and displays an error message if there's no input.

It works perfectly when none input is given. It displays all the error messages correctly.

The Problem: But if I leave just the first field blank i.e, the fullname; the if loop stops there and doesn't display the second or third error messages i.e, the streetaddr & quantity.

NOTE: This error happens only when one of streetaddr or quantity is not given with addition to the first field i.e, fullname.

What should I do to display the error messages correctly. According to the blank input regardless the input field comes first or second or third.

Also, I prefer to do this with just Vanilla JavaScript, no frameworks/libraries. I'm trying to learn!

Link(s): This is a challenge from Wikiversity

/* Checking form function */
function checkForm(){
 window.alert("You clicked Submit!");
 var fullNameCheck = document.getElementById("fullname");
 var addressCheck = document.getElementById("streetaddr");
 var quantityCheck = document.getElementById("quantity");
 var is_valid = false;
 /* If statements to check if text box is empty */
 if (fullNameCheck.value=="" && addressCheck.value=="" && quantityCheck.value=="") {
  document.getElementById("nameerrormsg").style.display="inline";
  document.getElementById("addrerrormsg").style.display="inline";
  document.getElementById("qtyerrormsg").style.display="inline";
  is_valid = false;
 } else if(fullNameCheck.value==""){
  document.getElementById("nameerrormsg").style.display="inline";
  document.getElementById("addrerrormsg").style.display="none";
  document.getElementById("qtyerrormsg").style.display="none";
  is_valid = false;
 } else if (addressCheck.value==""){
  document.getElementById("addrerrormsg").style.display="inline";
  document.getElementById("nameerrormsg").style.display="none";
  document.getElementById("qtyerrormsg").style.display="none";
  is_valid = false;
 } else if (quantityCheck.value==""){
  document.getElementById("qtyerrormsg").style.display="inline";
  document.getElementById("nameerrormsg").style.display="none";
  document.getElementById("addrerrormsg").style.display="none";
  is_valid = false;
 } else {
  document.getElementById("nameerrormsg").style.display="none";
  document.getElementById("addrerrormsg").style.display="none";
  document.getElementById("qtyerrormsg").style.display="none";
  is_valid = true;

 } return is_valid;
}

.errormsg{
 color: red;
 background-color: yellow;
 display: none;
}

<form action="mailto:me@fakeemail.com" onsubmit="return checkForm();">
    <fieldset>

      <legend>Personal details</legend>
      <p>
        <label>
          Full name:
          <input type="text" name="fullname" id="fullname">
        </label>
      </p>
      <p class="errormsg" id="nameerrormsg">Please enter your name above</p>

      <p>
        <label>
          Street Address:
          <input type="text" name="streetaddr" id="streetaddr">
        </label>
      </p>
      <p class="errormsg" id="addrerrormsg">Please enter your street address</p>

      <!-- Quantity input -->
      <p>
        <label>
          Quantity:
          <input type="text" name="quantity" id="quantity">
        </label>
      </p>
      <p class="errormsg" id="qtyerrormsg">Please enter your quantity</p>

    </fieldset>
    <input type="submit" value="Submit it!"> 
  </form>

score 3 · Answer 1 · answered May 05 '20 at 06:07

I'd prefer to just make the fields required, no Javascript needed:

<form action="mailto:me@fakeemail.com" onsubmit="return checkForm();">
  <fieldset>

    <legend>Personal details</legend>
    <p>
      <label>
          Full name:
          <input type="text" name="fullname" id="fullname" required>
        </label>
    </p>

    <p>
      <label>
          Street Address:
          <input type="text" name="streetaddr" id="streetaddr" required>
        </label>
    </p>

    <!-- Quantity input -->
    <p>
      <label>
          Quantity:
          <input type="text" name="quantity" id="quantity" required>
        </label>
    </p>

  </fieldset>
  <input type="submit" value="Submit it!">
</form>

Otherwise, you can first hide all the error messages. Iterate over all inputs in the form, and if invalid (missing), navigate to its ancestor p and then to the adjacent .errormsg and set its display.

It would also be a good idea to avoid inline handlers entirely, they have too many problems to be worth using. Attach listeners properly using addEventListener in Javascript instead.

document.querySelector('form').addEventListener('submit', () => {
  for (const errormsg of document.querySelectorAll('.errormsg')) {
    errormsg.style.display = 'none';
  }
  let valid = true;
  for (const input of document.querySelectorAll('form input')) {
    if (input.value) {
      // valid
      continue;
    }
    valid = false;
    input.closest('p').nextElementSibling.style.display = 'inline';
  }
  return valid;
});

.errormsg{
 color: red;
 background-color: yellow;
 display: none;
}

<form action="mailto:me@fakeemail.com">
    <fieldset>

      <legend>Personal details</legend>
      <p>
        <label>
          Full name:
          <input type="text" name="fullname" id="fullname">
        </label>
      </p>
      <p class="errormsg" id="nameerrormsg">Please enter your name above</p>

      <p>
        <label>
          Street Address:
          <input type="text" name="streetaddr" id="streetaddr">
        </label>
      </p>
      <p class="errormsg" id="addrerrormsg">Please enter your street address</p>

      <!-- Quantity input -->
      <p>
        <label>
          Quantity:
          <input type="text" name="quantity" id="quantity">
        </label>
      </p>
      <p class="errormsg" id="qtyerrormsg">Please enter your quantity</p>

    </fieldset>
    <input type="submit" value="Submit it!"> 
  </form>

I love the way you solved this! It is a little bit complicated. But another point of view, really helps. Making use of `for` loop with `if` statements is really interesting. Thanks for your solution. — Remix Protocol, May 05 '20 at 06:27

score 1 · Accepted Answer · answered May 05 '20 at 06:05

You could hide all the error text as initially. Then show the error text based on respected input failure

/* Checking form function */
function checkForm() {
  window.alert("You clicked Submit!");
  var fullNameCheck = document.getElementById("fullname");
  var addressCheck = document.getElementById("streetaddr");
  var quantityCheck = document.getElementById("quantity");
  var is_valid = false;
  /* If statements to check if text box is empty */
  document.getElementById("nameerrormsg").style.display = "none";
  document.getElementById("addrerrormsg").style.display = "none";
  document.getElementById("qtyerrormsg").style.display = "none";
  is_valid = true;

  if (fullNameCheck.value == "") {
    document.getElementById("nameerrormsg").style.display = "inline";
    is_valid = false;
  }
  if (addressCheck.value == "") {
    document.getElementById("addrerrormsg").style.display = "inline";
    is_valid = false;
  }
  if (quantityCheck.value == "") {
    document.getElementById("qtyerrormsg").style.display = "inline";
    is_valid = false;
  }
  return is_valid;
}

.errormsg {
  color: red;
  background-color: yellow;
  display: none;
}

<form action="mailto:me@fakeemail.com" onsubmit="return checkForm();">
  <fieldset>

    <legend>Personal details</legend>
    <p>
      <label>
          Full name:
          <input type="text" name="fullname" id="fullname">
        </label>
    </p>
    <p class="errormsg" id="nameerrormsg">Please enter your name above</p>

    <p>
      <label>
          Street Address:
          <input type="text" name="streetaddr" id="streetaddr">
        </label>
    </p>
    <p class="errormsg" id="addrerrormsg">Please enter your street address</p>

    <!-- Quantity input -->
    <p>
      <label>
          Quantity:
          <input type="text" name="quantity" id="quantity">
        </label>
    </p>
    <p class="errormsg" id="qtyerrormsg">Please enter your quantity</p>

  </fieldset>
  <input type="submit" value="Submit it!">
</form>

Thanks! Your method was the easiest to understand. This answer is good for beginners. — Remix Protocol, May 05 '20 at 06:21
Ok! A question: is there any way to use the statements with `else if`? Multiple calls to the if statements, is kinda complicated, no? — Remix Protocol, May 05 '20 at 06:24
Else if not possible .Because else if only execute if statement fails. For your case else if not possible . And also multiple if is not complicated . if you need a more simplified version use any loops like next answer — prasanth, May 05 '20 at 06:40

How to display form validation error messages accurately for more than two input fields using only JavaScript?

2 Answers2