title: jQuery check inputs not empty before submit
body: <p>I've been looking at different threads about how to do this and got the following script together, however, even when I type into the inputs so they're not empty, I'm getting the alert pop up and the form doesn't submit.</p>
  
  <p>Can anyone see what I'm doing wrong or if there's a simpler / more efficient way of doing this?</p>
  
  <p>Thanks,</p>
  
  <p>Osu</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form action="#" method="post" class="signup-form"&gt;
      &lt;div class="required"&gt;
          &lt;label for="name"&gt;Name:&lt;/label&gt;
          &lt;input type="text" name="cm-name" id="name" value=""&gt;&lt;br /&gt;
      &lt;/div&gt;
      &lt;div class="required"&gt;
          &lt;label for="asd-asd"&gt;Email:&lt;/label&gt;
          &lt;input type="text" name="cm-asd" id="asd-asd" value=""&gt;
          &lt;span class="btn"&gt;&lt;input type="submit" name="submit" value="" id="signup"&gt;&lt;/span&gt;
      &lt;/div&gt;          
  &lt;/form&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>// Validate form fields in Sign up form 
  $(".signup-form").submit(function(){
      var isFormValid = true;
      $(".signup-form .required input").each(function(){
          if ($.trim($(this).val()).length == 0){
              $(this).parent().addClass("highlight");
              isFormValid = false;
          } else {
              $(this).parent().removeClass("highlight");
          }
      });
      if (!isFormValid) alert("Please fill in all the required fields (highlighted in red)");
      return isFormValid;
  });
  </code></pre>