如何中止遠程Jquery的驗證方法應提交

Question

我的網站是http://www.extrabux.com/users/login

當用戶登錄時，jQuery驗證插件使用「遠程」功能來檢查我們的數據庫中是否存在爲用戶提供的電子郵件地址。如果連接和我們的服務器速度很快，用戶在完成輸入密碼之前就會看到反饋。

email: { 
    required: true, 
    email: true, 
    remote: {//http://docs.jquery.com/Plugins/Validation/Methods/remote 
     url: 'check-signin-email-address', 
      type: "post", 
      data: { 
       emailAddress: function() { 
        return $("#email").val(); 
       } 
      } 
     } 
} 

如果連接或我們的服務器是緩慢的，然而，這會導致不希望延遲的形式可以提交之前（因爲jQuery驗證插件等待的形式被確認爲有效）。

我想的是：

• 如果遠程查詢完成用戶提交表單之前，應該阻止提交（的情況下它發現的電子郵件地址是不是在數據庫）。
• 如果用戶在遠程查詢完成之前提交表單，則應該忽略遠程查詢驗證規則（這樣就不會有延遲 - 服務器端驗證將捕獲該用戶不存在）。

想法？

Answer 1

我想我想通了這一點。我使用addMethod來創建一個我稱之爲「isExtrabuxMember」的規則，而不是使用「遠程」選項。我還創建了一些全局變量，並使用綁定到#email字段更改的ajax來檢查提供的電子郵件地址是否屬於任何現有的Extrabux成員。

請評論，如果這可以幫助你或如果你有更好的想法。

我現在有這樣的「驗證」插件調用上面：

jQuery.validator.addMethod("isExtrabuxMember", function(value, element) { 
    var emailRemoteFuncResult = checkSigninEmailAddressResult === null ? true : checkSigninEmailAddressResult; 
    return emailRemoteFuncResult; 
}); 

var checkSigninEmailAddressResult = null; 
var emailXhrCheck; 
$('#email').bind('change keyup', function(){ 
    checkSigninEmailAddressResult = null; 
    if(emailXhrCheck){ 
     emailXhrCheck.abort(); 
    } 
    emailXhrCheck = $.ajax({ 
     url: '/users/check-signin-email-address', 
     type: "post", 
     async: true, 
     data: { 
      emailAddress: function() { 
       return $("#email").val(); 
      } 
     }, 
     success: function(data){ 
      checkSigninEmailAddressResult = data; 
      $("#email").valid(); 
     } 
    }); 
}); 
$('#loginForm').submit(function(){ 
    if(emailXhrCheck){ 
     emailXhrCheck.abort(); 
    } 
});   

然後內的「驗證」插件調用：

rules: {    
    email: { 
     required: true, 
     email: true, 
     isExtrabuxMember: true      
    }, 
    password: { 
     required: true, 
     minlength: 4 
    }  
}, 
messages: { 
    email: { 
     isExtrabuxMember: function(){ 
      var currentEmail = $('#email').val(); 
      return $.validator.format('<b>{0}<\/b> does not yet have an Extrabux account. <a href="\/users\/register?emailAddress={0}">Sign up?<\/a>', currentEmail); 
     } 
    }, 
    password: { 
     required: "Oops, you forgot to enter your password!" 
    }      
} 

Answer 2

function checkEmail(){ 
    $("#email").removeClass('email'); // this stops validation during ajax 
    //might want to add a loading image to let user know 
    $.ajax({ 
     type: //type 
     url: //url to check email, 
     data: //email to check, 
     success: function (msg) { 
      $("#email").addClass('email'); //turns validation back on 
       //take away loading image 

      if (msg.GoodEmail != "GoodEmail") { //however you check for existing email 
       $("#email").addClass('error'); //forces failed validation 
       } 
     } 
     }); 
} 

這是使用jQuery的阿賈克斯，這個你可以在Ajax出現之前處理事件，成功，在錯誤的例子，多一點控制這樣