Непоследовательное поведение для шаблонов HTML

Question

Я пытаюсь заставить работать шаблоны HTML.Я ожидаю, что как только текст, который не соответствует заданному шаблону, будет введен во вход, края ввода станут красными (состояние ошибки) и вернутся в нормальное состояние, как только текст будет соответствовать шаблону.снова.Это шаблон, который я использую - для людей, не являющихся регулярными выражениями, он допускает символы из алфавита, как в верхнем, так и в нижнем регистре, и требует ровно три символа.

<input type="text" pattern="[A-Za-z]{3}">

Я не мог получить такое поведениеНадежно работает в моем проекте, поэтому я взял этот пример из W3Schools: https://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml5_input_pattern, чтобы проверить его.

Когда я загружаю его в Firefox (последняя версия):

• После ввода неверных данных в первый раз после рендеринга страницы, мне нужно щелкнуть где-нибудь еще (ввод должен потерять фокус), чтобы ввод перешел в состояние ошибки.
• После этого, если я введу действительные данные и щелкну где-нибудь еще, состояние ввода вернется к нормальному.(ожидаемое поведение)
• Однако, если я затем ввожу неверные данные без потери ввода, состояние ошибки все еще не сработает.

Когда я тестирую его в Chrome (снова последняя версия), вход просто никогда не становится красным, независимо от того, что я ввожу или где фокус.

Мало того, что шаблон не ведет себя так, как я ожидал, но он не ведет себя согласованно от браузера к браузеру.

Может кто-нибудь объяснить это?Это официальная функция?Я знаю, что он не работает согласованно в мобильных браузерах, но в большинстве браузеров для настольных компьютеров (платформа в Win7 FWIW)

Answer 1

Проверка HTML5 оформлена по-разному в разных браузерах.Хотя поддержка браузеров все будет препятствовать отправке формы, если она недействительна, все, что находится за ее пределами, является решением о дизайне браузера.

Вы можете попытаться навязать определенное поведение, используя JavaScript.Например, если вы хотите немедленную обратную связь для неверного ввода, вы можете прикрепить обработчик к событию input.

document.querySelector('input').addEventListener('input', function(e) {
  if (!e.currentTarget.checkValidity()) {
    e.currentTarget.classList.add('invalid');
  } else {
    e.currentTarget.classList.remove('invalid');
  }
});

.invalid {
  background-color: red;
}

<form>
  <input type="text" pattern="[A-Za-z]{3}">
  <input type="submit">
</form>

Очевидно, что вы захотите улучшить пользовательский стиль и что-то, что не конфликтует с собственным стилем "недопустимого состояния" основных браузеров, ноэто, по крайней мере, заставляет вас начать работу в правильном направлении.

Вы также можете заставить браузер сообщать о действительности события input.Но вы можете обнаружить, что поведение большинства браузеров для reportValidity слишком громкое, чтобы показывать на каждом недействительном input.

document.querySelector('input').addEventListener('input', function(e) {
  e.currentTarget.reportValidity();
});

<form>
  <input type="text" pattern="[A-Za-z]{3}">
  <input type="submit">
</form>