使用 jQuery Validation 更新字段更改的错误数

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() valid() method上调用 keypress在文本输入中以及 change change时发生在select上：

>

$('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();
    }
});