`.checkValidity ()` с атрибутом HTML5 `pattern` всегда возвращает true

Question

Я использую приведенный ниже фрагмент кода, чтобы проверить правильность этого ввода и убедиться, что он не содержит запятых:

var valid_part = document.getElementById("part");

if (valid_part.checkValidity()) {
  alert("Item Description contains no commas ");
}
else {
  alert("Item Description cannot contain a comma");
}

<input pattern="[^,]" type="text" id="part">

Однако, valid_part.checkValidity() всегда возвращает true независимо от того, какое значение ввода.

Я пробовал это на Chromium и Firefox на Debian, а также на Chrome и Firefox на Android, и результат всегда одинаков.

Является ли функция действительной? Если нет, должен ли я использовать альтернативный метод для проверки запятых на входе?

Answer 1

Из документации MDN для <input> (выделено):

pattern: регулярное выражение, с которым проверяется значение элемента управления. Шаблон должен соответствовать всему значению.

Таким образом, [^,] означает «строка содержит ровно один символ , который не является запятой». Таким образом, ваша проверка правильности должна фактически возвращать true только для одиночных символов, кроме ,. Он также возвращает true для пустой строки, но фактически возвращает false для всех остальных строк.

Вы хотите [^,]*, что означает «строка содержит любое количество символов (включая ни одного), которые не являются запятыми».

Кроме того, это не было ясно из предоставленного вами кода, но убедитесь, что этот код находится в функции, которая запускается, когда вам нужна проверка. Пример фрагмента:

document.getElementById("checker").addEventListener("click", function() {
  var valid_part = document.getElementById("part");

  if (valid_part.checkValidity()) {
    alert("Item Description contains no commas ");
  }
  else {
    alert("Item Description cannot contain a comma");
  }
});

<input id="part" type="text" pattern="[^,]*" />
<input id="checker" type="button" value="Check validity" />