Question

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

当用户登录时，Jquery Validate插件使用“远程”功能来检查所提供的电子邮件地址是否作为用户存在于我们的数据库中。如果连接和我们的服务器速度很快，用户在完成输入密码之前就会看到反馈。

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 Validate插件会一直等到表单确认有效）。

我想要的是：

如果远程查询在用户提交表单之前完成，则应阻止提交（如果它发现电子邮件地址不在数据库中）。
如果用户在远程查询完成之前提交表单，则应忽略远程查询验证规则（以便没有延迟 - 服务器端验证将捕获用户不存在）。

思想？

Answer 1

 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＆＃a; ajax的例子，你可以在ajax之前处理事件，成功时，错误处理，以及更多控制方式

Answer 2

我想我想出来了。我使用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();
    }
});

然后在“validate”插件调用中：

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!"
    }                    
}

如何在提交时中止远程Jquery Validator方法

2 个答案: