Как сделать сайт с валидацией формы на стороне клиента

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

Использование HTML5 атрибутов

Современные браузеры поддерживают встроенные атрибуты валидации HTML5, которые можно использовать для проверки данных в форме. Вот несколько примеров:

• required — обязательное поле для заполнения
• type — определение типа данных, например, email, number, url
• pattern — регулярное выражение для проверки данных

Пример использования HTML5 атрибутов

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Пароль:</label>
  <input type="password" id="password" name="password" minlength="8" required>

  <input type="submit" value="Отправить">
</form>

Валидация форм с помощью JavaScript

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

Пример валидации формы с использованием JavaScript

<form id="myForm">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Пароль:</label>
  <input type="password" id="password" name="password" minlength="8" required>

  <input type="submit" value="Отправить">
</form>

<script>
  document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();

    var email = document.getElementById("email");
    var password = document.getElementById("password");

    if (!email.value) {
      alert("Пожалуйста, введите email");
      return;
    }

    if (password.value.length < 8) {
      alert("Пароль должен быть не менее 8 символов");
      return;
    }

    this.submit();
  });
</script>

Использование библиотек для валидации форм

Существует множество JavaScript-библиотек для валидации форм, которые предоставляют готовые решения и упрощают процесс проверки данных. Некоторые из них:

• jQuery Validation
• Parsley.js
• Validator.js

Пример использования библиотеки jQuery Validation

<form id="myForm">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">Пароль:</label>
  <input type="password" id="password" name="password" minlength="8" required>

  <input type="submit" value="Отправить">
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

<script>
  $("#myForm").validate({
    rules: {
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 8
      }
    },
    messages: {
      email: {
        required: "Пожалуйста, введите email",
        email: "Введите корректный адрес электронной почты"
      },
      password: {
        required: "Пожалуйста, введите пароль",
        minlength: "Пароль должен быть не менее 8 символов"
      }
    }
  });
</script>

Теперь, когда вы знаете основные методы валидации форм на стороне клиента, можете применить их на своих проектах и улучшить пользовательский опыт на веб-сайтах. Удачи в обучении! 😉