jquery - jQuery 验证错误消息位置

Question

我正在使用 jQuery 验证插件来检查我的输入，并且在调整错误消息的位置时遇到了麻烦。这是我的代码的演示。

我想在有问题的单元格下显示错误消息，而不是在它旁边。我检查了参考资料，发现我应该专注于errorPlacement功能。所以如果我想在单元格下显示错误消息，我应该创建一个新的<tr>然后插入错误消息吗？感谢您的任何建议。

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.parent("td").next("td") );
   },
   debug:true
 })

score 4 · Accepted Answer

错误消息在元素“旁边”的唯一原因是因为两者都是内联元素（<select>和<label>）。您可以简单地将错误消息移到下面：

1）用一些CSS来定位错误标签，给它一个display: block;

或者

2）在插入之前将错误标签包装在某个块元素中（您可以使用上面发布的代码，然后在附加之前将错误包装在 div 中）

score 1 · Accepted Answer

只需添加display:block到您的 CSS。为我工作。

.error{
    border-color: #F78181;
    color:red;
    display:block;
}

要使其label宽度与相同select，您可以使用 CSS 下一个兄弟的命名法来设置它的样式，+如下所示：

select + label{
    width:300px;
    background: blue;
}

2 回答 2