title: What makes the front-end validation of form fail?
body: <p>I am working on submitting a form via <strong>jQuery AJAX</strong>. The form also has basic validation, that I am doing myself.</p>
  <p>The HTML (<code>index.html</code> file):</p>
  <pre><code>&lt;div class=&quot;modal fade&quot; id=&quot;exampleModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;form action=&quot;/process&quot; class=&quot;modal-dialog&quot; id=&quot;order_form&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt; 
              &lt;div class=&quot;modal-header&quot;&gt;
                  &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Pre-order&lt;/h5&gt;
                  &lt;button type=&quot;submit&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                      &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
  
                  &lt;div id=&quot;#validation&quot; class=&quot;d-none alert alert-danger&quot;&gt;
                      All fields are mandatory
                  &lt;/div&gt;
  
                  &lt;div id=&quot;#status&quot; class=&quot;d-none alert alert-dismissible&quot;&gt;
                      &lt;a href=&quot;#&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;close&quot;&gt;&amp;times;&lt;/a&gt;
                      &lt;p class=&quot;m-0&quot;&gt;&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label for=&quot;first_name&quot;&gt;First name:&lt;/label&gt;
                      &lt;input type=&quot;first_name&quot; class=&quot;form-control&quot; id=&quot;first_name&quot; placeholder=&quot;First name&quot; name=&quot;first_name&quot;&gt;
                  &lt;/div&gt;
  
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label for=&quot;last_name&quot;&gt;Last name:&lt;/label&gt;
                      &lt;input type=&quot;last_name&quot; class=&quot;form-control&quot; id=&quot;last_name&quot; placeholder=&quot;Last name&quot; name=&quot;last_name&quot;&gt;
                  &lt;/div&gt;
  
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label for=&quot;email&quot;&gt;Email address:&lt;/label&gt;
                      &lt;input type=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;Enter email&quot; id=&quot;email&quot;&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary btn-sm btn-block&quot;&gt;Send&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The script:</p>
  <pre><code>function isEmail(mail){
      return /^(([^&lt;&gt;()\[\]\.,;:\s@\&quot;]+(\.[^&lt;&gt;()\[\]\.,;:\s@\&quot;]+)*)|(\&quot;.+\&quot;))@(([^&lt;&gt;()\.,;\s@\&quot;]+\.{0,1})+([^&lt;&gt;()\.,;:\s@\&quot;]{2,}|[\d\.]+))$/.test(mail);
  }
  
  function submitOrder(e) {
      e.preventDefault();
  
      var form = $(this),
          submitUrl = form.attr('action'),
              firstName = $('#first_name').val(),
              lastName = $('#last_name').val(),
              emailAddress = $('#email').val()
              // Are there any empty fields?
              isEmpty = firstName == '' 
                  || lastName == ''
                      || emailAddress == '';
  
          console.log('Empty filds: ', isEmpty);
          console.log('Valid email: ', isEmail(emailAddress));
  
          if (isEmpty) {
              $('#validation').removeClass('d-none');
          } else {
              if (!isEmail(emailAddress)) {
                  $('#validation').removeClass('d-none').text('Choose a valid email');
              } else {
                  $('#validation').addClass('d-none');
  
                  $.ajax({
                      type: &quot;POST&quot;,
                      url: submitUrl,
                      data: form.serialize(),
                      dataType: &quot;json&quot;,
                      success: function(response) {
                          if (response == 'successful') {
                              $('#status').addClass('alert-success').find('p').text(&quot;Your order was send&quot;);
                          }
                          else {
                              $('#status').addClass('alert-danger').find('p').text(&quot;We've failed to send your order&quot;);
                          } 
                          $('#status').removeClass('d-none');
                      }
                  });
              }
          }   
  }
  
  $(document).ready(function(){
      // Submit Order Form
      $('#order_form').on('submit', submitOrder);
  });
  </code></pre>
  <h3>The problem:</h3>
  <p>Evan though the form is <em>not valid</em>, and the console shows <code>Empty filds: true</code> and <code>Valid email: false</code>, the calass 'd-none' is not removed from <code>&lt;div id=&quot;#validation&quot; class=&quot;d-none alert alert-danger&quot;&gt;</code> and the alert, of course, is not displayed.</p>
  <h3>What is my mistake?</h3>