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

标签 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

但是,也不起作用...

最佳答案

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

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

关于javascript - JQuery 验证插件错误放置不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15710057/

相关文章:

javascript - 如何选择当前点击的div?为什么我的功能没有被执行?

javascript - 在 AngularJS 1.x 中单击时在 UI 日历中添加事件

javascript - 获取剑道网格中所选项目的页面

javascript - 使用 jquery 从 onsubmit 处理程序访问表单元素

css - 如何减少梯度误差?

google-maps - 构建一个像谷歌地图一样的在线 map js api

php - 为什么使用 F5 刷新我的网络应用程序非常慢并且挂起,而在地址栏上按 Enter 键会立即刷新页面?

Jquery加载刷新div

php - 验证后返回带有焦点的空字段

javascript - 这个 jQuery 验证可以重构吗?