0

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

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

我有点想我可能需要保存对我的验证器的引用，然后循环通过验证器.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

});
}
4

1 回答 1

0

假设这种形式：

<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/

于 2013-04-25T04:18:01.580 回答