События

Для начала, стоит запомнить события, с которыми чаще всего придется работать:

change	изменение значения элемента
submit	отправка формы

В каких же случаях они нам помогут? Да всё просто – отслеживание change позволяет обрабатывать такие события, как изменение элементов <select>, <input type="radio"> и прочих. Это потребуется для динамического изменения формы или проверки введённого значения.

Отслеживание submit необходимо для проверки правильности заполнения всех полей формы, а также для отправки формы посредством AJAX.

Начнём с последнего, для начала возьмём форму попроще:

<form action="index.html">
    <input type="text" name="firstname" value="Ivan"/>
    <input type="text" name="lastname" value="Ivanov"/>
    <input type="submit"/>
</form>

И попробуем отправить её по адресу из атрибута «action» посредством AJAX-запроса (для отслеживания события submit можно использовать одноименный «shorthand» метод):

$("form").submit(function(){
  // для читаемости кода
  let $form = $(this);
  // вы же понимаете, о чём я тут толкую?
  // это ведь одна из ипостасей AJAX-запроса 
  $.post(
    $form.attr("action"), // ссылка куда отправляем данные
    $form.serialize()     // данные формы
  );
  // отключаем действие по умолчанию
  return false;
});

Тут затесался один незнакомый метод — serialize(), он в ответе за «сбор» данных с формы в удобном для передачи данных формате:

firstname=Ivan&lastname=Ivanov

Также есть метод serializeArray() — он представляет собранные данные в виде объекта:

[
  {
    "name": "firstname",
    "value": "Ivan"
  },
  {
    "name": "lastname",
    "value": "Ivanov"
  }
]

Хоть данная глава и про события, но всё же без методов нам дальше не обойтись — встречайте метод, который нам будет частенько нужен:

val()	получение значения первого элемента формы из выборки
val(value)	установка значения всем элементам формы из выборки

Теперь, с его помощью, мы можем добавить в предыдущий код немного проверки данных:

if ($form.find("input[name=firstname]").val() === "") {
  alert("Введите имя пользователя");
  return false;
}

Хорошо, работать с формой теперь можем, осталось прикрутить более вменяемый вывод ошибок (да-да, за alert() бьём по рукам):

if ($form.find("input[name=firstname]").val() === "") {
  $form.find("input[name=firstname]")
       .after('<div class="error">Введите имя</div>');
  return false;
}

При повторной отправке формы не забудьте убрать сообщения, оставшиеся от предыдущей проверки:

$form.find('.error').remove()

Теперь можно объединить кусочки кода и получить следующий вариант:

$('form').submit(function() {
  // для читаемости кода
  let $form = $(this);

  // чистим ошибки
  $form.find('.error').remove();

  // проверяем поле с именем пользователя
  if ($form.find('input[name=firstname]').val() === '') {
    // добавляем текст ошибки
    $form.find('input[name=firstname]')
         .after('<div class="error">Введите имя</div>');
    // прерываем дальнейшую обработку
    return false;
  }

  // всё хорошо – отправляем запрос на сервер
  $.post(
    $form.attr('action'), // ссылка куда отправляем данные
    $form.serialize()     // данные формы
  );

  // отключаем действие по умолчанию
  return false;
});

Предыдущий пример уже добавлен на страницу form.basic.html, попробуйте отправить форму; получившийся запрос и ответ вы сможете изучить в консоли браузера:

События формы, базаanton.shevchuk.name

Я хотел ещё вернуться к списку событий формы и перечислить недостающие:

событие	описание
focus	фокус на элементе, для работы с данным событием так же есть «shorthand» метод focus(); потребуется, если надо вывести подсказку к элементу формы при наведении
blur	фокус ушёл с элемента + метод blur(); пригодится при валидации формы по мере заполнения полей
select	выбор текста в «textarea» и «input[type=text]» + метод select(); если соберётесь разрабатывать свой WYSIWYG, то познакомитесь очень плотно

Примеры отслеживания всех событий формы доступны на странице events.form.html:

https://anton.shevchuk.name/book/code/events.form.htmlanton.shevchuk.name