jQuery验证添加类到错误元素?

时间:2012-03-29 16:23:18

标签: jquery validation

我使用jQuery Validate获得以下代码。

$("#register").validate({
    debug: true,
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div.control-group")
                  .addClass(errorClass)
                  .removeClass(validClass);
    }, 
    unhighlight: function (element, errorClass, validClass) {
        $(element).parents(".error")
                  .removeClass(errorClass)
                  .addClass(validClass); 
    }
});

有没有办法在errorElement中添加一个类'span',以便它......:

<span class="help-inline error">Message</span>

4 个答案:

答案 0 :(得分:34)

当您指定errorClass时,没有什么能阻止您做出两件事:“帮助内联错误”,即:

$("#register").validate({
    debug: true,
    errorClass: 'error help-inline',
    validClass: 'success',
    errorElement: 'span',
    highlight: function(element, errorClass, validClass) {
      $(element).parents("div.control-group").addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).parents(".error").removeClass(errorClass).addClass(validClass);
    }
});

请注意,您必须使用jQuery Validate 1.10版才能支持此功能。早期版本只允许一个errorClass

答案 1 :(得分:0)

Ryley的另一种选择,即不包括“控制组”中的“帮助内联”,以避免突出显示输入偏移。

$("#register").validate({
    debug: true,
    errorClass: 'error help-inline',
    validClass: 'success',
    errorElement: 'span',
    highlight: function(element, errorClass, validClass) {
      $(element).parents("div.control-group").addClass('error').removeClass('success');
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).parents(".error").removeClass('error').addClass('success');
    }
});

我不能把这个问题包括在答案的评论中......; o(,。

答案 2 :(得分:0)

因为我认为这是针对Twitter Booststrap的,所以这是一个更好的解决方案,无需更新jquery验证:

$("#register").validate({
    debug: true,
    errorClass: 'help-inline',
    validClass: 'success',
    errorElement: 'span',
    highlight: function(element, errorClass, validClass) {
      $(element).parents("div.control-group").addClass("error");

    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).parents(".error").removeClass("error");
    }
});

答案 3 :(得分:-1)

$(".error").addClass('help-inline')

会将help-inline类添加到已经使用error类的所有DOM元素中。

这就是你要找的东西吗?