Если input заполнен присвоить класс родителю div
 

Приветствую.

Есть скрипт, который при focus input добавляет класс к div. Подскажите, пожалуйста, как сделать что бы класс подставлялся при focus(как сейчас) и когда input заполнен.

$('.input-control').on('focus blur', function(e){
   $(this).parent()[e.type === 'focus' ? 'addClass' : 'removeClass']('input-focused');
});

<div><input name="email" type="text" class="input-control"></div>  
<div><input name="password" type="password" class="input-control"></div>

А что значит "input заполнен"?

Когда пользователь ввел логин и/или пароль.

Как понять, что ввод логина или пароля завершен?

Моя задача - оформление div и input при focus и когда в поле что-то написано(т.е не пустое), для этого нужен класс.

замените ваш, на этот

$('.input-control').on('focus blur', function(e){
   if(!$(this).val())$(this).parent()[e.type === 'focus' ? 'addClass' : 'removeClass']('input-focused');
});

Это просто отлично!
Большое Спасибо!

Только вот ошибка в консоли появилась:
TypeError: "removeClass" is not a function

j0hnik, может я что-то не понял, но по-моему (и судя по посту 8) в строке 3 какая-то хрень написана.

$(this).val() не вернет объекта jq, а у string||null нет методов addClass, removeClass.

Скрипт работает, но ошибка вылезла:
TypeError: "removeClass" is not a function

$('.input-control').on('focus blur', function(e){
   if(!$(this).val())$(this).parent()[e.type === 'focus' ? 'addClass' : 'removeClass']('input-focused');
});

прошу прощения

dasha862, добавить класс, если это focus и поле заполнено.

$('.input-control').on('focus blur', function(e){
	$(this).parent()[(e.type=='focus' && $.trim($(this).val()).length)?'addClass':'removeClass']('input-focused');
});

Nexus,
Только не && а или ||

Не знаю в чем разница между а или ||, поставила ||, все ок. СПАСИБО ВАМ!

dasha862, https://learn.javascript.ru/logical-ops

Благодарю:) , похоже тот же принцип, что и в smarty.

В продолжении темы.
При заполнении полей и отправки формы, например, код с картинки введен неправильно, страница обновляется, поля по-прежнему заполнены, но скрипт почему-то не подставляет класс input-focused, т.е не определяет, что они заполнены. Подскажите, пожалуйста, как это реализовать.
Проверяла на обоих вариантах.

if($('.input-control').val())$('.input-control').parent().addClass('input-focused');

добавьте перед функцией

Я Вам очень признательна. Спасибо.

Подскажите, пожалуйста, как в скрипте указать, что parent - это div(еще лучше с классом), понадобилось обернуть input span-ом, и ему присвоился класс input-focused.

if($('.input-control').val())$('.input-control').parent().addClass('input-focused');

$('.input-control').on('focus blur', function(e){
   if(!$(this).val())$(this).parent()[e.type === 'focus' ? 'addClass' : 'removeClass']('input-focused');
});

<div><span><input name="email" type="text" class="input-control"></span></div> 
<div><span><input name="password" type="password" class="input-control"></span></div>

dasha862,

.parents('div.some-class')

Если поняла правильно, должно выглядеть так:

if($('.input-control').val())$('.input-control').parent('div.form-group').addClass('input-focused');

$('.input-control').on('focus blur', function(e){
   if(!$(this).val())$(this).parent('div.form-group')[e.type === 'focus' ? 'addClass' : 'removeClass']('input-focused');
});

<div class="form-group"><span><input name="email" type="text" class="input-control"></span></div> 
<div class="form-group"><span><input name="password" type="password" class="input-control"></span></div>

В вышеуказанном варианте, к <div class="form-group"> не присвоился класс input-focused.

Извините, не исправила у себя на parents. Спасибо!