title: Javascript: Basic native form validation - can't validate more than one criterion
body: <p>trying to learn how to validate form input.</p>
  
  <p>The inputs need to:
  1 - Not be empty.
  2 - Only contain alphabetic characters (no digits). </p>
  
  <p>When I test (I've only focused on first name input field for now) it will give the correct error message <strong>if I leave it blank</strong>. But, if I but <strong>digits</strong> in the field it will submit instead of displaying error message. </p>
  
  <p>What am I doing wrong? </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form id="frm1"&gt;
     &lt;fieldset id="controls"&gt;
      &lt;div&gt;
        &lt;label for="firstname"&gt;First Name: &lt;/label&gt;
         &lt;input type="text" id="firstname"&gt;
          &lt;span id="errFname" class="errmsg"&gt;&amp;#42 You must enter a first name&lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
         &lt;label for="lastname"&gt;Last Name: &lt;/label&gt;
         &lt;input type="text" id="lastname"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;input type="submit" value="Submit"&gt;
      &lt;/div&gt;
      &lt;/fieldset&gt;
     &lt;/form&gt;
  </code></pre>
  
  <p><strong>SCRIPT:</strong></p>
  
  <pre><code>    function checkForm(){
  
  
      document.getElementById("frm1").onsubmit=function() {
  
  
          //Validate first name: Required, Alphabetic (no numbers)
          if(document.getElementById("firstname").value === "") {
  
              document.getElementById("errFname").style.display = "inline";
              document.getElementById("firstname").focus();
  
              return false;
  
          }   else {
  
              return true;
          }//close if
  
  
          var alphaRegEx = /[a-zA-Z]/;
          var alphafname = document.getElementById("firstname").value;
  
          //check if first name has any digits
          if (!alphaRegEx.test(alphafname)){
  
              document.getElementById("errFname").style.display = "inline";
              document.getElementById("firstname").value="";
              document.getElementById("firstname").focus();
  
              return false;
  
          }   else {
  
              return true;
  
          }//close if
  
  
      }//close function
  
      return false;
  
  }//close function (checkForm)
  
  
  window.onload=checkForm;
  </code></pre>