Простая проверка формы

Проверка формы в браузере (валидация) сообщает пользователю об ошибке сразу, без ожидания ответа сервера. Сервер всё равно должен проверять данные сам: код в браузере легко обойти. Проверка на jQuery — это обработчик submit, который смотрит на значения полей и при ошибке отменяет отправку.

Одно правило

<form id="signup">
  <input name="name" placeholder="Имя">
  <button>Зарегистрироваться</button>
  <p class="error"></p>
</form>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#signup').on('submit', function (event) {
    event.preventDefault();
 
    const name = $(this).find('[name="name"]').val().trim();
 
    if (name === '') {
      $(this).find('.error').text('Введите имя');
      return;
    }
 
    $(this).find('.error').text('');
    console.log('Форма отправлена, имя:', name);
  });
</script>

Нажмите кнопку с пустым полем — под ним появится «Введите имя». Метод строки trim() убирает пробелы по краям, поэтому имя из одних пробелов тоже считается пустым.

Несколько полей

Для нескольких полей удобно хранить сообщение рядом с каждым полем и собирать ошибки в объект:

<style>
  .invalid { border-color: crimson; }
  .message { color: crimson; font-size: 13px; margin: 2px 0 8px; }
</style>
 
<form id="signup">
  <div><input name="name" placeholder="Имя"><p class="message"></p></div>
  <div><input name="email" placeholder="Почта"><p class="message"></p></div>
  <button>Зарегистрироваться</button>
</form>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  function validate(values) {
    const errors = {};
    if (values.name.length < 2) errors.name = 'Имя — минимум 2 символа';
    if (!values.email.includes('@')) errors.email = 'Нужна почта вида anna@example.com';
    return errors;
  }
 
  $('#signup').on('submit', function (event) {
    event.preventDefault();
 
    const $form = $(this);
    const values = {
      name: $form.find('[name="name"]').val().trim(),
      email: $form.find('[name="email"]').val().trim(),
    };
    const errors = validate(values);
 
    $form.find('input').each(function () {
      const message = errors[this.name] || '';
      $(this).toggleClass('invalid', message !== '');
      $(this).next('.message').text(message);
    });
 
    if ($.isEmptyObject(errors)) {
      console.log('Отправляем:', $form.serialize());
    }
  });
</script>

Функция validate() не знает про страницу: она получает значения и возвращает ошибки. Обработчик подсвечивает неверные поля классом invalid и пишет сообщение в соседний абзац. $.isEmptyObject() проверяет, что ошибок нет.

Убрать ошибку при исправлении

<style>
  .invalid { border-color: crimson; }
</style>
 
<input name="name" class="invalid" placeholder="Имя">
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('input').on('input', function () {
    $(this).removeClass('invalid');
  });
</script>

Начните вводить текст — красная рамка исчезнет. В форме выше этот обработчик можно назначить через делегирование: $('#signup').on('input', 'input', ...).

Встроенная проверка браузера

Атрибуты required, type="email", minlength браузер проверяет сам и не даёт отправить форму. Часто их достаточно, а jQuery нужна для своих правил и своих сообщений. Чтобы браузер не показывал стандартные подсказки, форме добавляют атрибут novalidate.

Частая ошибка

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

Спасибо, что читаете!