Блог

У меня есть многоступенчатая форма, первым шагом которой является запрос адреса электронной почты / логина. На keyup нем проверяется, принято ли электронное письмо, используя ajax запрос. Если оно принято, email для поля устанавливается значение "" (т.е. Значение отсутствует).

Проблема в том, допустим, я пытаюсь получить электронное письмо xyz@gmail.com . Во время набора текста я буду держать один палец на m кнопке (в .com), а другой палец на кнопке мыши и нажимать на мышь, как только я наберу последний m . Я по-прежнему получаю доступ к шагу 2, даже если используется идентификатор электронной почты и отображается сообщение об ошибке для того же самого.

Вот коды:

Лезвие

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

Сценарий

 $('#step2pages').hide();
   
     jQuery.validator.addMethod("nowhitespace", function(value, element) {
        return this.optional(element) || /^S $/i.test(value);
        }, "No white space please");

        $.ajaxSetup({
               headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  }
              });

     var x= $('#new_user1').validate({
      focusCleanup:true,
      rules: {
                
              //other rules

                email: {
                    required: true,
                    email: true,
                    nowhitespace :true
                    
                    // remote:{
                    //    url:'check-email',
                    //    type:'get'
                    //        }
                       
                },
                password:{
                  required:true,
                  nowhitespace:true,
                  minlength:8
                },
                cpassword:{
                  required:true,
                  nowhitespace:true,
                  equalTo:"#password"
                },

               //other rules for furthur steps
            },

            messages: {
              email: {
                    required: "Email address cannot be blank",
                    email: "Email format should be example@examle.com or similar",
               },
          //Other messages 
         },
            errorPlacement: function (error, element) {
                element.each(function () {
                    $(this).next("div .error").html(error);
                });
            },
        });
     $('.step1').click(function(){
      if(x.form()){
         $('.frm').hide();
       $("#passworddetailspage").show();
    }
    });
     $('.step2').click(function(){
      if(x.form()){
       $('.frm').hide();
       $('#otherdetailspage').show();
      }
     });
     $('.back2').click(function(){
       $(".frm").hide();
       $("#emailpage").show();
       });
    
 //other codes

 $('#email').keyup(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";
              $('#emailtaken').html(em);
              $('#email').val("");
         }
    },
            error: function e1(response){
                console.log('error=>' ,response);

            }
          });


     });
 

Контроллер

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

       }

 

Кроме того, использование remote: в jQuery validator rules: и возврат json_encode(false) дают непредсказуемое поведение, например — иногда он принимает второй адрес электронной почты, даже если он принят, иногда другие средства проверки электронной почты не отображаются и т.д. Как я могу отключить дальнейшие шаги при получении электронного письма?

Рассмотрите возможность использования .click() метода, а не keyup метода следующим образом :-

 $('.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').click() функции