Jquery 如果使用ajax请求发送电子邮件，则禁用多步骤表单中的注册过程

我有一个多步骤表单，其第一步是请求电子邮件/登录id。在

keyup

上，它使用

ajax

请求检查电子邮件是否被接收。如果采用该选项，

电子邮件

字段设置为

”

（即无值）

问题是，假设我正在尝试一封电子邮件xyz@gmail.com。键入时，我将一个手指放在

m

按钮（in.com）上，另一个手指放在鼠标按钮上，并在我键入最后一个

m

后立即单击鼠标。我仍然可以访问第2步，即使使用了电子邮件id并显示了相同的错误消息

代码如下：

刀片

 <form id="new_user1" autocomplete="off">
 @csrf
 <input type="hidden" name="_token" id="_csrf" value="{{Session::token()}}">

<div id="emailpage" class="animate__animated animate__bounce frm">

   <div class="form-group mb-2" id="form1">
<img src= "" alt="Login" style=" width: 70px; height: 70px;" class="text-center"><br>
 <p class="text-muted mb-4">Let's start with your Login/UserName Info</p>
 <div id="emailtaken" class="text-danger"></div>
 <input id="email" name="email" type="text" placeholder="Email address" class="form-control rounded-pill border-0 shadow-sm px-4">
 <div class="error text-danger"></div> 
    </div>
 <button type="button" class="btn btn-primary btn-block text-uppercase mb-4 mt-2 rounded-pill shadow-sm step1" id="start">Get started <i class="fas fa-arrow-alt-circle-right"></i></button>   
   </div>


//Step 2 asks for Password and so on (after validating Step 1)

控制器

//Code to search the database
      if ($user)
        return response()->json(['false']);
       } else{
             return response()->json(['true']);
         }

       }

---

另外，在jQUery validator

规则：

中使用

remote:

并返回

json\u encode（false）

会产生不可预测的行为，例如-有时它会接受第二个电子邮件地址（即使已接收），有时其他电子邮件验证程序也不会显示，等。在发送电子邮件时，如何禁用进一步的步骤？

考虑使用

。单击（）

方法，而不是

键控

方法，如下所示：-

$('.step1').click(function(){
        $.ajax({
         url:'check-email',
         type:'get',
         data:{
             'email':$('#email').val(),
            },
            dataType:'JSON',
            success: function e(response){
                 if(response.success==false){
                    
                    var em= $('#email').val();
                    em+= " is taken. Please try a different one";
                    em+= " or <a href='login'>Login Now</a>  ";
                     $(".frm").hide();
               $('#emailpage').show();
                $('#alerts').show();
              $('#emailtaken').html(em);
              $('#email').val(""); // This is important
             }else{
                if(x.form()){
                $('#alerts').hide();
                $('.frm').hide();
                $("#otherformparts").show();
                 }
             }

            },
            error:function e1(response){
                console.log('error=>' ,response);

            }
          });


     });

$（'.step1'）。单击（函数（）{
$.ajax({
url:“检查电子邮件”，
类型：'get'，
数据：{
“email”：$（“#email”）.val（），
},
数据类型：'JSON'，
成功：职能e（响应）{
if（response.success==false）{
var em=$（'#email'）.val（）；
em+=“已被接受。请尝试另一个”；
em+=“或”；
$（“.frm”）.hide（）；
$（'#emailpage'）.show（）；
$（“#警报”）.show（）；
$（'#emailtake'）.html（em）；
$（'#email'）.val（“”；//这很重要
}否则{
if（x.form（））{
$（“#警报”）.hide（）；
$（'.frm'）.hide（）；
$（“#otherformparts”）.show（）；
}
}
},
错误：函数e1（响应）{
log（'error=>'，response）；
}
});
});

另外，相应地更改代码，就像您不需要两个

$（'.step1'）。单击（）

$('.step1').click(function(){
        $.ajax({
         url:'check-email',
         type:'get',
         data:{
             'email':$('#email').val(),
            },
            dataType:'JSON',
            success: function e(response){
                 if(response.success==false){
                    
                    var em= $('#email').val();
                    em+= " is taken. Please try a different one";
                    em+= " or <a href='login'>Login Now</a>  ";
                     $(".frm").hide();
               $('#emailpage').show();
                $('#alerts').show();
              $('#emailtaken').html(em);
              $('#email').val(""); // This is important
             }else{
                if(x.form()){
                $('#alerts').hide();
                $('.frm').hide();
                $("#otherformparts").show();
                 }
             }

            },
            error:function e1(response){
                console.log('error=>' ,response);

            }
          });


     });