Question

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

我想要做的是在用户修复错误并将焦点放在某个字段之后更新该数字。这似乎是使用onfocusout：是要走的路。

我正在尝试在我的onfocusout：function中使用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我在表单顶部显示表单中的错误数。

这应该使用showErrors功能完成。而且我们不知道这是否是你正在做的事情，因为你很少向我们展示过。

onfocusout回调函数只是在用户离开输入时触发验证的功能......它从未用于触发其他事情。

你也应该从不将jQuery .submit()置于任何jQuery Validate插件的回调处理函数中。

为什么呢？因为插件已经自动捕获点击，阻止提交，检查验证错误，显示/隐藏消息，然后仅在/有效时允许提交。您通过插入.submit()来打破整个过程。

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

我想要做的是在用户修复错误并将焦点移出某个字段后更新该数字。

当我将.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：得到invalids onfocusout

1 个答案: