url php完成后未运行Ajax成功

我有一个功能来检查电子邮件，名字和姓氏

function checkcontactdetails(){
var details = {
  'email'       : jQuery('#email').val(),
  'first_name'  : jQuery('#first_name').val(),
  'last_name'   : jQuery('#last_name').val(),
 };
 jQuery.ajax({
   url          :   'checkcontactdetails.php',
   type         :   'POST',
   data         :   details,
   success      :   function(data){
      if(data != 'passed'){
         jQuery('#payment-errors-step2').html(data);
      }
      if(data == 'passed'){
          $('.step3').show();
          $('#payment-errors-step2').html("");
      }
   },
   error : function(){alert("Something Went Wrong");},
 });
} 

此函数在此处调用：

<button class="btn btn-primary btn-sm" type="button" id="checkoutbtn1" onclick="checkcontactdetails();">Next Step1</button>

我想做的是，一旦成功“通过”，显示流程的下一步，在本例中是第3步，并清除存在的错误

我一直在反复讨论这个问题，我想我的语法是正确的，所以我有其他类似的函数设置（可以工作），但由于某种原因，这个函数没有

注意，我已将每个步骤设置为display:none，因此显示步骤的唯一方法是通过函数执行

任何帮助都将不胜感激

---

谢谢

为什么要使用$（'#checkoutbtn1'）。在（'click'，function（）{}？）上。不需要这行。我刚刚删除了按钮，

<span class="bg-danger" id="payment-errors-step2"></span>

<?php
  include 'core/initial.php';

  $email      = sanitize($_POST['email']);
  $first_name = sanitize($_POST['first_name']);
  $last_name  = sanitize($_POST['last_name']);

  $errors = array();
  $required = array(
    'email'     => 'Email',
    'first_name'=> 'First Name',
    'last_name' => 'Last Name',
  );

  //Check if all required fields are filled out
  foreach($required as $f => $d){
    if(empty($_POST[$f])  || $_POST[$f] ==  ''){
      $errors[] = $d.'  is required.';
    }
  }

  //Check if valid email address
  if(!filter_var($email,FILTER_VALIDATE_EMAIL)){
    $errors[] = 'Please enter a valid email.';
  }

  if(!empty($errors)){
    echo display_errors($errors);
  }else {
    echo 'passed';
  }

 ?>

if(data != 'passed'){
   jQuery('#payment-errors-step2').html(data);
 }