title: javascript form not validating fields
body: <p>I'm trying to validate a form via javascript onSubmit, then run the php captcha verfication and email send action. The problem is that every time I try to check the fields, I can see just one of them highlited with my CSS classes (seems to be related to the 'return false;' which blocks me).</p>
  <p>Anyone has a clue?</p>
  <p>Here's my HTML form code (you can see it working here: <a href="https://jsfiddle.net/xfmsLa95/2/" rel="nofollow noreferrer">https://jsfiddle.net/xfmsLa95/2/</a> ):</p>
  <pre><code>&lt;form id=&quot;contact-form&quot; class=&quot;contact&quot; name=&quot;contact-form&quot; method=&quot;POST&quot; onsubmit=&quot;return checkInputs()&quot; action=&quot;indexen.php&quot;&gt;
                      &lt;div class=&quot;fields&quot;&gt;
                          &lt;div class=&quot;field name&quot;&gt;
                              &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; placeholder=&quot;Name&quot;&gt;
                              &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt;
                              &lt;i class=&quot;fas fa-exclamation-circle&quot;&gt;&lt;/i&gt;
                              &lt;small&gt;Error Message&lt;/small&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;field email&quot;&gt;
                              &lt;input type=&quot;text&quot; name=&quot;email&quot; id=&quot;email&quot; placeholder=&quot;Email&quot;&gt;
                              &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt;
                              &lt;i class=&quot;fas fa-exclamation-circle&quot;&gt;&lt;/i&gt;
                              &lt;small&gt;Error Message&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;field&quot;&gt;
                          &lt;input type=&quot;text&quot; name=&quot;subject&quot; id=&quot;subject&quot; placeholder=&quot;Subject&quot;&gt;
                          &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt;
                          &lt;i class=&quot;fas fa-exclamation-circle&quot;&gt;&lt;/i&gt;
                          &lt;small&gt;Error Message&lt;/small&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;field textarea&quot;&gt;
                          &lt;textarea name=&quot;message&quot; id=&quot;message&quot; cols=&quot;30&quot; rows=&quot;10&quot; placeholder=&quot;Message...&quot;&gt;&lt;/textarea&gt;
                          &lt;i class=&quot;fas fa-check-circle&quot;&gt;&lt;/i&gt;
                          &lt;i class=&quot;fas fa-exclamation-circle&quot;&gt;&lt;/i&gt;
                          &lt;small&gt;Error Message&lt;/small&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;button-area&quot;&gt;
                      &lt;button type=&quot;submit&quot; name=&quot;submit&quot;&gt;Submit&lt;/button&gt;
                      &lt;/div&gt;  
                  &lt;/form&gt;
  </code></pre>
  <p>And this is my validator.js file:</p>
  <pre><code>const username = document.getElementById('name');
  const email = document.getElementById('email');
  const subject = document.getElementById('subject');
  const msg = document.getElementById('message');
  
  function checkInputs() {
  
      const usernameValue = username.value.trim();
      const emailValue = email.value.trim();
      const subjectValue = subject.value.trim();
      const msgValue = msg.value.trim();
  
      if(usernameValue === '') {
          setErrorForUser(username, 'Name cannot be blank');
          return false;
      }
      else{
          setSuccessForUser(username);
      }
  
      if(emailValue === '') {
          setErrorForEmail(email, 'Email cannot be blank');
          return false;
      }
  
      else if(!isEmail(emailValue)){
          setErrorForEmail(email, 'Invalid email');
          return false;
      }
  
      else {
          setSuccessForEmail(email);
      }
      
      if(subjectValue === '') {
          setErrorForSubject(subject, 'Subject cannot be blank');
          return false;
      }
  
      else{
          setSuccessForSubject(subject);
      }
  
      if(msgValue === '') {
          setErrorForMsg(msg, 'Message cannot be blank');
          return false;
      }
  
      else{
          setSuccessForMsg(msg);
      }
  
      return true;
  
  }
  
  function setErrorForUser(input, message) {
  
      const formControl = input.parentElement;
      
      const small = formControl.querySelector('small');
  
      small.innerText = message;
  
      formControl.className = 'field error name';
  }
  
  function setSuccessForUser(input) {
  
      const formControl = input.parentElement;
  
      formControl.className = 'field name success';
  }
  
  function setErrorForEmail(input, message) {
      const formControl = input.parentElement;
      
      const small = formControl.querySelector('small');
  
      small.innerText = message;
  
      formControl.className = 'field email error';
  }
  
  function setSuccessForEmail(input) {
  
      const formControl = input.parentElement;
  
      formControl.className = 'field email success';
  }
  
  function setErrorForMsg(element, message) {
  
      const formControl = element.parentElement;
      
      const small = formControl.querySelector('small');
  
      small.innerText = message;
  
      formControl.className = 'field textarea error';
  }
  
  function setSuccessForMsg(element) {
  
      const formControl = element.parentElement;
  
      formControl.className = 'field textarea success';
  }
  
  
  function setErrorForSubject(input, message) {
  
      const formControl = input.parentElement;
      
      const small = formControl.querySelector('small');
  
      small.innerText = message;
  
      formControl.className = 'field error';
  }
  
  function setSuccessForSubject(input) {
  
      const formControl = input.parentElement;
  
      formControl.className = 'field success';
  }
  
  function isEmail(email) {
      return /^(([^&lt;&gt;()\[\]\\.,;:\s@&quot;]+(\.[^&lt;&gt;()\[\]\\.,;:\s@&quot;]+)*)|(&quot;.+&quot;))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
  }
  </code></pre>
  <p>PHP is working.</p>
  <p>I'm adding some pictures to refer this. This is what I get:</p>
  <p><a href="https://i.stack.imgur.com/9zKdu.jpg" rel="nofollow noreferrer">error</a></p>
  <p>But I want to get something like this:</p>
  <p><a href="https://i.stack.imgur.com/8h8Pg.jpg" rel="nofollow noreferrer">example</a></p>
  <p>To validate field per field like this:</p>
  <p><a href="https://i.stack.imgur.com/SuWJs.jpg" rel="nofollow noreferrer">validation</a></p>
  <p>Thanks in advance,</p>