2016-10-03 72 views
0

我對Javascript和所有人都很新。我現在正在註冊頁面上工作。我使用了我的朋友給出的模板,我正試圖使它與Laravel 5.3一起工作。如何重置Jquery遠程驗證

我想在這裏實現的是:驗證電子郵件是否已經在數據庫中。現在驗證工作。它會告訴您電子郵件是否存在。但一旦完成,無論用戶如何更改電子郵件輸入,它總是顯示電子郵件已被採取。

var form = $(".form-signup"); 
$('#submit-form').click(function(e) { 
     form.validate({ 
      rules: { 
       name: { 
        required: true, 
        minlength: 3 
       }, 
       email: { 
        required: true, 
        email: true, 
        remote: { 
         url: "/check/", 
         type: "get" 
        } 
       }, 
       password: { 
        required: true, 
        minlength: 6, 
        maxlength: 16 
       }, 
       password2: { 
        required: true, 
        minlength: 6, 
        maxlength: 16, 
        equalTo: '#password' 
       }, 
       terms: { 
        required: true 
       } 
      }, 
      messages: { 
       name: { 
        required: 'Enter your first name', 
        minlength: 'Enter at least 3 characters or more' 
       }, 
       email: { 
        required: 'Enter email address', 
        email: 'Enter a valid email address', 
        remote: 'Email has been taken' 
       }, 
       password: { 
        required: 'Write your password', 
        minlength: 'Minimum 6 characters', 
        maxlength: 'Maximum 16 characters' 
       }, 
       password2: { 
        required: 'Write your password', 
        minlength: 'Minimum 6 characters', 
        maxlength: 'Maximum 16 characters', 
        equalTo: '2 passwords must be the same' 
       }, 
       terms: { 
        required: 'You must agree with terms' 
       } 
      }, 
      errorPlacement: function(error, element) { 
       console.log(element); 
       if (element.is(":radio") || element.is(":checkbox")) { 
        element.closest('.option-group').after(error); 
       } else { 
        error.insertAfter(element); 
       } 
     } 
    }); 
    e.preventDefault(); 
     if (form.valid()) { 
      $(this).addClass('ladda-button'); 
      var l = Ladda.create(this); 
      l.start(); 
      setTimeout(function() { 
       //AJAX added. 
       var formData = { 
        _token:$(this).data('token'), 
        name: $('#name').val(), 
        email: $('#email').val(), 
        password: $('#password').val(), 
        password_confirmation: $('#password2').val() 
       }; 
       $.ajax({ 
        type: 'POST', 
        url: '/register', 
        beforeSend: function (xhr) { 
         var token =  $('meta[name="csrf_token"]').attr('content'); 
         if (token) { 
          return xhr.setRequestHeader('X-CSRF-TOKEN', token); 
         } 
        }, 
        data: formData, 
        dataType: 'json', 
        statusCode: { 
         200: function (data) { 
          console.log('success'); 
          console.log(data); 
         }, 
         500: function (data) { 
          console.log(data); 
         } 
        } 
       }); 
      }, 2000); 
     } else { 
      alert('not valid'); 
     } 
    }); 

} 

這裏是我的前端

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta content="" name="description" /> 
    <meta content="themes-lab" name="author" /> 
    <meta name="csrf_token" content="{{ csrf_token() }}" /> 
    <link rel="shortcut icon" href="{{asset('admin_assets/images/favicon.png')}}"> 
    <link href="{{asset('admin_assets/css/style.css')}}" rel="stylesheet"> 
    <link href="{{asset('admin_assets/css/ui.css')}}" rel="stylesheet"> 
    <link href="{{asset('admin_assets/plugins/icheck/skins/all.css')}}" rel="stylesheet"/> 
    <link href="{{asset('admin_assets/plugins/bootstrap-loading/lada.min.css')}}" rel="stylesheet"> 

</head> 
<body class="account separate-inputs boxed" data-page="signup"> 
    <!-- BEGIN LOGIN BOX --> 
    <div class="container" id="login-block"> 
     <div class="row"> 
      <div class="col-sm-6 col-md-6 col-md-offset-3"> 
       <div class="account-wall"> 
        <i class="user-img icons-faces-users-03"></i> 
        <form class="form-signup" role="form"> 
         <div class="append-icon"> 
          <input type="text" name="name" id="name" class="form-control form-white name" placeholder="Name" required autofocus> 
          <i class="icon-user"></i> 
         </div> 
         <div class="append-icon"> 
          <input type="email" name="email" id="email" class="form-control form-white email" placeholder="Email" required> 
          <i class="icon-envelope"></i> 
         </div> 
         <div class="append-icon"> 
          <input type="password" name="password" id="password" class="form-control form-white password" placeholder="Password" required> 
          <i class="icon-lock"></i> 
         </div> 
         <div class="append-icon m-b-20"> 
          <input type="password" name="password2" id="password2" class="form-control form-white password2" placeholder="Repeat Password" required> 
          <i class="icon-lock"></i> 
         </div> 
         <div class="terms option-group"> 
          <label for="terms" class="m-t-10"> 
          <input type="checkbox" name="terms" id="terms" data-checkbox="icheckbox_square-blue" required/> 
          I agree with terms and conditions 
          </label> 
         </div> 
         <button type="submit" id="submit-form" class="btn btn-lg btn-dark m-t-20" data-style="expand-left">Register</button> 
         <div class="clearfix"> 
          <p class="pull-right m-t-20"><a href="user-login-v1.html">Already have an account? Sign In</a></p> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- END LOCKSCREEN BOX --> 
    <script src="{{asset('admin_assets/plugins/jquery/jquery-1.11.1.min.js')}}"></script> 
    <script src="{{asset('admin_assets/plugins/jquery/jquery-migrate-1.2.1.min.js')}}"></script> 
    <script src="{{asset('admin_assets/plugins/gsap/main-gsap.min.js')}}"></script> 
    <script src="{{asset('admin_assets/plugins/bootstrap/js/bootstrap.min.js')}}"></script> 
    <script src="{{asset('admin_assets/plugins/icheck/icheck.min.js')}}"></script> 
    <script src="{{asset('admin_assets/plugins/backstretch/backstretch.min.js')}}"></script> 
    <script src="{{asset('admin_assets/plugins/bootstrap-loading/lada.min.js')}}"></script> 
    <script src="{{asset('admin_assets/plugins/jquery-validation/jquery.validate.min.js')}}"></script> 
    <script src="{{asset('admin_assets/plugins/jquery-validation/additional-methods.min.js')}}"></script> 
    <script src="{{asset('admin_assets/js/plugins.js')}}"></script> 
    <script src="{{asset('admin_assets/js/pages/login-v1.js')}}"></script> 
</body> 
</html> 

因此,基本上,一旦用戶輸入一個常用的電子郵件和接收錯誤信息,他們將無法進行,並且按鈕將保持紡紗。

Screenshot on the problem

任何一個能提出任何可行的解決方案?解決這個問題將會很好。謝謝!

回答

0

是的,經過大量的研究,我終於想通了自己。

原因是,jQuery驗證不會等待遠程響應。這就是爲什麼即使電子郵件已被使用,程序也會運行。

爲了解決這個問題,只是簡單的遙控器中添加

async: false 

。它會工作得很好!