【问题标题】:How to disable default validation notifications?如何禁用默认验证通知?
【发布时间】:2011-04-16 03:37:38
【问题描述】:

我正在尝试使用jquery validate plugin 验证表单,但我很难确定是否可以覆盖显示错误消息的默认验证方法。默认操作似乎是在无效字段之后立即显示与表单字段有关的错误消息。

我不想这样做,我只想突出显示有错误的字段并在表单顶部显示错误列表。我通过使用 invalidHandler 在 validate 插件的文档中找到了与此类似的内容,但这不会禁用在无效字段旁边显示错误消息,也不允许我捕获错误消息并将它们放在顶部表格。

$("#myform").validate({
    debug: true,
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1
                ? 'You missed 1 field. It has been highlighted'
                : 'You missed ' + errors + ' fields. They have been highlighted';
            $("div#errorMessage span").html(message);
            $("div#errorMessage").show();
        } else {
            $("div#errorMessage").hide();
        }
    },
    rules: {
        name: (required: true}
    },
    messages: {
        name: "You must give your name"
    }
});

提前感谢您的帮助。

【问题讨论】:

    标签: jquery jquery-plugins jquery-validate


    【解决方案1】:

    Jquery Validate 有许多选项可用于自定义错误消息的显示方式。您可以在此处查看所有选项

    http://docs.jquery.com/Plugins/Validation/validate#toptions

    errorLabelContainer 在您定义的元素中而不是在字段旁边显示错误消息。

    $("#myform").validate({
        debug: true,
        errorLabelContainer: "div#errorMessage",
        wrapper: "li", 
        rules: {
            name: (required: true}
        },
        messages: {
            name: "You must give your name"
        }
    });
    

    wrapper 选项允许您将消息包装在一个元素中,在本例中为一个 li。

    您可以使用 highlight 和 unhighlight 来管理包含错误的元素的格式。

    【讨论】:

      【解决方案2】:
      $(".selector").validate({
         showErrors: function(errorMap, errorList) {
              $("#summary").html("Your form contains "
                                         + this.numberOfInvalids() 
                                         + " errors, see details below.");
          }
       })
      

      http://docs.jquery.com/Plugins/Validation/validate#options

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2023-03-08
        相关资源
        最近更新 更多