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

时间:2016-12-05 09:56:23

标签: jquery jquery-validate


我正在使用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未捕获的TypeError:element.addClass不是函数。检查元素

时发生异常

这样做的正确方法是什么?

编辑:我忘了说我在$('#modalvalidate')中定义的课程没有显示在任何地方。而且我定义$('#modalvalidate').validate的类确实使该字段变为红色并且显示错误消息就好了。这对我在jQuery.extend(jQuery.validator.messages

中定义的默认消息不起作用

2 个答案:

答案 0 :(得分:2)

您似乎有一个DOM或原始JavaScript对象作为您期望jQuery对象的参数。

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

e.g。使用element

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

作为通用解决方案,您可以在$()中包装参数。如果参数已经是jQuery对象并且会阻止它崩溃,那么这没有实际效果。

e.g。

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

答案 1 :(得分:1)

试试这个:

$("#register").validate({
    // your code
    errorClass: 'error help-inline'
});