AJAX-PHP如果validation失败，请保持同一页面

我有ajax的validation检查，它会显示错误。 但是，它会显示错误，然后立即转到显示错误的表单发送页面。

该页面非常长 – 所以我将粘贴一个关于ajax部分的示例。

我应该注意，这里的所有内容都按照预期的方式工作 – 唯一的问题是它将通过ajax显示错误（应该如此）然后在几秒钟后重定向到submit_form.php，并以纯文本显示错误消息。

HTML

  Submit  

JS

  $('#submit_form).on('click', function () { $.ajax({ type: "POST", url: "submit_form.php", dataType: "json", data: $('#form_1').serialize(), success: function (json) { $('.message_center').html(''); if(json['success']) { $('.message_center').html('
'+ ' 
'+ ' 
'+ ' ×'+ ' 
 Success!
'+ ' '+json['success']+''+ ' 
'+ ' 
'+ ' 
 '); } if(json['error']) { var html=''; $.each( json['error'], function( key, value ) { html += value+'
'; }); $('.message_center').html('
'+ ' 
'+ ' 
'+ ' ×'+ ' 
 Error! There was a problem.
'+ ' '+html+''+ ' 
'+ ' 
'+ ' 
 '); } } }); });  

SUBMIT_FORM.PHP

Answer 1

您需要阻止form的默认操作，即在单击submit input type时submit ，以便您的ajax进程顺利运行。 在您的click事件中添加e.preventDefault();

 $('#submit_form').on('click', function (e) { //get the e as parameter e.preventDefault(); //rest of your code. }); 

Answer 2

尝试使用addEventListener，然后调用event.preventDefault（）以阻止表单在出现错误时提交，如下所示：

 $('#submit_form').addEventListener('click', function (event) { // Prevents form from submitting event.preventDefault(); $.ajax({ type: "POST", url: "submit_form.php", dataType: "json", data: $('#form_1').serialize(), success: function (json) { $('.message_center').html(''); if(json['success']) { $('.message_center') .html('
'+ ' 
'+ ' 
'+ ' ×'+ ' 
 Success!
'+ ' '+json['success']+''+ ' 
'+ ' 
'+ ' 
 '); } if(json['error']) { var html=''; $.each( json['error'], function( key, value ) { html += value+'
'; }); $('.message_center') .html('
'+ ' 
'+ ' 
'+ ' ×'+ ' 
 Error! There was a problem.
'+ ' '+html+''+ ' 
'+ ' 
'+ ' 
 '); } } }); });