Javascript 如何在JQuery验证程序中显示invalidHandler中的消息

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

当用户单击submit按钮时，无论第一个错误是什么，我都希望显示一个带有错误消息的警报框。我不想把错误写在文档上。我似乎不知道如何在验证后在警报中使用错误消息。我只找到了获取元素的方法，这对我没有什么帮助

从示例中引出，下面是一些我正在测试的代码

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

及

带有提交验证和默认消息的简单注释表单

名称
*

您不应该使用警报

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

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

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

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

---

另外，请记住查看

onfocusout

和

onkeyup

选项，否则您将收到连续消息。

必须检查errorList.length

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

这对我有用

    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();
    }

invalidHandler:函数（表单、验证器）{
var errors=validator.numberOfInvalids（）；
如果（错误）{
var message=errors==1
？'请更正以下错误：\n'
：'请更正以下'+错误+'错误。\n'；
var误差=”；
如果（validator.errorList.length>0）{
对于（x=0；x我知道这个问题已经很老了，但是为了帮助其他人得到更好的答案，我建议你们不要使用invalidHandler，而是使用淋浴器

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

因此，请这样做：

在页面末尾添加脚本

 $("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>


您使用什么插件来进行验证？这就是所谓的验证。我已经尽了我所能让客户相信验证发出的警告错误消息不是最好的解决方案，但他坚持认为。啊，好吧。
<div id="error"><span></span></div>