title: Validation of different inputs after clicking a button
body: <p>I have a form with a name and e-mail values and validation set for them.</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;fieldset class="form-group"&gt;
      &lt;label for="name"&gt;Name&lt;/label&gt;
      &lt;input type="text" class="form-control" id="name" placeholder="Name"&gt;
      &lt;div class="form-control-feedback yellow"&gt; Please, make sure that the name is at least 2 charactes long. &lt;/div&gt;
    &lt;/fieldset&gt;
    &lt;!--name--&gt;
  
     &lt;fieldset class="form-group"&gt;
        &lt;label for="email"&gt;E-mail&lt;/label&gt;
        &lt;input type="email" class="form-control" id="email" placeholder="E-mail"&gt;
        &lt;div class="form-control-feedback red"&gt;Please make sure the e-mail includes an "@". &lt;/div&gt;
     &lt;/fieldset&gt;
     &lt;!--email--&gt;
  
  &lt;button type="submit" class="btn btn-primary btn-lg mt-3" id="submitPaymentButton"&gt; Process Payment &lt;/button&gt; 
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var nameWarning = $(".yellow");
  var emailWarning = $(".red");
  $("#submitPaymentButton").prop("disabled", true);
  
  emailWarning.hide();
  nameWarning.hide();
  
  $(document).ready(function() {
  
    /****************************
    Name validation
    ******************************/
    $("#name").focusout(function() {
      if ($(this).val().length === 0) {
        $(this).parent().removeClass("has-warning");
        nameWarning.hide();
        validateAllInputs();
  
      } else if ($(this).val().length &lt; 2) {
        $(this).parent().addClass("has-warning");
        nameWarning.show();
      }
    })
  
    /* If the user focuses in we hide the warnings, this is optional */
    $("#name").focusin(function() {
      $(this).parent().removeClass("has-warning");
      nameWarning.hide();
    });
  
    /******************************* 
    E-mail fom validation
    ******************************/
    $("#email").focusout(function() {
      if ($(this).val().length === 0) {
        $(this).parent().removeClass("has-danger");
        emailWarning.hide();
        validateAllInputs();
        console.log("hide the warnings");
  
      } else if ($(this).val().length &gt; 1 &amp;&amp; $(this).val().indexOf("@") &gt; -1) {
        $(this).parent().removeClass("has-danger");
        emailWarning.hide();
        console.log("hide the warnings");
      } else {
        $(this).parent().addClass("has-danger");
        emailWarning.show();
        console.log("show the warnings");
      }
    })
  
    /* If we are inside the form, just hide the warnings as the user is typing.*/
    $("#email").focusin(function() {
      $(this).parent().removeClass("has-danger");
      emailWarning.hide();
    });
  </code></pre>
  
  <p>This works as intended, but the problem comes when I want to add a button that when pressed, validates both inputs, it allows to submit if both inputs don't have the warning classes, so they have no errors, the "if" works, but the "else" is never triggered, what am I doing wrong?:</p>
  
  <pre><code>  function validateAllInputs() {
      if (!$("#name").parent().hasClass("has-warning") &amp;&amp; !$("#email").parent().hasClass("has-danger")) {
        $("#submitPaymentButton").prop("disabled", false);
        console.log("disabled");
      } else {
        $("#submitPaymentButton").prop("disabled", true);
        console.log("enabled");
      }
    }
  </code></pre>