1. Валидация формы.
См. Диалоговые окна - lesson 02. Диалоговые окна. Подходы к созданию и отладке проекта. Бланк формы. Файл параметров формы. Отладка в Chrome.
Итак, у нас есть форма на экран и ее нужно заставить работать для этого нужно организовать:
валидацию ввода пользователя:
проверяющую ввод в поля формы «на лету», то есть при каждом изменении в поле;
проверяющую содержимое поля формы при потере полем фокуса, т.е. когда пользователь переходит к следующему полю;
проверить полноту заполнения полей формы и вкл/выкл кнопку "ОК";
проверяющую корректность ввода картинки, вообще-то вместо картинки можно «подсунуть» и вредоносный код;
работу капчи, для защиты от «спамеров»;
исключить повторение имени пользователя в базе данных (например, при регистрации);
отработку нажатия на кнопки управления формой: «Ок» и «Cancel»;
передачу и обработку данных введенных пользователем;
сообщение на экран по результатам ввода в форму (обратная связь);
2. Создадим блок валидации текстовых полей.
Начало блока обозначим - /* === start ВАЛИДАЦИЯ ТЕКСТОВЫХ ПОЛЕЙ ФОРМЫ === */
Конец блока обозначим - /* === end ВАЛИДАЦИЯ ТЕКСТОВЫХ ПОЛЕЙ ФОРМЫ === */
Функции управления валидацией текстовых полей:
Определили глобальную переменную «_field_check» накапливает в массиве поля по мере заполнения, поле заполнено 1, не заполнено 0;
После загрузки страницы создаем функцию управления:
Перехватываем события изменения полей форм: Изменение и потерю фокуса:
валидация img - вызывает функцию validation_img(e.target);
валидация текстовых полей при изменении - вызывает функцию validation_fields(ev);
валидация полей при потере фокуса - вызывает функцию validation_fields(ev);
проверить полноту и вкл/выкл кнопку "ОК" по клику мыши - вызывает функцию check_complit_form();
проверить полноту и вкл/выкл кнопку "ОК" по нажатию кнопки - вызывает функцию check_complit_form();
Создаем капчу – функция create_sum();
Перехватываем нажатие кнопки обновление капчи;
Функция validation_fields(ev) - валидация текстовых полей;
Функция check_complit_form() - проверить полноту и вкл/выкл кнопку "ОК";
Вспомогательные функции:
установить позицию сообщения;
отобразить сообщение при ошибке;
очистить ошибку и отобразить "Галочку" – поле валидно;
включить/выключить кнопку "Ok";
Блок функций для валидации каждого типа поля: поле «Имя», поле «Email» и тд:
Начало блока /* start блок функций валидации */
конец блока /* end блок функций валидации */
назначение понятно из названия функции.
Для тестирования можно включить все поля в объекте «fld_display_form» в файле «_user_reg_param». После вставки блока должны работать все поля кроме не текстовых: поля ввода image и поля капча;
Давайте рассмотрим картинку на ней screen отладчика Chrome:
поле «Телефон» со всплывающей ошибкой «…недопустимые символы» (знак «=»);
поле «Выбор» с ошибкой «надо выбрать» (в самом поле);
при выборе image ничего не происходит (нет блока валидации image);
капча не отображается? В консоли есть ошибки и предупреждения:
предупреждение - «create_sum is not defined» - функция не определена;
и такая же ошибка - «create_sum is not defined» - функция не определена;
Поле ввода image ошибку не выдает – откуда программе знать, что мы хотим? Можно выбрать image, но дальше ничего не происходит!
3. Создадим блок валидации image.
Начало блока обозначим - /* === start ВАЛИДАЦИЯ IMAGE === */
Конец блока обозначим -/* === end ВАЛИДАЦИЯ IMAGE === */
Если изображение валидное – отображается иконка, размер и тип файла;
Функции управления валидацией image:
Функция input_img_val(el) - валидация введенного изображения с отображением;
Вспомогательные функции:
verifyFileSize - проверка размера файла;
verifyTypeHeader - проверка типа файла;
showFile - отобразить image в иконке;
show_blank_icon - показать бланк в иконке.
Подробности см. в комментариях файла библиотеки. После вставки этого блока вставка image должна работать!
4. Создадим блок капча.
Начало блока обозначим - /* === start CAPTCHA === */
Конец блока обозначим - /* === end CAPTCHA === */
Функции управления капчей:
Функция create_sum - создать капчу;
Вспомогательные функции:
set_expression - создать случайное выражение;
create_text - создать картинку с текстом капчи;
create_fon - создать фон капчи;
randomIntegerг - енератор ЦЕЛЫХ случайных чисел в интервале min, max;
randomFloat - генератор ДРОБНЫХ случайных чисел в интервале min, max
Если капча не «читабельна ее можно обновить нажатием кнопки «Обновить».
При создании капчи я использовал только операции «+» и «х», т.к. они проще для устных вычислений. Минимальное и максимальное значения слагаемых или множителей можно выбрать в параметрах капчи в файле параметров. Кроме этого можно установить и другие параметры капчи влияющие на размер и читабельность капчи. Подробности см. в комментариях файла библиотеки и файла параметров. После ввода блока «Капча» форма работает полностью!
Теперь надо передать данные формы в сохранения в базе и для использования в программе! Это мы сделаем на следующем уроке.
Скачать проект текущего урока
