Размещение пользовательских сообщений об успешной проверке формы 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 «Помни молоко» в качестве шаблона.Вы можете посмотреть здесь.

Заранее спасибо .. :)

blasteralfred

Answer 1

Может быть, вы можете проверить класс элемента, чтобы увидеть, собираетесь ли вы разместить сообщение об ошибке или сообщение об успехе:

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