jQuery.validate: 获取无效的 onfocusout 数量

Question

onsubmit 我在表单顶部显示了我的表单中的错误数。

我想做的是在用户修复错误并且焦点不在某个字段后更新该数字。似乎使用 onfocusout: 是正确的选择。

我正在尝试在我的 onfocusout: 函数中使用 validator.numberOfInvalids()，但它似乎只适用于提交。

有没有办法在不重新提交表格的情况下重新计算错误的数量？

编辑：在我发布后我有了一个想法，这个想法很有效。除了最后一个错误修复之外的所有内容。错误消息仍然显示 1。获取错误数量是执行此操作的好方法。

编辑：使用了很多 $.validator.addMethod() 和一些支持这些的函数。整件事都是用 Box T3 写的。希望对您有所帮助。

    function billing_form_setup(billingForm) {

    validator = $(billingForm).validate({
        debug: true,
        meta: "validate",
        ignore: [],
        errorPlacement: function(error, element) {
            // this sets the error placement for jquery UI select menu's
            if (element.is("select")) {
                $(element)
                .closest( "div" )
                .find( ".ui-selectmenu-button" )
                .css('border', '2px solid #d11515')
                .css('box-shadow', ' 0px 0px 16px -8px rgba(209,21,21,1)');
            }
            else { // default error placement
                $( element )
                .closest( "form" )
                .find( "span[class='" + element.attr( "id" ) + "']" )
                .append( error );
            }
        },
        rules: {
            p_card_number: {
                required: true,
                creditCheck: true,
                minlength: 12
            },
            p_exp_date: {
                required: true,
                dateCheck: true,
                checkDateExpired: true
            },
            p_card_code: {
                required: true,
                minlength: 3,
                digits: true
            }   
        },
        errorElement: "p",
        invalidHandler: function (event, validator) {
            // set up for showing one error message above form
            errors = validator.numberOfInvalids();
            if (errors) {
                message = errors == 1
                ? 'There is a problem 1 field'
                : 'There is a problem with ' + errors + ' fields.';
                $(".pmnt-type-form div.error span").html(message);
                $(".pmnt-type-form div.error").show();
            } else {
                $(".pmnt-type-form div.error").hide();
            }
        },
        onfocusout: function(element, event) { 
            // don't do this! ;-)
           //$("#billing-form").submit();
        }

    });
};

编辑：新的 showErrors 代码：

    showErrors: function(errorMap, errorList) {
        var errors = this.numberOfInvalids();
            if (errors) {
                var fields = (errors === 1) ? ' field' : ' fields';
                message = 'There is a problem with ' + errors + fields;
                $(".pmnt-type-form div.error span").html(message);
                $(".pmnt-type-form div.error").show();
            }
            else {
                $(".pmnt-type-form div.error").hide();
            }
            this.defaultShowErrors();
        }

@Sparky：感谢您的帮助！

Answer 1

onsubmit I'm displaying the number of errors in my form at the top of the form.

这应该使用 showErrors 函数来完成。我们不知道这是否是您正在做的，因为您向我们展示的很少。

onfocusout 回调是仅在用户留下输入时触发验证的函数......它从来没有用于触发其他事情。

您还应该永远不要将jQuery.submit()放在任何jQuery验证插件的回调处理函数中。

为什么？因为插件已经自动捕获点击，阻止提交，检查验证错误，showing/hiding 消息，然后只允许提交 if/when 有效。您通过插入 .submit().

打破了整个过程

.numberOfInvalids()方法在the showErrors callback中最常用。

What I would like to do is update that number after a user fixes an error and focus's out of a field.

当我把 .numberOfInvalids() 放在它所属的地方时，它对我有用：jsfiddle.net/yLjrL8ay/

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

编辑:

目前，您在invalidHandler内有相关代码。但是，invalidHandler 仅在表单无效时触发...因此，如果您修复所有错误，invalidHandler 将不会再次触发。

如原始答案中所述，请改用 showErrors。

编辑 2:

你的逻辑也有问题...

if (errors) {
    // construct message
    ....

当 errors 转到 0 时，条件将为 false，您的消息永远不会更新。

jQuery.validate: 获取无效的 onfocusout 数量

jQuery .validate: get number of invalids onfocusout

jquery

jquery-validate