jQuery Validate + AJAX用户名可用性检查:如何结婚?

时间:2012-06-24 22:59:59

标签: javascript jquery ajax forms validation

更新


感谢 charlietfl的评论和建议(并且,在某一点上,lol - 为我的失礼道歉),我终于从Validate中检查了系统,表单提交是发送电子邮件时暂停。所以我想我的问题已经回答了,但是如果你再一次忍受我的话,最后一点点就是我可以用你的帮助......

在我最初的愿景中,除了触发正确的“电子邮件已存在”错误之外,我还填充了第二个元素,其中包含一些HTML,可以更完整地向用户解释情况并提供登录表单的链接。第二个元素出现并消失,取决于该领域的状态。

有没有办法使用messages / remote部分来执行此操作?

我在这里:

$(document).ready(function(){
$("#signup").validate({
    errorElement: "span",
    errorPlacement: function(error, element) {
        error.appendTo(element.prev());
        //element.prev().replaceWith(error);
    },
    rules: {
        "email": {
            required: true,
            email:true,
            remote: {
                url: "/ajax/emailcheck.php",
                type: "post",
            },
        },
        "password": {
            required: true,
            minlength: 8,
        },
        "password-check": {
            required: true,
            minlength: 8,
            passmatch: true,
        },
        "tos": {
            required: true,
            minlength: 6,
        }
    },
    messages: {
        email: {
            required: " is Required",
            email: " is Improperly Formatted",
            remote: " already exists",
            },

        },
        password: {
            required: " is Required",
            minlength: " requires at least 8 characters",
        },
        "password-check": {
            required: " is Required",
            minlength: " requires at least 8 characters",
            passmatch: " must match the Passphrase",
        },
        tos: {
            required: " is Required",
            minlength: " requires at least 6 characters",
        },                      
    },
    onkeyup: true,
    onblur: true
});

而且,在理想中,我会喜欢这样的事情:

messages: {
email: {
    required: " is Required",
    email: " is Improperly Formatted",
    remote: " already exists",
    remote: {
        username: function() {
        var emailcheck = $('#email').val();  
        return $('#username_availability_result').html(emailcheck + ' is already in our system. Please <a href="/login.php">log in here</a>.');
        },
    },
},              
},

再次感谢,并提前,感谢您持续的关注和建议,

ž

原始问题


我正在使用jQuery Validate在注册表单上运行例行验证。但是我想要添加到表单功能中的一个功能是进行AJAX检查以确定系统中是否已有电子邮件地址。问题是电子邮件检查功能存在于验证功能的外部,因此实际上并不会在必要时阻止表单提交。

这是我的代码。 (前50行包括验证和密码匹配。其余部分构成AJAX检查[由电子邮件字段的keyup事件触发]。

        // Method adds password matching abilities to the validator
        jQuery.validator.addMethod("passmatch", function(value, element) {
           return $('#password').val() == $('#password-check').val()
        }, "* Passwords should match");

        $(document).ready(function(){
            $("#signup").validate({
                errorElement: "span",
                errorPlacement: function(error, element) {
                    error.appendTo(element.prev());
                    //element.prev().replaceWith(error);
                },
                rules: {
                    "email": {
                        required: true,
                        email:true,
                    },
                    "password": {
                        required: true,
                        minlength: 8,
                    },
                    "password-check": {
                        required: true,
                        minlength: 8,
                        passmatch: true,
                    },
                    "tos": {
                        required: true,
                        minlength: 6,
                    }
                },
                messages: {
                    email: {
                        required: " is Required",
                        email: " is Improperly Formatted",
                    },
                    password: {
                        required: " is Required",
                        minlength: " requires at least 8 characters",
                    },
                    "password-check": {
                        required: " is Required",
                        minlength: " requires at least 8 characters",
                        passmatch: " must match the Password"
                    },
                    tos: {
                        required: " is Required",
                        minlength: " requires at least 6 characters",
                    },                      
                }
            });

            //check email availability 
            $('#email').keyup(function(){  
                check_availability();  
            });  

        });               

        //function to check username availability  
        function check_availability(){  

                //get the username  
                var username = $('#email').val();  

                //use ajax to run the check  
                $.post("/ajax/emailcheck.php", { username: username },  
                    function(result){  
                        //if the result greater than none  
                        if(result > 0 ){  
                            //show that the username is not available  
                            $('#username_availability_result').html(username + ' is already in our system. Please <a href="/login.php">log in here</a>.');  
                        }else{  
                            //username available.  
                            //clear any messages
                            $('#username_availability_result').html(''); 
                        }  
                });  
        }  

check_availability()函数是否有办法触发停止(并在清除后启动),以便在错误状态期间无法提交表单?或者可以使用addMethod将整个工具包和cabo​​odle集成到Validate中(如果是这样,请注意我在特定的IDed元素中提供可用性反馈,而不是通过出现其他Validate错误的相同元素)?

提前感谢您的所有帮助和建议。

ž

2 个答案:

答案 0 :(得分:2)

使用已经具有内置ajax方法的验证插件的远程选项,该方法将绑定到输入

http://docs.jquery.com/Plugins/Validation/Methods/remote#options

或者required也可以是一个函数(不适用于keyup或blur)

email:{ required: function(){
          return $('#username_availability_result').html()=='';
   }

}

另外,如果ajax返回重复,为什么不重置电子邮件字段?您的代码可能会像重置字段一样工作

最好的建议是内置remote

答案 1 :(得分:0)

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $("#singupfrom").validate({
                rules: {

                    'useremail': {// compound rule
                        required: true,
                        email: true,



                        remote:{


                            url: "check_email.php",
                            type: "post",

                            data:
                            {
                                emails: function()
                                {
                                    return $('#singupfrom :input[name="useremail"]').val();
                                }
                            }


                        }
                    }

                },
                  // here custom message for email already exists
                 messages: {
                    useremail: { remote: "Email already exists"}

                }

            });

        });
    </script>

    <!-- your user email-->

                                <label>Email :</label>
                                <input type="text" name="useremail" id="useremail" value=""  />
    <!-- your user email end -->



    // your  php file "check_email.php"  will be some thing like it 
    /// get or post can also be used in place of request depending on situation
    $email = $_REQUEST['useremail'];


    <?php 
            $check   = "your query to check the email and returns the no of rows/ emails exists ";
            if ($check == '0' or empty($check)) {
                echo 'true';
            } else {
                echo  'false';

            }

?>