Проверка HTML5 не работает в ветке Symfony

Question

Мне нужно взять идентификационный номер, состоящий из 9 цифр и буквы в конце.Мое регулярное выражение выглядит тихо, но проверка не происходит, как ожидалось.

Мой тег ввода выглядит следующим образом.

Я использую веточки Symfony

<input type="text" 
    id="register_idNumber" 
    placeholder="NIC Number" 
    onkeypress="isInputNumber(event)" 
    pattern="^[0-9]{9}[a-zA-Z]$" 
    value="{{ form.idNumber.vars.value }}" 
    name="register[idNumber]" 
    required="required" 
    class="form-control" 
    oninvalid="this.setCustomValidity('Not a valid ID number! ')"
/>
<div class="input-group-append">

Answer 1

Использование встроенных версий обработчиков событий часто позволяет нам упускать из виду логику, необходимую для правильной работы.

Если вы собираетесь .setCustomValidity() при любой ошибке, она устанавливается на этот элемент навсегда.Ваш ввод никогда не будет правильным, потому что вы установили его так.

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

const idNumber = document.querySelector('input');
const form = document.querySelector('form');
const out = document.getElementById('output');


idNumber.addEventListener('input', () => {
  out.style.display = "none";
  idNumber.setCustomValidity('');
  idNumber.checkValidity();
});

idNumber.addEventListener('invalid', () => {
  if (idNumber.value === '') {
    idNumber.setCustomValidity('Enter your id!');
  } else {
    idNumber.setCustomValidity('Must be 9 digits followed by one letter.');
  }
});

form.addEventListener('submit', e => {
  out.style.display = "block";
  e.preventDefault()
});

#output{display:none}

<form>
<input type="text" 
    id="register_idNumber" 
    placeholder="NIC Number" 
    onkeypress="" 
    pattern="^[0-9]{9}[a-zA-Z]$" 
    value="" 
    name="register[idNumber]" 
    required="required" 
    class="form-control" 
/>
<button type="submit">Submit</button>
</form>
<div id="output">Form submitted.</div>

Либо воздержитесь от использования встроенных обработчиков событий.