Проверка ограничений

Создание веб-форм всегда было сложной задачей. Хотя маркировка самой формы проста, проверка того, имеет ли каждое поле допустимое и согласованное значение, сложнее, а информирование пользователя о проблеме может стать головной болью. HTML5 ввёл новые механизмы для форм: он добавил новые семантические типы для элемента <input> и проверку ограничений, чтобы облегчить работу по проверке содержимого формы на стороне клиента. Базовые, обычные ограничения можно проверять, не прибегая к JavaScript, задавая новые атрибуты; более сложные ограничения можно проверять с помощью API проверки ограничений.

Для базового введения в эти концепции с примерами см. учебник по проверке форм.

В HTML базовые ограничения объявляются двумя способами:

• Выбирая наиболее семантически подходящее значение для атрибута type элемента <input>, например, выбор типа email автоматически создаёт ограничение, проверяющее, является ли значение допустимым адресом электронной почты.
• Устанавливая значения связанных с проверкой атрибутов, позволяя описывать базовые ограничения простым способом, без необходимости использования JavaScript.

Встроенные ограничения для атрибута type следующие:

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

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

В дополнение к атрибуту type, описанному выше, для описания базовых ограничений используются следующие атрибуты:

Проверка ограничений выполняется с помощью API проверки ограничений либо для отдельного элемента формы, либо на уровне всей формы, на элементе <form> самом по себе. Проверка ограничений выполняется следующим образом:

• Вызовом метода checkValidity() или reportValidity() интерфейса DOM, связанного с формой, (HTMLInputElement, HTMLSelectElement, HTMLButtonElement, HTMLOutputElement или HTMLTextAreaElement), который оценивает ограничения только для этого элемента, позволяя скрипту получить эту информацию. Метод checkValidity() возвращает значение Boolean, указывающее, соответствует ли значение элемента его ограничениям. (Это обычно выполняется пользовательским агентом при определении, какие из псевдоклассов CSS, :valid или :invalid, применяются.) В отличие от этого, метод reportValidity() сообщает пользователю о любых нарушениях ограничений.
• Вызовом метода checkValidity() или reportValidity() интерфейса HTMLFormElement.
• Путем отправки самой формы.

Вызов checkValidity() называется статической проверкой ограничений, в то время как вызов reportValidity() или отправка формы называется взаимодействующей проверкой ограничений.

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

В основном, идея заключается в том, чтобы вызвать JavaScript при возникновении события в поле формы (например, onchange), чтобы вычислить, нарушено ли ограничение, а затем использовать метод field.setCustomValidity() для установки результата проверки: пустая строка означает, что ограничение выполняется, а любая другая строка означает ошибку, и эта строка — сообщение об ошибке, которое нужно отобразить пользователю.

Формат почтового индекса отличается от страны к стране. Большинство стран допускают необязательный префикс с кодом страны (например, D- в Германии, F- во Франции или Швейцарии), но в некоторых странах почтовые индексы содержат только фиксированное количество цифр; другие, как, например, Великобритания, имеют более сложную структуру, допускающую буквы в определенных позициях.

В качестве примера добавим скрипт, проверяющий проверку ограничений для этой простой формы:

<form>
  <label for="ZIP">ZIP : </label>
  <input type="text" id="ZIP" />
  <label for="Country">Country : </label>
  <select id="Country">
    <option value="ch">Switzerland</option>
    <option value="fr">France</option>
    <option value="de">Germany</option>
    <option value="nl">The Netherlands</option>
  </select>
  <input type="submit" value="Validate" />
</form>

Это отображает следующую форму:

Сначала напишем функцию, проверяющую само ограничение:

function checkZIP() {
  // For each country, defines the pattern that the ZIP has to follow
  const constraints = {
    ch: [
      "^(CH-)?\\d{4}$",
      "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950",
    ],
    fr: [
      "^(F-)?\\d{5}$",
      "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012",
    ],
    de: [
      "^(D-)?\\d{5}$",
      "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345",
    ],
    nl: [
      "^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$",
      "Netherland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS",
    ],
  };

  // Read the country id
  const country = document.getElementById("Country").value;

  // Get the NPA field
  const ZIPField = document.getElementById("ZIP");

  // Build the constraint checker
  const constraint = new RegExp(constraints[country][0], "");
  console.log(constraint);

  // Check it!
  if (constraint.test(ZIPField.value)) {
    // The ZIP follows the constraint, we use the ConstraintAPI to tell it
    ZIPField.setCustomValidity("");
  } else {
    // The ZIP doesn't follow the constraint, we use the ConstraintAPI to
    // give a message about the format required for this country
    ZIPField.setCustomValidity(constraints[country][1]);
  }
}

Затем свяжем ее с событием onchange для <select> и событием oninput для <input>:

window.onload = () => {
  document.getElementById("Country").onchange = checkZIP;
  document.getElementById("ZIP").oninput = checkZIP;
};

Еще одно распространенное ограничение — ограничение размера загружаемого файла. Проверка этого на стороне клиента перед передачей файла на сервер требует объединения API проверки ограничений, а именно метода field.setCustomValidity() , с другим API JavaScript, в данном случае с API файлов.

Вот часть HTML:

<label for="FS">Select a file smaller than 75 kB : </label>
<input type="file" id="FS" />

Это отображает:

JavaScript считывает выбранный файл, использует метод File.size() для получения его размера, сравнивает его с (заданным жестко) лимитом и вызывает API ограничений, чтобы сообщить браузеру о нарушении:

function checkFileSize() {
  const FS = document.getElementById("FS");
  const files = FS.files;

  // If there is (at least) one file selected
  if (files.length > 0) {
    if (files[0].size > 75 * 1024) {
      // Check the constraint
      FS.setCustomValidity("The selected file must not be larger than 75 kB");
      FS.reportValidity();
      return;
    }
  }
  // No custom constraint violation
  FS.setCustomValidity("");
}

Наконец, мы подключаем метод к нужному событию:

window.onload = () => {
  document.getElementById("FS").onchange = checkFileSize;
};

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

Внешний вид элементов можно контролировать с помощью псевдоклассов CSS.

:required и :optional псевдоклассы CSS

Псевдоклассы :required и :optional псевдоклассы позволяют создавать селекторы, которые соответствуют элементам формы, имеющим атрибут required, или не имеющим его.

:placeholder-shown псевдокласс CSS

См. :placeholder-shown.

:valid :invalid псевдоклассы CSS

Псевдоклассы :valid и :invalid псевдоклассы используются для представления элементов <input>, чье содержимое проходит проверку и не проходит проверку, соответственно, в соответствии с настройками типа ввода. Эти классы позволяют пользователю стилизовать элементы формы, соответствующие или не соответствующие требованиям, чтобы упростить идентификацию элементов, отформатированных правильно или неправильно.

Следующие пункты могут помочь управлять текстом нарушения ограничения:

• Метод setCustomValidity(message) для следующих элементов:
  • <fieldset>. Примечание: Установка пользовательского сообщения об отсутствии валидности для элементов fieldset не предотвратит отправку формы в большинстве браузеров.
  • <input>
  • <output>
  • <select>
  • Кнопки отправки (созданные с помощью элемента <button> с типом submit или элемента input с типом submit. Другие типы кнопок не участвуют в проверке ограничений).
  • <textarea>
• Интерфейс ValidityState описывает объект, возвращаемый свойством validity типов элементов, перечисленных выше. Он представляет различные способы, которыми введенное значение может быть невалидным. Вместе они помогают объяснить, почему значение элемента не проходит проверку, если оно не валидно.