所有空輸入添加類

Question

我正在做一個表單驗證，並且我希望所有空的輸入添加類「錯誤」，現在我一次只有一個。

jQuery的

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

JSFIDDLE

Answer 1

您可能還需要恢復非錯誤和檢查空格： 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); 

採用了經典的ifdemo

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