如果验证失败，则AJAX-PHP停留在同一页面上 [英] AJAX-PHP Stay on same page if validation fails

问题描述

我有一个用ajax进行的验证检查，它将显示错误.但是，它将显示错误，然后立即转到显示错误的表单发送页面.

I have a validation check with ajax and it will show errors. However, it will show the error and then immediately go to the form send page displaying the errors.

页面长得令人难以置信-因此，我将粘贴一个有关ajax部分的示例.

The page is incredibly long - so I'll paste an example of what I have for the ajax section.

我应该注意，这里的所有内容均以编程方式按预期工作-仅问题是它将通过ajax显示错误(应有)，然后在几秒钟后将其重定向到commit_form.php.错误消息以纯文本显示.

I should note that everything here programmatically works as intended - the only problem is that it will display the error via ajax (as it should) then redirects to submit_form.php after a couple of seconds with the error message displayed in plain text.

HTML

<form action="submit_form.php" method="post" id="form_1">
   <input type="text" name="text_box" class="form-control" id="text_box" placeholder="Enter Text Here">
   <button type="submit" name="submit_form" id="submit_form" class="btn btn-primary">Submit</button>
</form>

JS

<script>
        $('#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('<div class="row">'+
                                        '   <div class="col-md-12">'+
                                        '     <div class="alert alert-success alert-dismissible">'+
                                        '       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
                                        '       <h4><i class="icon fa fa-check"></i> Success!</h4>'+
                                        '       '+json['success']+''+
                                        '     </div>'+
                                        '   </div>'+
                                        ' </div> ');
             }
             if(json['error']) {
               var html='';
               $.each( json['error'], function( key, value ) {
                html += value+'<br>';
              });
              $('.message_center').html('<div class="row">'+
                                              '   <div class="col-md-12">'+
                                              '     <div class="alert alert-warning alert-dismissible">'+
                                              '       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
                                              '       <h4><i class="icon fa fa-warning"></i> Error! There was a problem.</h4>'+
                                              '       '+html+''+
                                              '     </div>'+
                                              '   </div>'+
                                              ' </div> ');
             }

               }

           });
       });
    </script>

SUBMIT_FORM.PHP

<?php session_start();

$json = array(); 

if ($_POST['text_box'] === NULL) {
  $json['error'][] = "Please enter data in textbox.";
} else {
  $textData = $_POST['text_box'];
}

if($json){ // If any Errors, return else, insert data into database.

    echo json_encode($json);
    exit;

} else {

    // insert query that works is here.


echo json_encode($json);
exit;

} 


?>

推荐答案

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

You need to prevent the default action of form i.e. submit when input type of submit is clicked, so that your ajax process runs smoothly. In your click event add e.preventDefault();

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

这篇关于如果验证失败，则AJAX-PHP停留在同一页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！