所有空输入都添加了类

Question

我正在进行表单验证，我希望所有输入为空的都会添加类“错误”，现在我一次只能获得一个。

的jQuery

$(".text-input").blur(function () {
    if ($(this).val() == '') {
        $(this).addClass('error');
    }
});

JSFIDDLE

Answer 1

您可能还想恢复 nonerror 并检查空格： 的 demo

var inp = $('.text-input');                     // Cache your selectors

inp.blur(function () {                          // On blur...
    inp.removeClass('error').filter(function(){ // Remove error classes. Filter
       return !$.trim(this.value);              // to return el. without value
    }).addClass('error');                       // and assign error class.
});

另一种方法： demo

var inp = $('.text-input');

function err(){
  $.each(inp, function(){
    $(this).toggleClass('error', !$.trim(this.value));
 });  
}

inp.blur(err);

使用经典if demo

var inp = $('.text-input');

function err(){
  $.each(inp, function(){
    if(!$.trim(this.value)){
      $(this).addClass('error');
      // more stuff
    }else{
      $(this).removeClass('error');
      // more stuff
    }
 });  
}

inp.blur(err);

Answer 2

添加错误类的决定也应该在开始时进行;为此，您可以编写一个小函数，该函数将在开始时或模糊事件发生时运行。

此外，您可以使用.toggleClass()简化添加或删除错误类的逻辑。

function updateInputClass()
{
    $(this).toggleClass('error', $.trim(this.value) == '');
}

$(".text-input")
  .blur(updateInputClass)
  .each(updateInputClass)

Demo