базовый курс

ГРУППА КУРСА

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

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

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

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

HTML код:

+
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
8
<input id="inp">

JavaScript:

10
11
12
13
14
15
16
var input=document.getElementById('inp');
input.onfocus = function (event) {
  console.log('Элемент в фокусе');
  };
input.onblur = function (event) {
  console.log('Элемент вышел из фокуса');
  };

Событие blur иногда используют для проверки значения, введённого пользователем в поле для ввода.

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

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

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

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

HTML код:

9
<input id="newinp">

JavaScript:

18
19
20
21
var newinput=document.getElementById('newinp');
newinput.oninput = function () {
  console.log('Введено значение: '+newinput.value);
  };

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

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

HTML код:

10
<input id="newvalue">

JavaScript:

12
13
14
15
var newv=document.getElementById('newvalue');
newv.onchange = function () {
  console.log('Значение изменено на: '+newv.value);
  };

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

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

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

HTML код:

8
9
10
11
12
13
<form action="use.php" method="post">
<input id="inp">
<input id="newinp">
<input id="newvalue">
<input id="submit" type="submit" value="Отправить">
</form>

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

JavaScript:

30
31
32
33
34
35
36
37
38
var form=document.querySelector('form'); 
form.onsubmit = function ()
  {
  if (input.value.length<2||newinput.value.length<2||newv.value.length<2)
    {
    alert('Слишком короткие значения');
    return false;
    }
  };

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