Question

尝试验证我不知道其内容的表单，并使用jQuery Validate在页面顶部显示摘要。我不希望每个字段旁边都有消息。我可以在提交时正常工作，如果我禁用onfocusout / onblur / onkeyup，一切都很好。目前我一直试图通过showErrors来做到这一点，但我心胸开阔。

我的印象是jQuery Validate只会在触发onblur或keyup时返回失败的单个元素。现在发生的事情是我的摘要每次被覆盖，当它触发onblur时，摘要可以返回空（可能是因为errorMap只包含失败的一个元素）。我想要的是更新或重新生成我的摘要，以便在用户浏览表单时保持正确。

我认为我可能需要保存对验证器的引用，然后循环验证validator.errors（）或.elements（），但我不知道该采用何种方法。我的整个validateform（）函数都是在点击的任何提交按钮中调用的。

function validateform() {

$("form").validate({

    showErrors: function(errorMap, errorList) {

        var errorCount = this.numberOfInvalids();

        if (errorCount > 0) {
            if (errorCount == 1) {
                $("#errorContainer h3").html("Your form contains " + errorCount + " error, see details below.");
            }
            else { /*two or more errors */
                $("#errorContainer h3").html("Your form contains " + errorCount + " errors, see details below.");
            }
            var summary = '';

            $.each(errorMap, function(key, value) {
                var field = $('input[name="' + key + '"],select[name="' + key + '"],textarea[name="' + key + '"]');
                field.addClass('err');
                var fieldname = field.attr("rel");
                summary += '<p><span class="errorkey">' + fieldname + '</span> - <span class="errorvalue">' + value + "</span></p>";
            });
            $('#errorList').html(summary);
            $('#errorContainer').slideDown();
        }
    },
    onfocusout: false,
    onkeyup: false,
    onclick: false

});
}

Answer 1

假设这种形式：

<div id="errorContainer"></div>
<form id="myform">
    <div>
        <label for="field1">field1</label>
        <input type="text" id="field1" name="field1" />
    </div>
    <div>
        <label for="field2">field2</label>
        <input type="text" id="field2" name="field2" />
    </div>
</form>

您可以执行以下操作来获取实时错误并将其放在摘要部分中：

$(function () {
    var
        container = $("#errorContainer"),
        validator = $("#myform").validate({
            rules: {
                field1: {
                    minlength: 2,
                    required: true
                },
                field2: {
                    required: true
                }
            },
            messages: {
                field1: {
                    minlength: "Please enter 2 or more characters for field1",
                    required: "Please enter field1"
                },
                field2: {
                    required: "Please enter field 2"
                }
            },
            onfocusout: function (element) {
                this.element(element);
            },
            errorPlacement: function (error, element) {
                var
                existingErSelector = $.validator.format("label[for={0}]:contains({1})", element.attr("id"), error.text());

                if (container.find(existingErSelector).length === 0) {
                    $("#errorContainer ").append(error);
                }
            },
            unhighlight: function (validElement) {
                container.find($.validator.format("label[for={0}]", validElement.id)).remove();
            }
        });
});

看到这个小提琴：http://jsfiddle.net/richwag/AjXqp/5/

jQuery使用摘要验证onBlur

1 个答案: