Как изменить (добавить) класс DIV при каждом изменении ввода?

Question

Я прошу, если можно изменить (добавить) динамически класс в DIV при вводе изменения/проверки. Меньше сказать, например, у меня есть два класса: успех и ошибка. HTML разметка в основном это один:

<div class="control-group"> 
    <label class="control-label" for="inputFirstName">First Name: <span class="text-error">*</span></label> 
    <div class="controls"> 
     <input type="text" id="inputFirstName" placeholder="John"> 
    </div> 
</div> 

Итак, когда я заполняю вход с некоторым значением (независимо от того, правильно или нет, потому что я обрабатывать Validations корыта PHP), то я должен написать success после control-group класса или error когда это вход был пустым. Как я это делаю с помощью jQuery?

Answer 1

Чтобы выполнить это для каждое текстовое поле в форме (по запросу):

$('#formId input[type=text]').blur(function(e) { 
    var input = $(e.target); 
    if (input.val().length > 0) { 
     input.addClass('success'); 
     input.removeClass('error'); 
    } 
    else { 
     input.addClass('error'); 
     input.removeClass('success'); 
    } 
}); 

См. this jsFiddle.

Answer 2

Что-то вроде

$div = $(".control-group"); 
if($("#inputFirstName").length){ 
    $div.addClass('success'); 
}else{ 
    $div.addClass('error'); 
} 

Добавьте его в формы или любое другое подходящее событие, как focusout, данное tymeJV

Answer 3

Вы можете использовать метод focusout

$("#inputFirstName").focusout(function() { 
    var isValid; //Set to either true or false 
    isValid ? $(".control-group").addClass("success") : $(".control-group").addClass("error"); 
});