jquery验证插件用于正确对齐错误

Question

我正在使用带有Bootstrap 3的jQuery验证器插件来验证我的表单输入。它工作得很好但是当用户输入任何错误的输入时，对齐就会搞砸了。

截图

之前：http://oi58.tinypic.com/23sta4p.jpg 之后：http://oi59.tinypic.com/2pq17a8.jpg

我该如何解决？

Answer 1

尝试为Jquery验证添加一些自定义验证显示 这是您需要的解决方案，您可以使用errorPlacement方法覆盖错误消息的放置位置

$("form").validate({
            highlight: function(e) {
                $(e).closest(".form-group").addClass("has-error")
            },
            unhighlight: function(e) {
                $(e).closest(".form-group").removeClass("has-error")
            },
            errorElement: "span",
            errorClass: "help-block",
            errorPlacement: function(e, t) {
                if (t.parent(".input-group").length) {
                    e.insertAfter(t.parent())
                } else {
                    e.insertAfter(t)
                }
            }
        })
});