www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

Создание формы обратной связи

Проверка формы обратной связи "на лету"

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

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

С помощью JavaScript это сделать проще простого. Для примера, рассмотрим созданную нами форму обратной связи (см. статью Создание формы обратной связи на сайте):

Ваше имя:

Ваш e-mail и/или телефон (для ответа):

Ваше сообщение:

В строке Ваш e-mail и/или телефон (для ответа), очевидно, не должно быть букв кириллицы (временно забудем, что появились русскоязычные домены .рф), символов пробела, табуляции и абзаца. Для проверки содержимого поля используем событие onchange и встроенную функцию test( ), проверяющую введенные символы, в сочетании с переменной pattern, содержащей список недопустимых символов. Синтаксис проверки поля email в HTML-коде формы обратной связи для тега <input> следующий:
<input type="text" name="email" size="30" onchange="var pattern=/['А-я','\s']/; if(pattern.test(this.value))alert('Проверьте поле Ваш e-mail и/или телефон');">

Обратите внимание, что запрещенные символы перечисляются через запятую. Для обозначения массивов символов применяют следующие сокращения:

  • '0-9' или '\d' - все цифры,
  • 'а-я' - все строчные буквы кириллицы,
  • 'А-Я' - все прописные буквы кириллицы,
  • 'А-я' - все буквы кириллицы,
  • 'a-z' - все строчные латинские буквы,
  • 'A-Z' - все прописные латинские буквы,
  • 'A-z' - все латинские буквы,
  • 'А-я' - все буквы (первая буква - латинская А,
  • '\w' - все буквы, цифры и символ подчеркивания _,
  • '\s' - символы пробела, табуляции и абзаца.

Теперь вспомним про домены .рф и разрешим в поле e-mail вводить буквы рф. Для этого просто "вырежем" две эти буквы из списка недопустимых символов: pattern=/['А-п','с-у','х-я']

В сценарии JavaScript, как видим, конструкция с оператором if (условие) при обнаружении недопустимого символа функцией test выполняет встроенную функцию alert (текст сообщения), выводящую надпись Проверьте поле Ваш e-mail и/или телефон на экран монитора. Вы можете это проверить: введите любую русскую букву в форму обратной связи в поле e-mail на этой странице, и при переходе к следующему полю (Ваше сообщение) будет выведена надпись об ошибке ввода.

Недостаток описанной проверки "на лету" в том, что вы можете проигнорировать сообщение об ошибке, закрыв предупреждающее окно JavaScript, и спокойно продолжить ввод следующего поля. Поэтому желательно совмещать построчную проверку "на лету" с общей при нажатии кнопки Отправить сообщение. Общая проверка просканирует все введенные поля перед отправкой данных на сервер (см. статью Проверка ввода формы обратной связи ).

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

Кроме того, разберем ещё один полезный скрипт для вывода текущей даты на сайте. Так же, как и рассмотренные выше примеры, постараюсь сделать его максимально простым. Хотя, конечно, слово "сделать" не совсем корректно, так как такой скрипт сделан до меня в добром десятке вариантов. Просто обрежу всё лишнее, оставив только необходимые функции вывода даты.

25.12.2009 г.

Задать вопрос автору





Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: отправка письма с сайта, отправка e-mail с сайта, форма обратной связи, скрипт формы обратной связи