Как сделать так чтобы функция работала?

Question

[Statium]

Добрый день. Имеется файл func.js в нем функция

$(function() {
$('#notesview').on('change', function(){
if($(this).val().length != 0) {
$(this).removeAttr('style');
} else {
$(this).css(styles = {
borderColor: "#dc4747",
background: "#feecec"
});
}
});
});

Файл подключается к странице:
<script src="/func.js"></script>

в теге head и ниже код

<input id="sitename" maxlength="30" placeholder="<? echo $lang['mainplacename']; ?>" type="text" class="field" name="name" value="<? echo htmlspecialchars($ini->read('main','sitename')); ?>" />

Функция должна изменять цвет поля и бордер если поле пустое (не заполнено).
Но функция не работает. Что в ней не так?

Comments

[Froggyweb]

onchange - 'это потеря фокуса

[Stalker_RED]

Froggyweb, нет, потеря фокуса это blur. У чекбокса или select-а change сработает и без потери фокуса.

[Павел Корнилов]

Для начала - нужно понять, где находится элемент с id=notesview и что он из себя представляет.

Answer 1

[Александр Севиринов]

В вашей функции id отличается от id элемента input
и событие change не будет работать с полем input как вам хочется
вот функция рабочая для вашего поля ввода:

$(function() {
  $('#sitename').on('keyup', function() {
    if ($(this).val().length !== 0) {
      $(this).removeAttr('style');
    } else {
      $(this).css({
        'backgroundColor': '#feecec',
        'borderColor': '#dc4747'
      });
    }
  });
});

Но я рекомендую не использовать для этого jQuery. Тоже самое можно реализовать на CSS

Comments

[Александр Севиринов]

CSS:

.field:invalid {
  border-color: #dc4747;
  background: #feecec;
}

HTML:

<input id="sitename" maxlength="30" placeholder="placeholder" type="text" class="field" name="name" value="Value" required />