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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9929418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 11:28:32  来源:igfitidea点击:

jQuery validate add class to error element?

jqueryvalidation

提问by redconservatory

I have the following code using jQuery Validate.

我有以下使用 jQuery 验证的代码。

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

Is there a way to add a class to the errorElement, 'span' so that it's...:

有没有办法将一个类添加到 errorElement, 'span' 以便它是...:

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

回答by Ryley

When you specify the errorClass, there's nothing stopping you from making it two things: "help-inline error", i.e.:

当您指定 时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);
    }
});

Note that you have to use version 1.10 of jQuery Validate to support this. Earlier versions only allow one errorClass.

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

回答by pdorgambide

An alternative of Ryley answer that not include the 'help-inline' into 'control-group' that avoid input offset on highlight.

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

I cound't to include that issue like a comment of the answer...;o(,.

我不能像对答案的评论一样包含这个问题...;o(,.

回答by Santiago

Because I think this is for Twitter Booststrap, this is a better solution with no need to update jquery validation:

因为我认为这是针对 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");
    }
});

回答by joehand

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

will add the help-inlineclass to all DOM elements with the errorclass already.

help-inline类添加到所有具有error该类的DOM 元素。

Is that what you are looking for?

这就是你要找的吗?