Обработка данных формы средствами JavaScript

Навигация: формы и элементы

• Формы в документе входят в специальную коллекцию document.forms.
• Это – так называемая «именованная» коллекция: можно использовать для получения формы как её имя, так и порядковый номер в документе.

​

​

Навигация: формы и элементы

После получения формы, любой её элемент доступен в именованной коллекции form.elements.

​

Навигация: формы и элементы

• Может быть несколько элементов с одним и тем же именем, это часто бывает с кнопками-переключателями radio.
• В этом случае form.elements[name] является коллекцией, например:

​

Обратная ссылка: element.form

• Для любого элемента форма доступна через element.form. Т.е. форма ссылается на все элементы, а эти элементы ссылаются на форму.

​

​

Обратная ссылка: element.form

Элементы формы: input и textarea

• К их значению можно получить доступ через свойство input.value (строка) или input.checked (булево значение) для чекбоксов.

​

​

Элементы формы: select и option

Элемент <select> имеет 3 важных свойства:

• select.options – коллекция из подэлементов <option>;
• select.value – значение выбранного в данный момент <option>;
• select.selectedIndex – номер выбранного <option>.

Они дают три разных способа установить значение в <select>:

• найти соответствующий элемент <option> и установить в option.selected значение true;
• установить в select.value значение нужного <option>;
• установить в select.selectedIndex номер нужного <option>.

​

Элементы формы: select и option

Элементы формы: select и option

• В отличие от большинства других элементов управления, <select> позволяет нам выбрать несколько вариантов одновременно, если у него стоит атрибут multiple. Эту возможность используют редко, но в этом случае для работы со значениями необходимо использовать первый способ, то есть ставить или удалять свойство selected у подэлементов <option>.
• Их коллекцию можно получить как select.options, например:

Элементы формы: select и option

new Option

Элемент <option> редко используется сам по себе, однако в спецификации есть синтаксис для создания элемента <option>:

​

Параметры:

• text – текст внутри <option>;
• value – значение;
• defaultSelected – если true, то ставится HTML-атрибут selected;
• selected – если true, то элемент <option> будет выбранным.

​

new Option

Тот же элемент, но выбранный

Элементы <option> имеют свойства:

• option.selected - выбрана ли опция
• option.index - номер опции среди других в списке <select>.
• option.text - содержимое опции (то, что видит посетитель).

Фокусировка: focus/blur

• Элемент получает фокус, когда пользователь кликает по нему или использует клавишу Tab. Также существует HTML-атрибут autofocus, который устанавливает фокус на элемент, когда страница загружается.
• Момент потери фокуса («blur») - это момент, когда пользователь кликает куда-то ещё или нажимает Tab, чтобы переключиться на следующее поле формы.

События focus/blur

• Событие focus вызывается в момент фокусировки, а blur – когда элемент теряет фокус.

В примере ниже:

• Обработчик blur проверяет, введён ли email, и если нет – показывает ошибку.
• Обработчик focus скрывает это сообщение об ошибке (в момент потери фокуса проверка повторится):

Пример: валидация (проверка) введённых данных

Методы focus/blur

• Методы elem.focus() и elem.blur() устанавливают/снимают фокус.

​

• Например, запретим посетителю переключаться с поля ввода, если введённое значение не прошло валидацию:

Пример

Событие: change

Событие change срабатывает по окончании изменения элемента.

Для текстовых <input> это означает, что событие происходит при потере фокуса.

Пока мы печатаем в текстовом поле в примере ниже, событие не происходит. Но когда мы перемещаем фокус в другое место, например, нажимая на кнопку, то произойдёт событие change:

​

Событие: input

• Событие input срабатывает каждый раз при изменении значения.
• В отличие от событий клавиатуры, оно работает при любых изменениях значений, даже если они не связаны с клавиатурными действиями: вставка с помощью мыши или распознавание речи при диктовке текста.

Пример

События: cut, copy, paste

• Эти события происходят при вырезании/копировании/вставке данных.
• Они относятся к классу ClipboardEvent и обеспечивают доступ к копируемым/вставляемым данным.

Пример показывает, что мы пытаемся вырезать/копировать/вставить:

Отправка формы: событие и метод submit

• При отправке формы срабатывает событие submit, оно обычно используется для проверки (валидации) формы перед её отправкой на сервер или для предотвращения отправки и обработки её с помощью JavaScript.
• Метод form.submit() позволяет инициировать отправку формы из JavaScript. Мы можем использовать его для динамического создания и отправки наших собственных форм на сервер.

Событие: submit

• Есть два основных способа отправить форму:

1 нажать кнопку <input type="submit"> или <input type="image">.

2 нажать Enter, находясь на каком-нибудь поле.

• Оба действия сгенерируют событие submit на форме. Обработчик может проверить данные, и если есть ошибки, показать их и вызвать event.preventDefault(), тогда форма не будет отправлена на сервер.

Метод: submit

• Чтобы отправить форму на сервер вручную, мы можем вызвать метод form.submit().
• При этом событие submit не генерируется. Предполагается, что если программист вызывает метод form.submit(), то он уже выполнил всю соответствующую обработку.

Пример генерации формы и отправки её вручную