Как отследить программное изменение значения input для валидации?

Question

[leyarthemes]

Здравствуйте, делаю сложную форму с некоторыми нестандартными полями. Пример такого поля - поле с выпадающим списком (id="itemsInput" и id="choicesInput"). Функция dropdown() работает так как мне нужно (в примере сильно упрощена), но возникают проблемы при валидации функцией validateForm(). Конкретнее, .addEventListener("input", function(){ }); реагирует на изменение значения поля путём нажатия клавиш, но не реагирует никак на изменение поля функцией dropdown(). Мне очень важно, чтобы класс invalid удалялся при клике или ховере на пункт выпадающего списка на лету, но я не знаю как это сделать правильно. Нужен чистый JS, без плагинов и фрейморков. https://jsfiddle.net/q2uL3k57/74/ Вот пример на jsfiddle Спасибо.

Answer 1

[Андрей]

У вас валидация происходит по событию input, его вам и нужно вызывать.
inp.dispatchEvent(new Event('input'));
https://jsfiddle.net/c0rL2g9j/
Строки 21, 25

Comments

[leyarthemes]

leyarthemes, спасибо, жаль только, в ie new Event() не работает((

[di]

leyarthemes, а closest работает?
https://developer.mozilla.org/ru/docs/Web/API/Elem...

[leyarthemes]

Алексей Долгов, тоже нет

[di]

leyarthemes, Но тем не менее в коде вы closest написали своими ручонками(хотя явно указано в описании что эта технология экспериментальная и не всеми поддерживается), а тут сообщаете что

жаль только, в ie new Event() не работает((

Тогда и в вопросе пишите что требуется поддержка IE. и сами пишите код который поддерживает ie или полифиллы используйте

[leyarthemes]

Ответ Андрея был тем, что нужно. Кого интересует поддержка IE9+, вот разница в объявлении события (нужен старый стандарт)

// современный стандарт
var event = new Event("click", {
  bubbles: true,
  cancelable: true
});

// старый стандарт
var event = document.createEvent("Event");
event.initEvent("click", true, true);

Источник: https://learn.javascript.ru/dispatch-events

[leyarthemes]

Алексей Долгов, спасибо за совет, вопрос решён.

Answer 2

[Medin K]

Можно переписать set, get для value input-a
https://codesandbox.io/s/oxyxn93n6

Comments

[di]

Medin K, красивый ход. Но думаю автор не знает что такое "реактивность данных" и вряд ли оценит)

Answer 3

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

Ну, если совсем грубо, то так - https://jsfiddle.net/Lgmc3sz1/

Comments

[leyarthemes]

Спасибо, но это не работает так как нужно.