Проверка формы JavaScript

Формы широко используются в веб-приложениях. Некоторые приложения используют формы для сбора данных для регистрации пользователей и предоставления адреса электронной почты. Другие используют их для совершения онлайн-транзакций, чтобы облегчить процесс покупок.

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

Нам нужна проверка формы каждый раз, когда мы принимаем вводимые пользователем данные. Мы должны убедиться, что введенные данные имеют правильный формат, находятся в допустимом диапазоне данных (например, для полей даты) и не содержат вредоносного кода, который может привести к SQL-инъекциям. Неправильные или отсутствующие данные также могут вызывать ошибки API.

Какие существуют типы проверки формы?

Проверка формы может происходить как на стороне клиента, так и на стороне сервера.

Проверка на стороне клиента происходит с использованием атрибутов HTML5 и клиентского JavaScript.

Возможно, вы заметили, что в некоторых формах, как только вы вводите неверный адрес электронной почты, форма выдает ошибку «Пожалуйста, введите действительный адрес электронной почты». Этот немедленный тип проверки обычно выполняется с помощью клиентского JavaScript.

В других случаях вы могли заметить, что при заполнении формы и вводе данных, таких как кредитная карта, может отображаться экран загрузки, а затем отображаться ошибка «Эта кредитная карта недействительна».

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

Какие данные следует проверить?

Проверка формы необходима каждый раз, когда вы принимаете данные от пользователя. Это может включать:

  1. Проверка формата таких полей, как адрес электронной почты, номер телефона, почтовый индекс, имя, пароль;
  2. проверка обязательных полей;
  3. проверка типа данных, таких как строка и число, для таких полей, как номер социального страхования;
  4. убедитесь, что введенное значение является допустимым, например страна, дата и т. Д.

Как настроить проверку на стороне клиента?

На стороне клиента проверка может выполняться двумя способами:

  1. Использование функциональности HTML5;
  2. использование JavaScript.

Как настроить проверку с функциональностью HTML5?

HTML5 предоставляет набор атрибутов для проверки данных. Вот несколько распространенных случаев проверки:

  • Создание обязательных полей с помощью required
  • Ограничение длины данных:
    • minlength, maxlength: для текстовых данных
    • minи maxдля максимального значения типа num
  • Ограничение типа данных с помощью type:
    • <input type="email" name="multiple>
  • Определение шаблонов данных с помощью pattern:
    • определяет шаблон регулярного выражения, которому должны соответствовать введенные данные формы

Когда входное значение соответствует указанной выше проверке HTML5, ему назначается псевдо-класс :valid, а :invalid если нет.

Давайте попробуем пример:

<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" id="firstname" required maxlength="45">
<label for="lastname"> Last Name: </label>
<input type="text" name="lastname" id="lastname" required maxlength="45">
<button>Submit</button>
</form>

Ссылка на JSFiddle

Здесь у нас есть два обязательных поля - Имя и Фамилия. Попробуйте этот пример в JSFidle. Если вы пропустите одно из этих полей и нажмете «Отправить», вы получите сообщение «Пожалуйста, заполните это поле». Это проверка с использованием встроенного HTML5.

Как настроить проверку с помощью JavaScript?

При реализации проверки формы необходимо учитывать несколько вещей:

  1. Что считается "достоверными" данными? Это поможет вам ответить на вопросы о формате, длине, обязательных полях и типе данных.
  2. Что происходит при вводе неверных данных? Это поможет вам определить пользовательский опыт проверки - показывать ли сообщение об ошибке в строке или вверху формы, насколько подробным должно быть сообщение об ошибке, если форма все равно будет отправлена, если будет аналитика для отслеживания недопустимого формата данных? И так далее.

Вы можете выполнить проверку JavaScript двумя способами:

  1. Встроенная проверка с использованием JavaScript;
  2. HTML5 API проверки ограничений.

Встроенная проверка с использованием JavaScript

<form id="form">
  <label for="firstname"> First Name* </label>
  <input type="text" name="firstname" id="firstname" />
  <button id="submit">Submit</button>

  <span role="alert" id="nameError" aria-hidden="true">
    Please enter First Name
  </span>
</form>
const submit = document.getElementById("submit");

submit.addEventListener("click", validate);

function validate(e) {
  e.preventDefault();

  const firstNameField = document.getElementById("firstname");
  let valid = true;

  if (!firstNameField.value) {
    const nameError = document.getElementById("nameError");
    nameError.classList.add("visible");
    firstNameField.classList.add("invalid");
    nameError.setAttribute("aria-hidden", false);
    nameError.setAttribute("aria-invalid", true);
  }
  return valid;
}
#nameError {
  display: none;
  font-size: 0.8em;
}

#nameError.visible {
  display: block;
}

input.invalid {
  border-color: red;
}

Ссылка на JSFiddle

В этом примере мы проверяем наличие обязательных полей с помощью JavaScript.

Если обязательное поле отсутствует, мы используем CSS, чтобы показать сообщение об ошибке.

Метки Aria изменяются соответствующим образом, чтобы сигнализировать об ошибке. Используя CSS для отображения / скрытия ошибки, мы сокращаем количество необходимых нам манипуляций с DOM. Сообщение об ошибке предоставляется в контексте, что делает работу пользователя интуитивно понятной.

HTML5 API проверки ограничений

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

Некоторые методы, предоставляемые этим API:

  1. checkValidity
  2. setCustomValidity
  3. reportValidity

Полезны следующие свойства:

  1. validity
  2. validationMessage
  3. willValidate

В этом примере мы будем проверять, используя встроенные методы HTML5, такие как required и length в сочетании с API проверки ограничений, чтобы предоставить подробные сообщения об ошибках.

<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" required id="firstname">
<button>Submit</button>
</form>
const nameField = document.querySelector("input");

nameField.addEventListener("input", () => {
  nameField.setCustomValidity("");
  nameField.checkValidity();
  console.log(nameField.checkValidity());
});

nameField.addEventListener("invalid", () => {
  nameField.setCustomValidity("Please fill in your First Name.");
});

Ссылка на JSFiddle

Не забывайте проверку на стороне сервера

Проверка на стороне клиента - не единственная проверка, которую вам следует сделать. Вы также должны проверить данные, полученные от вашего клиента, в коде на стороне сервера, чтобы убедиться, что данные соответствуют вашим ожиданиям.

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

Лучшие практики проверки форм

  1. Всегда проводите проверку на стороне сервера, поскольку злоумышленники могут обойти проверку на стороне клиента.
  2. Предоставьте подробные сообщения об ошибках в контексте поля, в котором возникла ошибка.
  3. Приведите пример того, как должны выглядеть данные в случае сообщения об ошибке, например - «Электронная почта не соответствует формату - test@example.com »
  4. Избегайте использования страниц с одиночными ошибками, которые включают перенаправление. Это плохой пользовательский опыт и заставляет пользователя вернуться на предыдущую страницу, чтобы исправить форму и потерять контекст.
  5. Всегда отмечайте обязательные поля.

Если урок оказался для вас полезным, поделитесь пожалуйста ;) 👇🏻

Читайте также

Комментарии ()

    Написать комментарий