jQuery表单验证自定义成功消息放置

Question

在我的表单验证中，错误消息被放置在错误框中。但是成功消息也出现在同一个盒子上。我想在我的表单字段旁边显示成功消息，例如error.appendTo( element.parent().next() ); 我目前的语法是这样的；

<script type="text/javascript">
$(document).ready(function() {
    var validator = $("#testform").validate({
        rules: {
            Field1: "required",
            Field2: "required",
            Field3: "required",
            Field4: "required",
        },
        messages: {
            Field1: "Specify Field1",
            Field2: "Specify Field2",
            Field3: "Specify Field3",
            Field4: "Specify Field4",
        },
        errorPlacement: function(error, element) {
                error.appendTo( element.parent().next() );
        },
        success: function(label) {
            label.html("OK").addClass("checked");
        }
    });
});
</script>
<form id="testform" name="testform" method="post" action="test.php">
<table>
<tr>
<td>Field1</td>
<td>
<input id="Field1" name="Field1" type="text"></td>
<td class="status"></td>
</tr>
<tr>
<td>Field2</td>
<td>
<input id="Field2" name="Field2" type="text"></td>
<td class="status"></td>
</tr>
<tr>
<td>Field3</td>
<td>
<input id="Field3" name="Field3" type="text"></td>
<td class="status"></td>
</tr>
<tr>
<td>Field4</td>
<td>
<input id="Field4" name="Field4" type="text"></td>
<td class="status"></td>
</tr>
</table>
</form>

风格；

#testform label.error {
  background:url("unchecked.png") no-repeat 0px 0px;
  padding-left: 16px;
  padding-bottom: 2px;
  color: #CC0000;
}

#testform label.checked {
  background:url("checked.png") no-repeat 0px 0px;
  padding-left: 16px;
  padding-bottom: 2px;
  color: #008000;
}

我必须对我的语法进行哪些更改？？

我正在使用 bassistance.de “Remember The Milk”作为模板。你可以看看here.

提前谢谢..:)

爆破

Answer 1

也许您可以检查元素的类，看看您是要放置错误消息还是成功消息：

errorPlacement: function(error, element) {
    var container;
    if (element.hasClass("valid")) {
        container = element.parent().next();
    } else {
        container = $("#errorbox");
    }
    error.appendTo(container);
},