JQuery验证插件错误放置不起作用

时间:2013-03-29 19:21:20

标签: javascript jquery validation twitter-bootstrap jquery-validate

我使用JQuery验证器插件验证表单。但是,我想将错误输出放在特定的位置。我尝试了Validator documentation

中的错误放置
<div class="form_errors"><!--HERE SHOULD THE ERROR GO --></div>
                            <div class="form_holder_invitee" >
                                <form class="homepage_invitee_form" id="homepage_invitee_form" action="add" method="get">
                                    <input name="email" placeholder="Email Address"
                                        id="email_address_new" type="text placeholder"> <br>
    ...

我的验证脚本是:

$(document).ready(function(){

    $('#homepage_invitee_form').validate({
        rules: {
            firstName: {
                minlength: 2,
                required: true
            },
            email: {
                required: true,
                email: true
            },
            lastName: {
                minlength: 2,
                required: true
            }
        },
        errorPlacement: function(error, element) {
            error.appendTo( element.parent(".form_errors") );
        },
        debug:true

    });

}); // end document.ready

我想将错误放入<div class="form_errors">。 但是,当我提交表单时没有任何反应。

有什么想法吗?

PS。:我也尝试过这个链接:

jQuery validation error position

然而,也行不通......

1 个答案:

答案 0 :(得分:3)

问题是您的选择器和.parent()的使用。将您的errorPlacement更新为以下内容即可。 See this fiddle查看它的工作情况。

errorPlacement: function(error, element) {
    console.log(element);
    element.closest(".form_holder_invitee").prev().append(error);
},