jQuery验证错误消息位置

Question

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

我想在有问题的单元格下显示错误消息，而不是旁边的错误消息。我检查了参考文献，发现我应该关注errorPlacement函数。因此，如果我想在单元格下显示错误消息，是否应该创建新的<tr>然后插入错误消息？感谢您的任何建议。

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

Answer 1

错误消息的唯一原因是＆＃34; next＆＃34;因为两者都是内联元素（<select>和<label>）。您可以通过以下方式移动下面的错误消息：

1）使用一些CSS为错误标签定位，使其为display: block;

或

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

Answer 2

只需将display:block添加到您的CSS即可。适合我。

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

要使label的宽度与select相同，您可以style it with CSS next sibling's nomeclature +这样：

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