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

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

我知道这个问题已经很老了，但为了帮助其他人获得更好的答案，我建议你们不要使用 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>

Answer 3

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

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

还记得看看onfocusout 和onkeyup 选项，否则你会收到连续的消息。

Answer 4

必须检查 errorList.length

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

Answer 5

你不应该使用警报，

但如果你真的想使用它。解决方案取决于插件如何添加 dom 元素，但您可以在 invalidHandler 中删除这些 dom 元素。所以让那些 dom 元素添加但删除它。

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