Формы, валидация данных в JavaScript презентация

Формы, элементы ввода
?!?

JavaScript, формы и элементы ввода
Одна из задач JS - проверка (валидация) вводимых данных перед отправкой на сервер.
В HTML элементы ввода появились для того, чтобы получать информацию от пользователя. Изначально предполагалось, что данные из формы будут отправляться на сервер и там обрабатываться. Но появился JavaScript…
Для JavaScript’а элементы ввода это текстовые поля. Получить (или установить) информацию из них можно обратившись к свойству value элемента.

Доступ к формам и элементам ввода из JavaScript

Доступ к формам и элементам ввода из JavaScript
Все известные методы обращения к элементу работают!

Доступ к формам и элементам ввода из JavaScript
Но есть и более простой метод
В объекте document есть массив forms в котором содержаться ссылки на все формы (которые есть на странице). Поля ввода доступны как свойства форм под своими именами (заданными атрибутом name).

Проверка вводимых данных (валидация)
Раньше, до HTML 5, для ввода данных использовались элементы
, а вся ответственность за корректность данных лежала на пользователе (и/или) программисте которые занимался вопросом обработки данных.

HTML5
HTML 5 принёс ряд новых типов элементов ввода, которые уже включают в себя ограничение по вводу некорректных данных. Но…

Атрибуты ограничений тега INPUT (HTML 5)
HTML 5 принёс ряд новых типов элементов ввода, которые уже включают в себя ограничение по вводу некорректных данных. Но…

Элементы ввода HTML5
HTML 5 принёс ряд новых типов элементов ввода, которые уже включают в себя ограничение по вводу некорректных данных. Но поддержка их в браузерах далека от идеала.

Проверка вводимых данных (валидация)
1. Заполнено ли поле (выбран ли вариант, для полей выбора)?
2. Соответствуют ли введённые данные шаблону?
Проверка вводимых данных сводиться к двум пунктам:

Событие формы onsubmit
У форм есть событие onsubmit обработчики которого вызываются после нажатие на кнопку отправки формы на сервер (но до того момента как форма будет отправлена).

Действие по умолчанию для формы
Для формы действие по умолчанию (после нажатия на кнопку отправки) является передача данных на сервер, её можно отменить.

Проверка вводимых данных (валидация)
Алгоритм валидации данных следующий:
1. Вешаем на событие onsubmit функцию-обработчик которая будет вызываться перед отправкой данных на сервер;
2. В этой функции проверяем все поля ввода на заполнение (и соответствие заполненных данных - ожиданиям).
3. Если поля ввода данных не заполнены, или заполнены неверно, отменяем действие по умолчанию для формы и сообщаем пользователю о его ошибке.

Немного практики
???

???
Немного практики

???
Немного практики

???
Немного практики

???
Немного практики

Атрибут pattern позволяет задать регулярное выражение, которым будет проверено поле ввода перед отправкой данных
Инструменты HTML для валидации данных

Событие элементов ввода: oninput и onchange
Помните, события элементов формы всплывают к самой форме
???

Вечный фокус
Приём позволяющий не дать пользователю не заполнить форму.
Не все события всплывают, focus одно из них!

Генерация событий средствами JavaScript
События инициатором которых обычно является пользователь (например события мыши и клавиатуры) могут быть сгенерированы JS-кодом, при помощи метода dispatchEvent();

Генерация событий средствами JavaScript
События инициатором которых обычно является пользователь (например события мыши и клавиатуры) могут быть сгенерированы JS-кодом, при помощи метода dispatchEvent();