title: jQuery Ajax form only submits after clicking twice
body: <p>I have a form which when submitted checks if Account Number is valid(through AJAX). </p>
  
  <p>If invalid, it shows error message. This is working fine.</p>
  
  <p>If valid, it should submit the form. It submits <strong>but only after clicking Submit button twice</strong>.</p>
  
  <pre><code>$('#account_validation_form').on('submit', function(e){
  
      e.preventDefault();
  
      var payers_account = $("input[name='payers_account']").val();
  
    $.post('ajax.php', {payers_account:payers_account}, function(data){
  
    if(data === 'invalid'){
       $(".account_invalid_message").html("&lt;p&gt;Given Account Number is invalid&lt;/p&gt;");
    }
  
    else if(data === 'valid'){
       $("#account_validation_form").unbind('submit').submit()
    }
  
    });
  
  });
  </code></pre>
  
  <p>I know something is wrong with calling <code>e.preventDefault()</code> there. But it is necessary and it can't be put inside AJAX Callback. So What would be the solution for this ?</p>