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

【问题标题】：How do i stop submit form if validation failed in ajax callback如果在 ajax 回调中验证失败，我如何停止提交表单
【发布时间】：2016-05-24 23:18:22
【问题描述】：

我正在尝试使用 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>

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

【问题讨论】：

您可以尝试在您的通话后添加async:false 选项
还要确保您的结果实际上是整数而不是 json ( console.log(result) )。由于您使用的是 jquery，因此您也可以在脚本中移动提交事件。

标签： javascript php jquery ajax forms

【解决方案1】：

检查一下：

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

你必须首先 e.preventDefault(); ！

完成您的示例：

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

【讨论】：

它阻止提交失败，但现在它不提交有效
请检查您的“结果”。你能插入console.log(result);
signup.php:88 Uncaught ReferenceError: CheckPin is not defined
通过一些小的改动，我设法使它工作。首先感谢所有帮助过我的人。我反对投反对票。我用 $('#NewJoinsub').unbind().submit();坚持 $(this).submit(); .然后它的工作。问题是它在无限循环中不断提交表单，一次又一次取消绑定停止验证第二次。参考stackoverflow.com/questions/9812876/…

【解决方案2】：

我想像这样在你的 else 中添加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;
}

【讨论】：

即使使用 return false 也无法提交表单
这行不通，因为这是一个回调函数，而不是从事件处理程序中调用的函数。
我的html表单可以吗？

【解决方案3】：

试试这个：删除按钮类型。在按钮上添加点击事件并删除表单的提交。请参阅下面的代码。

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

【讨论】：