Question

我正在尝试在表单上使用JQuery验证器，并且我试图找出在invalidHandler选项中获取错误的消息（或者如果还有其他地方，请告诉我们）。

当用户点击提交按钮时，无论第一个错误是什么，我都希望显示一个包含错误消息的警告框。我不希望错误写在文档上。我似乎无法弄清楚如何在验证后获取警报中使用的错误消息。我只找到了如何获取元素，这对我没有帮助。

从示例中拉出来，这是我正在测试的一些代码

$(document).ready(function() {
    $('#commentForm').validate({
        invalidHandler: function(f, v) {
            var errors = v.numberOfInvalids();
            if (errors) {
                var invalidElements = v.invalidElements();
                alert(invalidElements[0]);
            }
        }
    });
});

和

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>

Answer 1

这对我有用......

    invalidHandler: function(form, validator) {
      var errors = validator.numberOfInvalids();
      if (errors) {
        var message = errors == 1
          ? 'Please correct the following error:\n'
          : 'Please correct the following ' + errors + ' errors.\n';
        var errors = "";
        if (validator.errorList.length > 0) {
            for (x=0;x<validator.errorList.length;x++) {
                errors += "\n\u25CF " + validator.errorList[x].message;
            }
        }
        alert(message + errors);
      }
      validator.focusInvalid();
    }

Answer 2

重载showErrors按预期工作。我只需要收到第一条错误消息。

    showErrors: function(errorMap, errorList) {
        alert(errorList[0].message);
    }

另请注意查看onfocusout和onkeyup选项，否则您会收到连续的消息。

Answer 3

必须检查errorList.length

if (errorList.length > 0) alert(errorList[0].message);

Answer 4

你不应该使用警报，

但如果你真的想用它。解决方案取决于插件如何添加dom元素，但您可以删除invalidHandler中的那些dom元素。因此，请添加这些dom元素，但将其删除。

其他选择是，您应该修补用于验证的插件，而不是添加dom show alert。

Answer 5

我知道这个问题很老，但是为了帮助其他人得到更好的答案，我建议你们不要使用invalidHandler，而是使用showErrors。

这是因为只有在您提交表单时才会调用invalidHandler 每次更新字段时都会调用showErrors。

所以，这样做：

页面末尾的脚本

 $("form").validate({
    rules: {
        name: {
            required: true
        }
    },
    messages: {
        name: {
            required: "required"
        }
    },
    highlight: function (element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error')
        $(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        $(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
    showErrors: function (errorMap, errorList) {
        var errors = this.numberOfInvalids();
        if (errors) {
            var message = errors == 1
              ? 'Your form has 1 error'
              : 'Your form has ' + errors + ' errors.';
            message = message + ' Please, fix then.'
            $("#error span").empty().html(message);
            $("#error").show();
        } else {
            $("#error").hide();
        }
        this.defaultShowErrors();
    },
});

不要忘记你的html标签

<div id="error"><span></span></div>

如何在JQuery验证器中的invalidHandler中显示消息

5 个答案: