Question

我正在尝试使用ajax验证后提交表单。在ajax返回后，如果输入字段有效，则表单应提交否则错误消息。下面是我的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>

和ajax是

<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>

我的表单正确验证，但如果条件失败则不会阻止表单提交。我在哪里做错了？

Answer 1

结帐：

＆＃13;

<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>

＆＃13;

你首先要e.preventDefault（）; ！

完成你的例子：

＆＃13;

<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>

＆＃13;

Answer 2

我会想到在你的其他地方加return false;就像这样：

else {  
   var response_not = "<div style='color: #f30;'>Not A Valid Pin or Already Used</div>";
   $('#pinCheck').html(response_not);  
   e.preventDefault();
   return false;
}

Answer 3

试试这个：删除按钮类型。在按钮上添加click事件并删除onsubmit of form。请参阅下面的代码。

<form action="new-join.php" method="post" enctype="multipart/form-data" id="NewJoinsub">

<!-- my form -->

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



<script>
$('document').ready(function(){
  $('.button').click(CheckForm);
});


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>

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

3 个答案: