Как добавить условие, если input поле уже заполнено?

Question

[Александр Янк]

Есть скрипт, при заполнении input поля он добавляет класс field-filled, однако, скрипт не рассчитан на то, что в input поле уже заполнено, соотвественно и не добавляет класс:

$(".form-control, .ui-field").change(function () {
        if ($(this).val().trim().length) {
            $(this).parent().addClass("field-filled");
        } else {
            $(this).parent().removeClass("field-filled");
        }
    });

Вот рабочий пример, посмотрите на поле email:
https://codepen.io/alex-lenk/pen/mpKXmx

Comments

[Max Cohen]

Рабочий пример, ничего нет.

[Александр Янк]

Max Cohen, простите, вот https://codepen.io/alex-lenk/pen/mpKXmx

Answer 1

[0xD34F]

Можно затриггерить событие change после установки обработчика, вызвав соответствующий метод без параметров:

$elems.change(function() {
  ...
}).change();

Или, если такой способ вам не подходит (например, ранее устанавливались другие обработчики change, и вы не хотите, чтобы они сработали), можно применить each, передав ему обработчик:

function onChange() {
  ...
}

$elems.change(onChange).each(onChange);

Answer 2

[Александр Янк]

Решение возникло само собою, добавить обычное условие всем инпутам:

Проверка каждого элемента с определенным классом, если поле не пустое то добавляем класс родителю.

var uiField = $(".form-control, .ui-field"),
        fieldFilled = "field-filled";

    uiField.change(function () {
        if ($(this).val().trim().length) {
            $(this).parent().addClass(fieldFilled);
        } else {
            $(this).parent().removeClass(fieldFilled);
        }
    });

    uiField.each(function () {
        if (this.value !== "") {
            $(this).parent().addClass(fieldFilled);
        }
    });