当输入值为 null 或 notnull 时添加或删除 Css 类答案

【问题标题】：Add or Delete Css class when input value is null or notnull当输入值为 null 或 notnull 时添加或删除 Css 类
【发布时间】：2013-09-23 14:21:16
【问题描述】：

我想为表单中的一些输入添加/删除 css 类

<form id="FormId" method="post" enctype="multipart/form-data">
<input type="text" class="input-bg">
<input type="text" class="input-bg">
<input type="text" class="input-bg">
<input type="text" class="validate input-bg">
<input type="text" class="validate input-bg">
<input type="text" class="input-bg">
<input type="text" class="bg-datepicker">
</form>

$("#FormId input[type=text]").each(function () 
{
 <!--if input have class validate I want to verify if text !=''-->
input.addClass('error');
<!--else-->
input.removeClass('error');
})

如何验证这里的值？

【问题讨论】：

标签： jquery forms validation input

【解决方案1】：

试试这个，使用.filter()

$("#FormId input[type=text].validate").filter(function(){
         this.value ==''?$(this).addClass('error'): $(this).removeClass('error')
});

DEMO

【讨论】：

【解决方案2】：

$("#FormId input[type=text]").each(function () {
    if ($(this).hasClass('validate')) {
        if (this.value == '') {
            $(this).addClass('error');
        } else if ($(this).hasClass('error')) {
            $(this).removeClass('error');
        }
    }
});

或

$("#FormId input[type=text].validate").each(function () {
    if (this.value == '') {
        $(this).addClass('error');
    } else if ($(this).hasClass('error')) {
        $(this).removeClass('error');
    }
});

参考

.hasClass()

http://learn.jquery.com/javascript-101/this-keyword/

【讨论】：

【解决方案3】：

只需使用 validate 类循环输入。您可以使用toggleClass 通过将布尔值作为第二个参数传递来添加或删除error 类：

$('#FormId input[type="text"].validate').each(function() {
    $(this).toggleClass('error', !$.trim(this.value).length);
});

.toggleClass Documentation

Fiddle

【讨论】：