Добавить класс, если ввод пуст и удалить его, если нет

Question

Я хотел бы добавить класс, если ввод пуст и удалить его, если это не так. Я изначально был addClass(); поэтому я попытался с помощью:

.removeClass().addClass(); 

Но это, кажется, не обновить класс по нажатию кнопки.

HTML:

<input id="firstName" type="text" /> 
<input id="lastName" type="text" /> 
<a href="#" id="button">SEND</a> 

JQuery:

var firstName = $("#firstName"); 
var lastName = $("#lastName"); 

$('#button').click(function() { 
    if(firstName.val() == "" || lastName.val() == ""){ 
     firstName.removeClass("errorInput").addClass("errorInput"); 
     lastName.removeClass("errorInput").addClass("errorInput"); 
    } 

if ($(":input").hasClass("errorInput")) { 
     alert("false"); 
    } else { 
     alert("true"); 
    } 
}); 

JSFiddle

Answer 1

Вы пытаетесь toggle the class. Для этого есть способ!

Цитирование из связанного дока:

Вторая версия .toggleClass() использует второй параметр для определения того, следует ли быть добавлен или удален класс. Если значение этого значения равно true, тогда класс добавляется; если false, класс удален. По сути, заявление:

$("#foo").toggleClass(className, addOrRemove); 

эквивалентно:

if (addOrRemove) { 
    $("#foo").addClass(className); 
} else { 
    $("#foo").removeClass(className); 
} 

Что-то вдоль линий firstName.toggleClass("errorInput", firstName.val() === "") должны работать для вашего случая.

Answer 2

Вы забыли добавить другое в свой if.

if(){ 
    // add the class 
} else { 
    // remove the class 
} 

Вот обновленный скрипку: https://jsfiddle.net/za7pkb74/1/

Answer 3

Ваш код не принимает во внимание тот случай, когда один вход пуст, а другой нет.

https://jsfiddle.net/0tfenwto/2/

if(firstName.val() == "") 
    firstName.addClass("errorInput"); 
else 
    firstName.removeClass("errorInput") 

if(lastName.val() == "") 
    lastName.addClass("errorInput"); 
else 
    lastName.removeClass("errorInput") 

EDIT: Общий длина входного проверки. https://jsfiddle.net/0tfenwto/3/

$('#button').click(function() { 
    $('input').each(function(){ 
     var val = $(this).val(); 
     $(this).toggleClass("errorInput",val.length==0) 
    }) 
}); 

Answer 4

Вы можете установить некоторый класс полей ввода или выберите эм нравится:.

var firstName = $("#firstName"); 
var lastName = $("#lastName"); 

$('#button').click(function() { 

    $('input').each(function(){ 

    if($this.val()===""){ 
     $(this).addClass("errorInput"); 
    } 

    else{ 
     $(this).removeClass("errorInput"); 
    } 


    }); 

});