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“记住牛奶”作为模板。你可以看看here.

提前致谢.. :)

blasteralfred

Answer 1

也许您可以检查元素的类，看看您是否要发送错误消息或成功消息：

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

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

1 个答案: