EventListener, который срабатывает при вводе текста, но НЕ при удалении ввода - PullRequest
Новая
       6

EventListener, который срабатывает при вводе текста, но НЕ при удалении ввода

0 голосов
/ 12 октября 2018

Фон :

Я добавляю прослушиватели событий в форму HTML, которая проверяет правильность ввода в каждом поле.Например: 

inputElement.addEventListener("input", function(event) {
        if (!isValid(input.value)) {
            input.setCustomValidity("Input is invalid");
        } else {
            input.setCustomValidity("");
        }
});

Однако указанное поле формы не является обязательным - пользователь может отправить форму с пустым полем, но не может отправить ее с неверным вводом.

Проблема :

Если пользователь отправляет форму, даже не касаясь этого ввода (оставляя его пустым), событие "input" никогда не происходит, и форму можно отправить.(Хорошо)

Если пользователь вводит неправильный ввод и отправляет форму, он получает предупреждение "input is invalid".(Хорошо)

Но, если они введут неверный ввод, получат предупреждающее сообщение, а затем удалят ввод, появится предупреждающее сообщение и форма будет отправлена.(Плохо)

Это происходит потому, что удаление входа вызывает событие input.

Progress :

Я пытался использовать событие textInput вместо этого, но у меня такое же поведение.Я проверил других доступных событий , но я не вижу ни одного, который мог бы решить эту проблему.

I мог бы заставить его работать, изменив мой isValidфункция, возвращающая true если дана пустая строка, но я бы хотел избежать этого, если это возможно.Причина в том, что я упростил пример здесь, но на самом деле эта функция на самом деле isValidServiceId и технически пустая строка не является действительным идентификатором службы.

1 Ответ

0 голосов
/ 12 октября 2018

Вы можете изменить свою условную логику, говоря: «Если , то ввод заполнен и неверен», а не просто «Если ввод недействителен» ... 

inputElement.addEventListener("input", function(event) {
  if (input.value.length && !isValid(input.value)) {
    input.setCustomValidity("Input is invalid");
  } else {
    input.setCustomValidity("");
  }
});
...