Проверка правильного заполнения полей формы перед отправкой

Необходимо заполнить параметр action, указав куда должна отправляться форма, параметр name, наименовав форму (name=”F1”), и указать, что при попытке отправки формы (событие onsubmit) будет запускаться функция проверки ”verify()”, return false отменяет отправку формы – отправка формы должна запускаться функцией verify, если все условия выполнены.

 

Далее в шапке (<head>) в тэгах <script> </script>следует создать функцию verify для проверки корректности введенных данных (см. «Проверка корректности введенных данных», стр. 9).

Рисунок 7

 

Функция на рисунке выше проверяет, заполнено ли поле с именем, содержит ли поле e-mail символ «@», не меньше ли возраст 7 и выбран ли журнал «Мурзилка». Если хотя бы одно из этих условий не выполняется, выводится сообщение об ошибки, функция завершается, а форма не отправляется.

Перейдите в режим просмотра и щелкните по кнопке “отправить”, посмотрите, как работает функция.

Необходимо дополнить функцию так, чтобы осуществлялась проверка заполненности первых 2 полей (имя, e-mail, возраст). Если хотя бы одно из этих полей не заполнено, должно выдаваться сообщение об ошибке с завершением функции. Надо дополнить проверку поля e-mail: оно должно содержать не только “@”, но и точку. Надо дополнить проверку возраста, указав его верхний предел. Далее следует проверить, выбрана ли «Вечерняя Уфа», и отменять отправку только в том случае, если не выбрано ни одно издание.

 

Перейдите в режим просмотра и щелкните по кнопке “отправить”, посмотрите, как работает функция.

 

Требования к отчету

Отчет должен включать:

· название работы,

· цель и задачи,

· фрагменты кода HTML и кода Javascript с описанием того, для чего они использованы,

· выводы.

 

Контрольные вопросы

  1. Особенности, назначение и примеры клиентских технологий программирования.
  2. События DHTML (щелчок, двойной щелчок, …)
  3. Вставка скрипта
  4. Обращение к параметру тэга
  5. Обращение к атрибуту CSS
  6. Реакция на событие
  7. Создание и использование функций. Приведите пример
  8. Способы возвращения результата
  9. Особенности синтаксиса Javascript. Основные операции, операторы
  10. Объявление и использование переменных
  11. Функции проверки и преобразования типов
  12. Объекты языка
  13. Объявление и использование массивов
  14. Объявление и использование строк, методы строк
  15. Синтаксис использования условного оператора
  16. Синтаксис использования цикла
  17. Объекты DOM (окно, документ, …) и их методы.
  18. Основные типы элементов форм
  19. Обращение к свойству элемента формы

 


[1] [] означают, что конструкция else {…} может не использоваться в условном операторе

[2] В javascript атрибуты CSS, состоящие из 2 слов, между которыми стоит «-», такие как: background-color, margin-left, font-weight, пишутся слитно, но второе слово пишется с заглавной буквы: backgroundColor, marginLeft, fontWeight


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: