jquery validate：如何防止错误消息改变表单处置

Question

当表单中出现错误消息时，它们会将元素移到左侧。如何避免这种情况？

Example

Answer 1

您需要使用自定义错误元素展示位置（这将放在.validate()内），如：

errorElement: "div",
errorPlacement: function(error, element) {
      element.before(error);
}

这将在生成错误的表单元素之前插入包含错误消息的div。通过更改给定示例中的第3行，您可以将该元素移动到任何您想要的位置。例如，根据您的代码，要将其完全移出表格，您可以使用：

errorElement: "div",
errorPlacement: function(error, element) {
      element.parent().parent().parent().before(error);
}

......这会把它放在整个表格之前。当然，简单地在表单之外指定一个错误区域会更加优雅......

<div id="error_goes_here"></div>
<form ...

...然后将错误放在那里：

errorElement: "div",
errorPlacement: function(error, element) {
      $("#error_goes_here").html(error);
}

根据您决定采用的方式，您甚至可能不需要使用errorElement，而只需使用errorPlacement。选择this question的答案还应该为您提供有关如何使用它的更多信息。

希望这有帮助！

---

修改

要将错误元素置于右侧，请在.validate()：

中添加错误放置代码

$("#commentForm2").validate({
    errorElement: "div",
    errorPlacement: function(error, element) {
        element.after(error);
    }
});

生成的错误元素会自动分配一个名为.error的类，因此，如果需要，您可以使用CSS设置样式：

div.error {
   // your CSS
}