jQuery表單驗證自定義成功消息放置

Question

在我的表單驗證中，錯誤消息放置在錯誤框中。 但是，成功消息也出現在同一框中。 我想在我的表單error.appendTo( element.parent().next() );旁邊顯示成功消息，例如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“記住牛奶”作為模板。 你可以在這里看看。

在此先感謝.. :)

炸葯

Answer 1

也許您可以檢查元素的類，以查看是否要放置錯誤消息或成功消息：

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