【问题标题】:jQuery Validate + AJAX username availability check: How to marry them?jQuery Validate + AJAX 用户名可用性检查:如何嫁给他们?
【发布时间】:2012-06-24 22:59:59
【问题描述】:

更新


感谢 charlietfl 的 cmets 和建议(有时我很生气,大声笑 - 为我的失礼道歉),我终于从 Validate 中得到了系统检查,并且表单提交是发送电子邮件时停止。所以我想我的问题已经得到了解答,但是如果你们都再忍耐我一会儿,我可以使用你们的帮助来做最后的画龙点睛...

在我最初的设想中,除了触发正确的“电子邮件已存在”错误之外,我还使用一些 HTML 填充了第二个元素,该 HTML 更完整地向用户解释了情况并提供了登录表单的链接。这第二个元素根据字段的状态出现和消失。

有没有办法使用消息/远程部分来执行此操作?

这里有什么:

$(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>.');
        },
    },
},              
},

再次感谢您一直以来的关注和建议,

Z

原始问题


我正在使用 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 以某种方式将整个套件和 caboodle 集成到 Validate 中(如果是这样,请注意我在特定 ID 的元素中提供可用性反馈,而不是通过出现其他 Validate 错误的同一元素)?

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

Z

【问题讨论】:

  • 不是一个真正的答案,所以我猜是一个评论,但你可以尝试使用我自己的插件,它几乎可以完成 jQuery validate 所做的工作以及更多......github.com/elclanrs/jq-idealforms。您可以使用 exclude 过滤器完成您想要的操作,传入要排除的值数组。
  • 感谢您的评论。我看了你的插件,看起来很整洁。我没有看到它允许我在哪里查询我的数据库以检查用户名是否可用。我错过了什么吗?
  • 哦,好吧,实际上您必须创建自己的查询辅助函数来从数据库中获取数据,但是如果您将这些数据保存在数组中并使用 exclude 过滤器将其传递进去它会接近你所追求的。

标签: javascript jquery ajax forms validation


【解决方案1】:

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

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

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

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

}

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

最好的建议是使用内置的remote

【讨论】:

  • 感谢您的回复。我将开始研究远程文档。至于重置该字段:除非我有误解,否则我不想重置该字段并删除用户输入的内容 - 特别是如果他们像我一样并且在不同的域中拥有许多具有相同帐户名的电子邮件地址( gmail、yahoo 等),并且只会在该域上退格。
  • reset 肯定需要对用户友好,从代码的角度来看更容易。但错误也可能包括他们尝试过的那个
【解决方案2】:
    <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';

            }

?>

【讨论】:

    猜你喜欢
    • 2015-02-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-22
    • 1970-01-01
    • 2013-07-28
    相关资源
    最近更新 更多