0

我的网站是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 插件会一直等到表单被确认有效）。

我想要的是：

  • 如果远程查询在用户提交表单之前完成，它应该阻止提交（在它发现电子邮件地址不在数据库中的情况下）。
  • 如果用户在远程查询完成之前提交表单，远程查询验证规则应该被忽略（这样就没有延迟——服务器端验证会发现用户不存在）。

想法？

4

2 回答 2

0 
 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 的例子，通过它你可以在 ajax 之前处理事件，成功时，错误时，多一点控制这种方式

于 2012-11-27T18:59:57.310 回答
0

我想我想通了。我没有使用“remote”选项，而是使用 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!"
    }                    
}
于 2012-11-27T21:46:57.150 回答