События формы

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

Элемент в фокусе

Когда элемент формы оказывается в фокусе, возникает событие focus. А когда элемент выходит из фокуса, срабатывает событие blur. Создадим поле для ввода и выведем в консоль текст при получении им фокуса и при выходе из фокуса:

HTML код:

<input id="inp">

JavaScript:

let input = document.getElementById('inp');

input.onfocus = function (event) {
  console.log('Элемент в фокусе');
  };

input.onblur = function (event) {
  console.log('Элемент вышел из фокуса');
  };

Не обязательно использовать эти события, чтобы измененить стиль элемента. Для этого в CSS существует псевдокласс focus.

Ввод значения

Событие input возникает, когда пользователь печатает текст в поле для ввода. Оно срабатывает при добавлении или удалении каждого символа, а также при копировании текста в поле для ввода. В некоторых браузерах оно работает необычно: при каждом вводе символа создаётся событие blur, после этого выполняется обработчик события input, а потом создаётся событие focus. Если обработчиков событий focus и blur нет, то в этом нет проблемы. Но если они есть, то они будут срабатывать при каждом добавлении символа.

Добавим на страницу ещё один тэг <input> и выведем его значение при вводе текста:

HTML код:

<input id="new_inp">

JavaScript:

let newInput = document.getElementById('new_inp');

newInput.oninput = function () {
  console.log('Введено значение: '+newInput.value);
  };

Изменение значения

Событие change возникает при изменении значения элемента. У полей для ввода оно срабатывает только при выходе из фокуса. У других типов оно срабатывает при клике на элементе. Добавим на страницу тэг <input> и назначим ему обработчик события change:

HTML код:

<input id="new_value">

JavaScript:

let newv = document.getElementById('new_value');

newv.onchange = function () {
  console.log('Значение изменено на: '+newv.value);
  };

Отправка формы

Событие submit срабатывает при отправке формы на сервер. Оно используется для проверки данных, которые пользователь ввёл в форму. В обработчике проверяются значения элементов формы, и если какие-то значения введены неправильно, то форма не отправляется. При этом обычно выводится сообщение, в котором указывается, что нужно исправить.

Поместим созданные тэги <input> в форму и добавим кнопку отправки формы:

HTML код:

<form action="use.php" method="post">
  <input id="inp">
  <input id="new_inp">
  <input id="new_value">
  <input id="submit" type="submit" value="Отправить">
</form>

Теперь установим форме обработчик события submit. В нём будут проверяться элементы формы. Если хотя бы в одном из полей введено менее двух символов, то форма отправлена не будет.

JavaScript:

let form = document.querySelector('form'); 
form.onsubmit = function ()
  {
  if (input.value.length < 2 || newInput.value.length < 2 || newv.value.length < 2)
    {
    alert('Слишком короткие значения');
    return false;
    }
  };

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

Если форма заполнена правильно, то браузер попытается запустить файл, указанный в атрибуте action. Возникнет ошибка, потому что такого файла нет. Но в этом нет никакого риска, поэтому не нужно опасаться проверять работу скрипта. Если в одном из полей введено менее двух символов, то появится сообщение и отправка будет отменена. Если проверок достаточно много, то можно для каждой проверки выводить своё сообщение и отменять отправку формы.