如果在ajax回调中验证失败，我如何停止提交表单

Question

i am trying to submit a form after validation using ajax. after ajax return if input field is valid then form should submit otherwise error message. below is my html

<form action="new-join.php" method="post" enctype="multipart/form-data" onSubmit="return CheckForm()" id="NewJoinsub">

<!-- my form -->

<button type="submit" class="button btn btn-primary btn-large">Continue</button>
</form>

and ajax is

<script>
function CheckForm(e) {
    var checkpin=$("#JoiningPin").val();

     $.post("check-pin.php", { checkpin: checkpin }, 
     function(result){  
                //if the result is 1 submit  
                if(result == 1){  
                $('#NewJoinsub').submit()
              }else{  
                   var response_not = "<div style='color: #f30;'>Not A Valid Pin or Already Used</div>";
                    $('#pinCheck').html(response_not);  
                    e.preventDefault();
                }  
        });  
}(jQuery);
</script>

my form is validating correctly but its not preventing form submission if condition is failed. where i am doing wrong ?

Answer 1

Checkout this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="new-join.php" method="post" enctype="multipart/form-data" id="NewJoinsub">
  <!-- my form -->
  <button type="submit" class="button btn btn-primary btn-large">Continue</button>
</form>

<script>
$('#NewJoinsub').on('submit',function(e) {
    e.preventDefault();
    var checkpin=$("#JoiningPin").val();

    $.post("check-pin.php", { checkpin: checkpin }, function(result){  
        //if the result is 1 submit  
        if(result == 1){  
            $(this).submit();
        }
    else {  
            var response_not = "<div style='color: #f30;'>Not A Valid Pin or Already Used</div>";
      $('#pinCheck').html(response_not);  
    }  
  });  
});
</script>

You have first to e.preventDefault(); !

To complete your example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="new-join.php" method="post" enctype="multipart/form-data" id="NewJoinsub" onsubmit="checkForm(event);">
  <!-- my form -->
  <button type="submit" class="button btn btn-primary btn-large">Continue</button>
</form>

<script>
  function checkForm(e) {
      e.preventDefault();
      var checkpin=$("#JoiningPin").val();

    $.post("check-pin.php", { checkpin: checkpin }, function(result){  
      //if the result is 1 submit  
      if(result == 1){  
        $(this).submit();
      }
      else {  
        var response_not = "<div style='color: #f30;'>Not A Valid Pin or Already Used</div>";
        $('#pinCheck').html(response_not);  
      }  
    });  
  }(jQuery);
</script>

</div>