title: How to display form validation error messages accurately for more than two input fields using only JavaScript?
body: <p>I have created a JavaScript function that checks a form during submitting the input and displays an error message if there's no input.</p>
  
  <p>It works perfectly when none input is given. It displays all the error messages correctly.</p>
  
  <p><strong>The Problem:</strong> But if I leave just the first field blank i.e, the <code>fullname</code>; the if loop stops there and doesn't display the second or third error messages i.e, the <code>streetaddr</code> &amp; <code>quantity</code>. </p>
  
  <p><strong>NOTE: This error happens only when one of <code>streetaddr</code> or <code>quantity</code> is not given with addition to the first field i.e, <code>fullname</code>.</strong></p>
  
  <p>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.</p>
  
  <p><strong>Also, I prefer to do this with just Vanilla JavaScript, no frameworks/libraries. I'm trying to learn!</strong></p>
  
  <p>Link(s): <a href="https://en.wikiversity.org/wiki/Web_Design/JavaScript_Challenges" rel="nofollow noreferrer">This is a challenge from Wikiversity</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* 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=="" &amp;&amp; addressCheck.value=="" &amp;&amp; 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;
  }
  
   </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.errormsg{
   color: red;
   background-color: yellow;
   display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="mailto:me@fakeemail.com" onsubmit="return checkForm();"&gt;
      &lt;fieldset&gt;
  
        &lt;legend&gt;Personal details&lt;/legend&gt;
        &lt;p&gt;
          &lt;label&gt;
            Full name:
            &lt;input type="text" name="fullname" id="fullname"&gt;
          &lt;/label&gt;
        &lt;/p&gt;
        &lt;p class="errormsg" id="nameerrormsg"&gt;Please enter your name above&lt;/p&gt;
  
        &lt;p&gt;
          &lt;label&gt;
            Street Address:
            &lt;input type="text" name="streetaddr" id="streetaddr"&gt;
          &lt;/label&gt;
        &lt;/p&gt;
        &lt;p class="errormsg" id="addrerrormsg"&gt;Please enter your street address&lt;/p&gt;
  
        &lt;!-- Quantity input --&gt;
        &lt;p&gt;
          &lt;label&gt;
            Quantity:
            &lt;input type="text" name="quantity" id="quantity"&gt;
          &lt;/label&gt;
        &lt;/p&gt;
        &lt;p class="errormsg" id="qtyerrormsg"&gt;Please enter your quantity&lt;/p&gt;
  
      &lt;/fieldset&gt;
      &lt;input type="submit" value="Submit it!"&gt; 
    &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>