表单顶部的Jquery.Validate错误消息

时间:2012-07-30 02:25:09

标签: javascript jquery html forms jquery-validate

我想知道如何在表单上方显示单个错误消息而不是单个字段消息。像这个表单有http://jquery.bassistance.de/validate/demo/marketo/step2.htm

我知道它与句柄有关但不完全确定如何或在何处放置它们

    <script>
    $(document).ready(function(){
    $("#valform").validate();
    });
    </script>

这是我使用所有默认验证的代码

1 个答案:

答案 0 :(得分:3)

您应该使用invalidHandler来实现此功能。这样的事情应该做:

$("#myform").validate({
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();

        if (errors) {
            $("#error-message").show().text("You missed " + errors + " field(s)");
        } else {
            $("#error-message").hide();
        }
    }
});

示例: http://jsfiddle.net/KheRr/1/

如果要隐藏默认错误消息,则应指定""作为字段和验证类型的错误消息:

$("#myform").validate({
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();

        if (errors) {
            $("#error-message").show().text("You missed " + errors + " field(s)");
        } else {
            $("#error-message").hide();
        }
    },
    messages: {
        field1: {
            required: "" // You'll have to do this for each field and validation type.
        }
    }
});

示例: http://jsfiddle.net/KheRr/2/