Question

如何让标题中的错误数量立即反映出表单中的错误数量，以及字段更改？

<h6 class="error" style="font-size: 1.5em; font-weight: bold; color: #d0011b;">
    <span class="numOfErrors"></span> occurred.
</h6>

现在的标准行为是验证本身适用于更改，但标题中显示的错误编号仅在提交时更新。我希望它能在更新时更新。

我已阅读文档进行验证，似乎无法找到实现此目的的内置方法。我尝试将可见列表项存储在名为listSize的变量中，但不会动态更新。

invalidHandler: function(event, validator) {
    var errors = validator.numberOfInvalids();
    if ((errors) > 1) {
      $(".numOfErrors").text(errors + " errors have");
    } else {
      $(".numOfErrors").text(errors + " error has");
    }
 },

http://jsfiddle.net/sw87W/159/

Answer 1

要实现您需要的行为，您可以在文本输入中的每个valid()上调用keypress方法，并在选择时发生change：

$('input:text').keypress(function() {
    $('#form-jsvalidate').valid();
});

$('select').change(function() {
    $('#form-jsvalidate').valid();
})

Updated fiddle

Answer 2

您可以使用“showErrors”回调

来自官方文件：

$("#myform").validate({
    showErrors: function(errorMap, errorList) {
        $("#summary").html("Your form contains "
            + this.numberOfInvalids()
            + " errors, see details below.");
        this.defaultShowErrors();
    }
});

所以对你来说，你可以这样做：

$("#myform").validate({
    showErrors: function(errorMap, errorList) {
        $(".numOfErrors").html(this.numberOfInvalids());
        this.defaultShowErrors();
    }
});

使用jQuery验证更新字段更改时的错误数

2 个答案: