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

【问题标题】：JQuery validation plugin error placement does not workJQuery 验证插件错误放置不起作用
【发布时间】：2013-03-29 19:21:20
【问题描述】：

我使用 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

但是，也行不通……

【问题讨论】：

您是只想将一个元素中的一条消息放在那里，还是希望将表单中的所有消息都放在那里...比如错误摘要框？

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

【解决方案1】：

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

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

【讨论】：