默认消息上元素的 jquery 验证类

Question

我正在使用 jquery 验证来显示错误消息我正在处理默认消息，但我想向所需的字段添加一个类。

这就是我所拥有的:

$(document).ready(function(){
  jQuery.extend(jQuery.validator.messages, {
    required:function (e,element) {
        var error = "<div class='page-controls alert alert-danger messagediv2'><strong>Error! </strong><span>Field "+element+" is required</span>" +
        "<button type='button' class='close' onclick='removeMSG()' aria-label='Close'>" +
        "<span aria-hidden='true'>&times;</span>" +
        "</button></div>";
        $("button.close").after(error);
        console.log(element);
        element.addClass('alert alert-danger');
    }
  });
});

.

   $("#modalvalidate").validate({
    errorElement:'div',
    errorClass: 'alert alert-danger',
    validClass: 'alert-success',


    errorPlacement: function(error, element) {
        error.insertAfter("button.close");
        error.addClass('messagediv2');
        error.addClass('page-controls');
    }
});
$('#modalvalidate').on('change', function(){
    $(this).validate();
    if ($('#modalvalidate').valid()) {
        $(".messagediv2").remove();
    }
});

当我尝试它时，它说

jquery.validate.min.js:4 Uncaught TypeError: element.addClass is not a function. Exception occurred when checking element

执行此操作的正确方法是什么？

编辑:我忘了说我在 $('#modalvalidate') 中定义的类不显示在任何地方。还有我定义的类 $('#modalvalidate').validate确实使该字段呈红色并显示错误消息。这对于我在 jQuery.extend(jQuery.validator.messages 中定义的默认消息不起作用

Answer 1

看起来您有一个 DOM 或原始 JavaScript 对象作为参数，而您期望的是 jQuery 对象。

element 参数不是实际的 DOM 元素，error 参数不是错误详细信息吗？

例如使用元素:

errorPlacement: function(error, element) {
    element.insertAfter("button.close");
    element.addClass('messagediv2');
    element.addClass('page-controls');
}

作为通用解决方案，您可以将参数包装在 $() 中。如果参数已经是一个 jQuery 对象，这不会产生任何实际效果，并且会阻止它崩溃。

例如

errorPlacement: function(error, element) {
    $(error).insertAfter("button.close");
    $(error).addClass('messagediv2');
    $(error).addClass('page-controls');
}

或者(如果第一个问题是正确的，但仍然不起作用):

errorPlacement: function(error, element) {
    $(element).insertAfter("button.close");
    $(element).addClass('messagediv2');
    $(element).addClass('page-controls');
}