Проверка правильности заполнения полей


Содержание

Методы проверки на правильность заполнения полей на PHP.

Как вы знаете, большинство скриптов, представленных в Web, ориентированы на работу с пользователем. Но для того, чтобы её начать, нужно, как правило, заполнить форму (в Интернете они встречаются повсеместно). Наивно полагать, что искушенный юзер с первого раза выдаст правильную, а главное корректную, информацию о себе. Конечно, правильность его имени и реальность земного адреса проверить мы не сможем, но вот то, как они введены, пожалуйста.

Представим, нам нужно создать программу, спрашивающую у посетителя его имя, e-mail. А также попросим придумать пароль и ввести по желанию комментарий. Если вы знакомы с HTML, то должны знать, что каждое поле в форме должно иметь имя. Итак, имена: name (Имя), mail (E-mail), password (Пароль), rpassword (Повторный пароль), comment (Комментарий). Для тех, кто ничего не понял, приведу исходный код нашей формы (кстати, его мы будем вставлять прямо в код PHP):

Сайт создан для веб-мастеров. При копировании материалов не забывайте ставить гиперссылку на этот сайт

Валидация форм

Поля в форме предназначены для сбора информации от посетителей страницы. Но несмотря на все усилия и объяснения, получение правильной информации может оказаться трудным делом. Нетерпеливые или невнимательные посетители могут пропускать важные поля, заполнять поле или несколько полей не полностью, да и попросту нажимать неправильные клавиши. Заполнив таким образом форму, они нажимают кнопку «Отправить», и серверная программа получает набор данных, с которыми она не знает что делать (если не реализована валидация данных на серверной стороне).

Серьезной веб-странице требуется проверка данных, т.е. какой-либо способ обнаружения ошибок во введенных данных, а еще лучше — способ, не допускающий ошибок вообще. На протяжении многих лет веб-разработчики делали это с помощью процедур JavaScript собственной разработки или посредством профессиональных библиотек JavaScript. И говоря по правде, эти подходы давали отличные результаты.

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

Создатели HTML5 смогли увидеть эту надобность и изобрели способ привлечь браузеры на помощь, переложив задачу проверки с плеч веб-разработчиков на веб-обозреватели. Создатели HTML5 разработали систему проверки на стороне клиента, которая позволяет вставлять основные правила валидации в любое поле . Лучшее в этой системе — это ее простота и легкость: все, что нужно сделать — так это вставить правильный атрибут.

Как работает проверка HTML5?

Основная идея в основе проверки форм HTML5 состоит в том, что разработчик указывает данные для валидации, но не реализует все необходимые для этого трудоемкие подробности. Это что-то похожее на начальника, который только отдает приказания, но реализует эти указания не сам, а с помощью подчиненных.

Например, допустим, что определенное поле нельзя оставлять пустым, и посетитель должен ввести в него хоть что-то. В HTML5 это осуществляется с помощью атрибута required в соответствующем поле (далее дорабатываем пример из предыдущей статьи):

Даже с применением для поля атрибута required на это требование нет никаких визуальных указателей по умолчанию. Поэтому следует обратить внимание пользователя на это требование с помощью каких-либо своих визуальных признаков, например, выделив рамку поля цветом и поставив возле него звездочку.

Проверка выполняется, когда пользователь нажмет кнопку для отправки формы. Если браузер поддерживает формы HTML5, он заметит пустое обязательное для заполнения поле, перехватит вызов отправки формы и отобразит всплывающее сообщение об ошибке:

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

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

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

Отключение проверки

В некоторых случаях может потребоваться отключить проверку. Например, вы хотите протестировать свой серверный код на правильность обработки поступивших некорректных данных. Чтобы отключить проверку для всей формы, в элемент добавляется атрибут novalidate:

Другой подход — это отключить проверку в кнопке для отправки формы. Такой способ иногда полезен в настоящей веб-странице. Например, вместо отправки, может быть, требуется сохранить наполовину заполненную форму для дальнейшего использования. Чтобы получить такую возможность, в элемент соответствующей кнопки вставляется атрибут formnovalidate:

Обнаружение незаполненных полей — это только один из нескольких типов проверки. Позже мы рассмотрим обнаружение ошибок в данных разных типов.

Оформление результатов проверки

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

Все, что для этого требуется — это добавить несколько простых CSS3-псевдоклассов. Доступны следующие опции:

required и optional

Применяют форматирование к полю в зависимости от того, использует ли это поле атрибут required или нет;

valid и invalid

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

in-range и out-of-range

Форматирование к полям, для которых используется атрибут min или max, чтобы ограничить их значение определенным диапазоном значений.

Проверка с помощью регулярных выражений

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

Регулярное выражение — это шаблон для сопоставления с образцом, закодированный согласно определенным синтаксическим правилам. Регулярные выражения применяются для поиска в тексте строк, которые отвечают определенному шаблону. Например, с помощью регулярного выражения можно проверить, что почтовый индекс содержит правильное число цифр, или в адресе электронной почты присутствует знак @, а его доменное расширение содержит, по крайней мере, два символа. Возьмем, например, следующее выражение:

Квадратные скобки в начале строки определяют диапазон допустимых символов. Иными словами, группа [A-Z] разрешает любые прописные буквы от А до Z. Следующая за ней часть в фигурных скобках указывает множитель, т.е. <3>означает, что нужны три прописные буквы. Следующее тире не имеет никакого специального значения и означает самое себя, т.е. указывает, что после трех прописных букв должно быть тире. Наконец, [0-9] обозначает цифры в диапазоне от 0 до 9, а <3>требует три таких цифры.

Регулярные выражения полезны для поиска в тексте строк, отвечающих условиям, заданных в выражении, и проверки, что определенная строка отвечает заданному регулярным выражением шаблону. В формах HTML5 регулярные выражения применяются для валидации.

Для обозначения начала и конца значения в поле символы ^ и $, соответственно, не требуются. HTML5 автоматически предполагает наличие этих двух символов. Это означает, что значение в поле должно полностью совпасть с регулярным выражением, чтобы его можно было считать корректным.

Таким образом следующие значения будут допустимыми для этого регулярного выражения:

Но регулярные выражения очень быстро становятся более сложными, чем рассмотренный нами пример. Поэтому создание правильного регулярного выражения может быть довольно трудоемкой задачей, что объясняет, почему большинство разработчиков предпочитает использовать для проверки данных на своих страницах готовые регулярные выражения.

Чтобы применить полученное тем или иным путем регулярное выражение для проверки значения поля или

В данном примере событие oninput активизирует функцию validateComments(). Ответственность за написание этой функции, проверку текущего значения поля и вызова метода setCustomValidity() лежит на разработчике.

Если с текущим значением поля имеются проблемы, при вызове метода setCustomValidity() ему необходимо передать сообщение об ошибке. Если же текущее значение допустимо, этот метод вызывается с пустой строкой, таким образом очищая специальные сообщения об ошибке, которые могли использоваться ранее.

Далее приводится пример использования этого метода для проверки требования, чтобы значение в поле содержало не менее 20 символов:

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

Поддержка проверки браузерами

Разработчики браузеров добавляли поддержку проверки в свои продукты по частям, вследствие чего некоторые версии браузеров поддерживают одни возможности валидации, но не обращают внимания на другие. В таблице ниже указаны минимальные версии браузеров, полностью поддерживающих валидацию HTML5:

Поддержка проверки браузерами

Браузер IE Firefox Chrome Safari Opera Safari iOS Android
Минимальная версия 10 4 10 5 10

Так как проверка HTML5 не заменяет валидацию на стороне сервера, ее можно рассматривать как второстепенную возможность, когда даже такая несовершенная поддержка лучше, чем отсутствие вообще какой-либо поддержки. В браузерах, не поддерживающих проверку, таких как IE 9, можно отправлять формы с некорректными данными, но эти ошибки можно выявить на стороне сервера и возвратить эту страницу назад браузеру, но с указанными ошибками.

С другой стороны, ваш веб-сайт может содержать сложные формы, в которых можно сделать массу ошибок при вводе данных, и вы не хотите потерять тех IE-пользователей, которые после первой неудачной попытки заполнить вашу форму не предпримут другую. В таком случае у вас есть два пути: разработать и использовать свою систему проверки или же использовать библиотеку JavaScript, чтобы компенсировать умственную отсталость IE. Какой из этих двух подходов выбрать, зависит от объема и сложности проверки.

На странице HTML5 Cross Browser Polyfills можно найти длинный список библиотек JavaScript, которые все, по большому счету, делают то же самое. Одна из лучших среди этих библиотек — это webforms2.

Библиотека webforms2 реализует все рассмотренные на данный момент атрибуты. Для использования библиотеки загрузите все ее файлы в папку своего веб-сайта (а лучше в подкаталог папки веб-сайта) и добавьте в веб-странице ссылку на эту библиотеку.

Илон Маск рекомендует:  Продолжаем изучать visual basic

Библиотека webforms2 хорошо интегрируется с другой заплаткой JavaScript, называющейся html5Widgets. Она реализует поддержку возможностей форм, которые мы рассмотрим далее, таких как ползунок и средства выбора даты и цвета. Обе эти библиотеки предоставляют хорошую общую поддержку для веб-форм, но содержат в своем коде неизбежные пробелы и незначительные ошибки. Качество сопровождения и усовершенствования этих библиотек покажет только время.

Проверка правильности заполнения полей

Обработка форм – одна из основных задач в веб-приложениях. Ниже информация о том, как в ASP.Net сделать проверку на заполнение обязательного поля. Для этого используется элемент управления RequiredFieldValidator.

Форма в примере будет содержать 2 текстовых поля и кнопку «Отправить». Кроме них, на странице под кнопкой «Отправить» разместите контрол типа Label для демонстрации одной особенности работы.

Для примера будем считать, что поле «Номер» ( >

Основные свойства контрола RequiredFieldValidator:

  • ID – идентификатор;
  • ControlToValidate – идентификатор проверяемого контрола;
  • EnableClientScript – разрешить проверку клиентскими скриптами, возможные значение true или false;
  • ErrorMessage – текст сообщения об ошибке;
  • SetFocusOnError – установить курсор на контрол при ошибке, возможные значение true или false.

Если значение свойства EnableClientScript равно True, то, если посмотреть HTML-код открывшейся в браузере страницы, будет код Javascript, который постарается провести проверку на стороне пользователя.

Убедитесь, что EnableClientScript = True, и откройте приложение в браузере, нажав Ctrl + F5. Если нажмете на кнопку «Отправить», не заполнив поле «Номер», то над полем «Номер» будет сообщение «не заполнено поле Номер» (Рис.1).

Рис.1. Не заполнено поле номер

Проверка заполнения поля была проведена только на стороне клиента. Если обновить страницу в браузере, нажав кнопку F5, то браузер не выведет окно о повторной отправке данных на сервер, а сообщение об ошибке пропадет.

Измените значение EnableClientScript на False (EnableClientScript = False) и запустите приложение. Нажмите кнопку «Отправить». Страница будет выглядеть так же, как и на рис.1. Но если сейчас обновить страницу браузера, нажав кнопку F5, то браузер выдаст предупреждение о повторной отправке данных (Рис.2). Это значит, что проверка данных и выдача сообщения об ошибке были проведены на стороне сервера.

Рис.2. Предупреждение о повторной отправке данных


Проверка правильности заполнения полей

Добрый день! Имеется форма и простейший скрипт проверки:

При нажатии кнопки Submit происходит отправка формы без проверки заполнения поля «Ваше имя» с .

Пример скрипта взят с форума. Облазила аналогичные темы, но причину по-прежнему не могу найти. Прошу помочь.

Сообщение от kefalia При нажатии кнопки Submit происходит отправка формы

непроисходит

Ок, допустим, что именно при таком раскладе не происходит (к сожалению, не могу уточнить информацию, так как редактирую действующий сайт в данный момент результаты заполнения формы отсылаются на чужой e-mail).

Тогда вопрос следующий: почему не подгружается нужная информация об ошибке в искомый div, а происходит перезагрузка страницы?

Доброй ночи
Пичаль заключается вот еще в чем:

Проверка правильности заполнения полей

Операция доступна только для документов, которые передаются от клиента в банк.

Проверка корректности заполнения реквизитов может быть выполнена как для отдельного документа из окна данного ЭД, так и сразу для ряда документов, выбранных в форме списка ЭД данного типа (массовая проверка). По результатам проверки, выполненной из окна документа, выводится детальная информация обо всех обнаруженных ошибках, по результатам массовой проверки – только об общем количестве корректных и общем количестве ошибочных документов в числе проверенных.

Для проверки корректности заполнения реквизитов отдельного документа из окна документа:

В окне документа нажмите кнопку панели инструментов окна.

Система проверит корректность заполнения полей, после чего:

При отсутствии ошибок и замечаний будет выведено сообщение о том, что документ прошел проверки.

При наличии ошибок и / или предупреждений будет выведено окно Результаты проверки (см. рис. 2.39 ), содержащее список предупреждений и сообщений о блокирующих и неблокирующих ошибках.

Кнопка Сохранить данного окна будет доступна только в том случае, если статус документа позволяет его изменение.

Примечание

Блокирующие ошибки, не позволяющие сохранить документ, будут выделены пиктограммами , ошибки, позволяющие сохранить ЭД в статусе «Ошибка контроля» (для редактирования в будущем) – пиктограммами , некритические замечания, при которых допускается дальнейшая обработка и отправка документа (предупреждения) – пиктограммами .

Чтобы вернуться к просмотру или редактированию документа для внесения необходимых исправлений (если внесение исправлений допустимо при данном статусе документа):

Нажмите кнопку Закрыть .

Произойдет возврат к окну документа.

Чтобы сохранить документ с текущими значениями реквизитов для его редактирования в будущем (если статус документа позволяет изменение документа и проверка не выявила блокирующих ошибок):

Нажмите кнопку Сохранить .

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

Для проверки корректности заполнения реквизитов одного или нескольких документов из списка документов:

В списке документов выберите один или несколько документов для проверки, как описано в инстр. «Перемещение по спискам и справочникам» , разд. «Выбор записей списка» .

Нажмите кнопку панели инструментов списка или выберите пункт контекстного меню Проверить .

Система проверит корректность заполнения реквизитов выбранных документов, после чего будет выведено сообщение, в котором указывается количество среди выбранных для проверки документов корректных ЭД и количество ЭД с ошибками. Если в числе выбранных для проверки окажутся ЭД, проверке не подлежащие (например, уже исполненные банком) – будет также указано количество ЭД из числа выбранных, которые не проверялись.

Нажмите кнопку ОК сообщения.

Произойдет возврат к списку документов в рабочей области.

Проверка заполнения всех полей формы

Есть большая форма, содержащая большое количество:

В разных ситуациях количество таких полей разное, но всегда > 100. Есть ли какой-либо простой способ проверить сразу все поля на факт заполнения используя JavaScript или jQuery не прибегая к циклам и не перебирая каждый элемент по отдельности? Вариант минимум — получить ответ: все поля заполнены/есть незаполненные поля, вариант максимум — получить ответ: все поля заполнены корректными целочисленными значениям/есть некорректные данные (не все значения целочисленные)/ не все поля заполнены.

3 ответа 3

Можно использовать встроенные средства проверки полей формы:

  • обязательное поле (required);
  • для проверки целочисленных цифровых значений (pattern). \d+ только одна или более цифра.

Посмотри как я сделал для своей формы, каждое поле проверяю. Плюсы: Могу управлять каждым полем, на каждое поле могу написать свой валидатор.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript jquery html-form или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.12.35412

Простая проверка полей формы на заполненность с помощью jQuery

Сегодня хочу поделиться с Вами простым методом проверки полей формы на заполненность перед отправкой сообщения с помощью jQuery. Скрипт написал я сам, хотя, несколько лет назад такого написать не получилось, �� а очень надо было. Не будем ходить вокруг да около, а займемся делом.

Для того, чтобы нам было что проверять, нужно составить HTML каркас формы, и чуток ее приукрасить CSS стилями, например я по-быстрому сверстал вот такой каркас:

Немножко описания того, что я написал в каркасе формы:

  • Форма обернута контейнером с классом .form_box
  • Каждой форме на странице, которую нужно проверить, присвоен класс .rf (required fields)
  • Каждому полю формы, которое обязательно к заполнению, присвоен класс .rfield
  • Кнопке «Отправить данные» присвоено два класса .btn_submit и .disabled (один для стилизации, второй для скрипта).

Ну и как всегда совсем немножко стилей для формы:

Стили достаточно примитивные, поэтому описывать их смысла нет)

Плацдарм для написания скрипта проверки полей формы готов.

Пишем jQuery скрипт:

Пришло время открыть самое интересное: механизм проверки полей формы. Все пояснения в листинге скрипта:

Протестировать работоспособность скрипта можно кликнув по кнопке Demo, также можно скачать исходники к данному уроку кликнув по кнопке Source:

Заключение

Самый приятный момент работы, написанного мною, скрипта это то, что он проверяет все указанные формы на странице, да и проще метода, не используя сторонние плагины, не найти (мне так кажется) и мне нравится, так сказать, сам механизм его работы, нет необходимости проверять каждое поле формы (как я делал когда-то). Надеюсь Вам пригодится мой скромный скрипт (хехе) в новых проектах.

Все пожелания, замечания, критику и полезные советы оставляйте в комментариях (я их читаю и стараюсь отвечать). По возможности кликайте на ссылки социальных сетей, чтобы поделиться с друзьями этой новой важной инормацией.

Javascript проверка полей формы

Примечание
Любой уважающий себя сайт обожает предлагать посетителям заполнить какую-нибудь форму, будь то подписка на новости, регистрация, или оформление заказа. А вот посетители бывают разные; заполняя предлагаемые поля, они нередко склонны давать волю фантазии, посылая порой на сервер такие данные, которые ставят обработчик в тупик. Конечно, хорошо написанный скрипт, принимающий форму, должен уметь проверять поля и заставлять пользователя перезаполнить некорректные данные. Однако куда лучше эту проверку делать непосредственно в момент заполнения формы, чтобы не перегружать сервер лишними запросами, да и время заполняющего сэкономить.
  • Решение проблемы
  • Посмотреть код
  • Подключить скрипт
  • Пример работы


Краткий ликбез

Все мы когда-нибудь заполняли формы. Кое-кто даже обрабатывал собранные ими результаты, будь то сделанные в интернет-магазине заказы, или обратка по сервису. Прося пользователя заполнить какую-либо информацию, мы хотим, чтобы она соответствовала определенному формату, особенно если в дальнешем она обрабатывается CMS вроде 1C bitrix, WorldPress, и так далее. Ведь если в графе телефон пользователь зачем-то запишет свой логин Skype, может возникнуть ошибка обработки данных: они не запишутся, и пользователя снова выбросит на страницу заполнения формы. Следовательно, возникает вопрос о том, как бы провести проверку введенных данных в режиме он-лайн и не допустить отправку некорректных данных.

Работу описываемого решения, разработанного нами, можно сразу оценить на примере процедуры оформления заказа на сайте компании «Ньюком». А ниже начнем повествование о процессе его разработки, а так же приведем еще несколько примеров.

Постановка задачи

Сделать простенькую javascript-проверку полей формы перед ее отправкой на сервер – дело пары минут. Только вот когда эту простенькую пишешь десятый раз для одного только сайта, невольно задумаешься об автоматизации этого процесса. В какой-то момент мысли об этом стали столь навязчивы, что пришлось сесть и накатать миниатюрную библиотеку, разбирающуюся с полями.

Если разбить задачу на блоки, то получится примерно следующая схема:

Ну, если схема есть, то давайте уж ее реализуем.

Анализ вариантов проверок.

Какие поля чаще всего встречаются в формах?

  • Текстовые инпуты, которые, как правило, проверяются либо просто на заполненность, либо на несложные регулярные выражения вроде email-а или телефона.
  • Чекбоксы, проверяемые на наличие отметки (вроде соглашения на обработку личных данных).
  • Можно упомянуть и выпадающие списки, проверяемые на какое-нибудь непустое значение.
  • Не стоит забывать и о коварных радиокнопках. Почему коварных? В проверке на отметку есть подводные камни.

Разумеется, поле может быть как обязательным к заполнению, так и необязательным. Возможна ситуация, когда поле необязательно, но раз уж заполняешь его – делай не абы как, а по правилу определенному.

Раз уж мы взялись писать более-менее универсальный скрипт, то нужно подумать и о извращенных необычных конструкциях, которые в дальнейшем будут называться «группы». Под этим словом будем подразумевать связанные друг с другом поля. Например, если пользователь поставил флажок «Присылать на почту новости» — становится обязательным к заполнению пункт «e-mail», или телефон нередко любят разделять на код и сам номер – тогда корректность должна проверяться по всем полям, а некорректность одного влечет за собой ошибку в обоих. Да и сообщение об ошибки надо выводить не у всех полей групы, а только у одного, иначе от их количества начнет в глазах рябить.

Какой вывод можно сделать?
Надо организовать обычную проверку на текстовое поле, проверку на email и «цифровые» поля вроде телефона, возраста, итп. Чекбоксы и радиокнопки проверяем на свойство checked, выпадающие списки – по значению. Чтобы удовлетворить хитрые группы – написать обработчик и для них. Кроме того, обеспечить возможность проверки некоторых полей какой-нибудь пользовательской функцией для особо замороченных случаев.

Организация хранения информации о проверяемых полях и типах проверки.

На мой взгляд, вариантов хранения тут всего два:

  1. Создаем javascript-объект, в котором храним необходимые для проверки поля.
  2. Засовываем информацию о проверках непосредственно в теги полей.

JS-объект будет быстрее работать, да и смотреться куда корректнее, нежели какие-то нестандартные атрибуты в тегах. Скажем, выглядеть он будет так:

Если программист добирается до сайта, когда он уже полностью сверстан ( то есть действие происходит в фантастическом романе ) – такой подход прекрасен. Но зачастую что-то обязательно будет доделываться, в том числе могут дописываться дополнительные поля или создаваться новые формы, а оставлять добавление обработчиков полей на совесть верстальщиков, даже при наличии написанного конструктора, — значит обрекать себя на постоянные обращения с их стороны в стиле «а у меня тут все поломалось». И тогда о главном постулате задумки, автоматизации (ну, точнее, избавлении себя-любимого от ненужных телодвижений), придется забыть.

Тогда можно попробовать засовывать данные о проверке в нестандартные атрибуты, превращая лаконичное в громоздкого монстра вроде Остановимся мы именно на этом варианте. Мы же за универсальность.

Затем введем следующие обрабатываемые теги:

title Он, конечно, стандартный, но сюда мы запишем сообщение об ошибочном заполнении поля. И выводить будем в стиле «Укажите »+title
cfm_check Флаг проверки, именно по нему мы и будем искать проверяемые поля. А значения он может принимать следующие:
  • Y – значит, надо проверять
  • email или num – обозначает стандартную проверку на email или цифры/телефон при заполненности
  • Y_email / Y_num – обязательная проверка на email или num
  • groupID – заключение элемента в группу с идентификатором groupID с параметрами проверки, указанными в скобках
cfm_confirminfo По умолчанию ошибки будут выводиться сразу после проверяемого элемента, что не всегда удобно. Так пусть же в этом атрибуте мы укажем jq-селектор на элемент, после которого выводить ошибку.
Например, cfm_confirminfo=’#placeForErrors’
cfm_function Чтобы не усложнять перегруженный cfm_check, сюда мы запишем название нестандартной функции-проверки поля

Скрипт проверки заполненности полей.

Информацию мы получили, осталось лишь ее обработать. Алгоритм здесь не замороченный:

  • на вход подаем указатель на форму, в которой делать проверку (у нас же много форм может быть на странице!);
  • пробегаем по указанным элементам формы, проверяя корректность заполнения;
  • если ошибки есть – маркеруем их, если нет – разрешаем проверку формы.

Наверное, уже пора выдать js-код, реализующий функционал хотя бы частично, раз уж отписана такая куча текста?

В качестве примера приведем так же особую функцию проверки, например, проверяющую на наличие двух слов в инпуте (Имя Фамилия или Имя,Фамилия). Инпут, запускающий проверку по этой функции реализуется таким образом: А функция проверки будет выглядеть, например, так: Ну и стиль надо бы какой-нибудь нашей проверке задать:

Скрипт валидации формы.

Теперь в случае успешного выполнения функции cFM_checkFullness() (то есть возвращения true) скрипт должен отсылать форму на обработку. Как это реализовать — зависит уже от конкретной формы. Если подтверждение на отправку идет через кнопку submit — то можно подписаться на событие отправки формы (onsubmit) и в зависимости от результата проверки отсылать ее или нет. Например, так: Если же отправка идет с помощью ajax’а — то тут вообще все просто: вызывать его в зависимости от результата работы функции cFM_checktrueAttr($(this));

Дополнительные заморочки.

В приведенном выше коде отсутствует проверка на группы (ибо громоздкость кода возрастает в разы, а размер полосы прокрутки данной статьи итак наверняка отпугнул многих посетителей). Различия же в алгоритме будут незначительны: проверка элементов по группам должна запускаться в отдельном блоке, и в зависимости от работы всего блока выдавать сообщение об ошибке в конкретном элементе.
Правда, на этом моменте стоит притормозить и задуматься: а действительно ли необходимо дорабатывать код для поддержки групп, или можно ограничиться написанием отдельной функции проверки для пары сложных полей?

Что же мы имеем в итоге? Подключая пару файлов (.js и .css), получаем функционал проверки свойств, который можно со спокойной душой кидать на любые сайты, при условии подключенного jquery. Ведь куда приятнее иметь под рукой набор готовых инструментов, чем тратить кучу времени на их производство перед каждой однотипной задачей.

Подключение и примеры

Во-первых нам понадобится библиотека jquery. Скачать ее можно, например, с официального сайта.
Или же просто вставить в шапку (то, что внутри тега ) вашего сайта строку Затем качаем (правой клавишей -> понравившийся пункт со словом «сохранить») отсюда файл с js-кодом и, если нужно, файл с css-стилями для ошибочных полей отсюда.
Добавляем в шапку и их тоже: Теперь нужно расставить атрибуты полям формы согласно таблице, в зависимости от того, какую проверку вы хотите совершить.
Последний штрих — добавление тегу Посмотреть код

Оценить применение скрипта можно так же на сайте mosavtotrade, на всех формах стоит именно эта проверка.

На сим поток информации иссяк.
В качестве домашней работы можете взять следующие пункты:

  1. Модернизация скрипта для работы с групповыми свойствами (и более адекватная обработка радиокнопок с его помощью)
  2. Модернизация скрипта для задания полей через объект

HTML5 и его атрибуты для проверки формы

2015-05-22 / Вр:13:29 / просмотров: 18565

В этой статье я хочу рассказать, как можно проверить форму без использования php или javascript. На HTML5 есть возможность указывать, какое поле должно быть обязательным для заполнения, проверить правильность ввода в поле e-mail адрес, телефон, имя и т. д.

Если вы создаете сайты и вам нужно сделать форму обратной связи, то эта статья будет находка:

Итак, если вы не знаете языков программирования php или javascript, чтобы осуществить проверку формы, не беда – HTML5 справится с этим отлично.

К примеру, у нас есть стандартная html форма:

Если не заполнить ни одного поля, а нажать кнопку «Отправить!» , форма без проблем отправится на указанную почту в прописанном обработчике.
Как же сделать проверку формы на заполнение полей ?

1. Указать поле обязательным для заполнения с помощью атрибута «required» .

Достаточно прописать атрибут «required» в том поле, которое вы считаете обязательным для заполнения. Для примера, давайте пропишем «required» к полю «email» :

Как видите, поле «email» стало обязательным для заполнения и форма не отправится до тех пор, пока не внесете туда значение.

2. Укажите атрибут «placeholder» , чтобы пользователь видел, что необходимо вводить в поле. Например, так:

Заполните и для остальных полей:

3. Чтобы предотвратить неправильное заполнение поля формы, нужно в атрибуте «type» заменить значение «text» на «email» . Например, было так:

В результате, если пользователь, когда будет писать email адрес, не поставит « @ », ему сразу же выскочит ошибка с подсказкой, что в адресе электронной почты должен присутствовать символ « @ ».

Такой фокус можно проделать с полем для сайта, если такое имеется:

формат ввода должен быть таким:

4. Проверить, правильно ли заполнены поля с помощью атрибута «pattern» .
Чтобы проверить значение элемента на основе регулярного выражения, используют атрибут «pattern» .

Например, если нужно, чтобы имя в поле всегда писалось на русском языке или чтобы номер телефона был написан по определенному шаблону « +38(093) — 000 — 00 — 00 » и т .д., то атрибут «pattern» отлично справится с этой задачей.

Итак, нужно чтобы пользователь ввел имя русскими буквами. Для этого пропишите в атрибуте «pattern» вот такое выражение:

Объяснение: в квадратных скобках [ ] пишите, какие буквы должны вводиться в поле для имени. В моем примере можно вводить только русские буквы в любом регистре. Если нужно только латинскими, сделайте вот так:

Выражение
Описание
[A-Z] Только заглавная латинская буква.
[A-Za-z] Только латинская буква в любом регистре.
[А-Яа-яЁё] Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё] Любая буква русского и латинского алфавита.

Цифра, что находится в фигурных скобках < >означает число вводимых символов. В моем примере не менее 4-х символов :

Выражение
Описание
[A-Za-z] Не менее шести латинских букв.
[A-Za-z] Шесть латинских букв.
[А-Яа-яЁё] Не менее шести букв русского и латинского алфавита.
[A-Za-zА-Яа-яЁё] Шесть букв русского и латинского алфавита.

Если нужно проверить правильность заполнения email почты, пропишите в атрибуте «pattern» вот такое выражение:

Объяснение: каждый проверяемый участок берется в круглые скобки ( ) .

Итак, первый проверяемый участок до символа « @ ». В квадратных скобках [] я прописал, какие буквы должны вводиться в поле. В моем примере это латинские буквы, цифры, нижнее подчеркивание, дефис и точка. В фигурных скобках < >я прописал, что символов должно быть не менее одного. То есть, такой номер не пройдет « @ rambler.ru ».

Далее я закрываю проверяемый участок круглой скобкой и прописываю знак « @ ».

Проверяем второй участок после символа « @ ». Открываем круглые скобки и в квадратных скобках прописываем снова, какие буквы должны вводиться в поле. В моем примере это латинские буквы, цифры, нижнее подчеркивание, дефис и точка. В фигурных скобках « < >» я прописал, что символов должно быть не менее одного. Далее я закрываю проверяемый участок круглой скобкой и прописываю знак « . ».


Проверяем третий участок после знака « . ». Открываем круглые скобки и в квадратных скобках прописываем снова, какие буквы должны вводиться в поле. В моем примере это только латинские буквы. В фигурных скобках « < >» я прописал, что символов должно быть от 2 до 8 . Я так решил, потому что доменных зон меньше 2 и больше 8 символов я не видел (ru, info, ua, biz, com).

На этом проверка правильного заполнения поля email адреса закончилась.

Или скажу так: вот шаблон адреса электронной почты, по которому нужно создать проверочный:

Итак, в итоге поле «email» будет выглядеть вот так:

Если нужно проверить на правильность заполнение поля телефона , пропишите в атрибуте «pattern» вот такое выражение:

Для образца телефона:

Для образца телефона:

Я думаю, здесь объяснять ничего не нужно, так как все аналогично верхнему примеру .

Итак, в итоге поле «tel» будет выглядеть вот так:

В итоге вот такой получился код формы:

Это еще не все, можно сделать подсказку пользователю, как правильно нужно заполнить поле, если он что-то ввел не так, как вам нужно.
5. Подсказка в случае, если поле было заполнено не правильно.
Если пользователь в поле ввел имя на латыни, например, «Stepa», а вам нужно на русском «Степа», можно написать всплывающую подсказку для пользователя и показать пример, как нужно заполнить.

Вот так это будет выглядеть в коде:

Вот так это будет выглядеть в коде:

В итоге получилась вот такая форма с проверкой на правильное заполнение на HTML5 без использования php или javascript:

Таблица регулярного выражения

Выражение
Описание
\d [0-9] Одна цифра от 0 до 9.
\D [^0-9] Любой символ кроме цифры.
\s Пробел.
[A-Z] Только заглавная латинская буква.
[A-Za-z] Только латинская буква в любом регистре.
[А-Яа-яЁё] Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё] Любая буква русского и латинского алфавита.
[0-9] Три цифры.
[A-Za-z] Не менее шести латинских букв.
[0-9] Не более трёх цифр.
[0-9] От пяти до десяти цифр.
^[a-zA-Z]+$ Любое слово на латинице.
^[А-Яа-яЁё\s]+$ Любое слово на русском включая пробелы.
^[ 0-9]+$ Любое число.
[0-9] Почтовый индекс.
\d+(,\d<2>)? Число в формате 1,34 (разделитель запятая).
\d+(\.\d<2>)? Число в формате 2.10 (разделитель точка).
\d<1,3>\.\d<1,3>\.\d<1,3>\.\d IP-адрес

Тему я еще не закрыл, ждите продолжения! Чтобы не пропустить новых статей, подписывайтесь на обновления блога.

Валидация форм

Поля в форме предназначены для сбора информации от посетителей страницы. Но несмотря на все усилия и объяснения, получение правильной информации может оказаться трудным делом. Нетерпеливые или невнимательные посетители могут пропускать важные поля, заполнять поле или несколько полей не полностью, да и попросту нажимать неправильные клавиши. Заполнив таким образом форму, они нажимают кнопку «Отправить», и серверная программа получает набор данных, с которыми она не знает что делать (если не реализована валидация данных на серверной стороне).

Серьезной веб-странице требуется проверка данных, т.е. какой-либо способ обнаружения ошибок во введенных данных, а еще лучше — способ, не допускающий ошибок вообще. На протяжении многих лет веб-разработчики делали это с помощью процедур JavaScript собственной разработки или посредством профессиональных библиотек JavaScript. И говоря по правде, эти подходы давали отличные результаты.

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

Создатели HTML5 смогли увидеть эту надобность и изобрели способ привлечь браузеры на помощь, переложив задачу проверки с плеч веб-разработчиков на веб-обозреватели. Создатели HTML5 разработали систему проверки на стороне клиента, которая позволяет вставлять основные правила валидации в любое поле . Лучшее в этой системе — это ее простота и легкость: все, что нужно сделать — так это вставить правильный атрибут.

Как работает проверка HTML5?

Основная идея в основе проверки форм HTML5 состоит в том, что разработчик указывает данные для валидации, но не реализует все необходимые для этого трудоемкие подробности. Это что-то похожее на начальника, который только отдает приказания, но реализует эти указания не сам, а с помощью подчиненных.

Например, допустим, что определенное поле нельзя оставлять пустым, и посетитель должен ввести в него хоть что-то. В HTML5 это осуществляется с помощью атрибута required в соответствующем поле (далее дорабатываем пример из предыдущей статьи):

Даже с применением для поля атрибута required на это требование нет никаких визуальных указателей по умолчанию. Поэтому следует обратить внимание пользователя на это требование с помощью каких-либо своих визуальных признаков, например, выделив рамку поля цветом и поставив возле него звездочку.

Проверка выполняется, когда пользователь нажмет кнопку для отправки формы. Если браузер поддерживает формы HTML5, он заметит пустое обязательное для заполнения поле, перехватит вызов отправки формы и отобразит всплывающее сообщение об ошибке:

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

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

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

Отключение проверки

В некоторых случаях может потребоваться отключить проверку. Например, вы хотите протестировать свой серверный код на правильность обработки поступивших некорректных данных. Чтобы отключить проверку для всей формы, в элемент добавляется атрибут novalidate:

Другой подход — это отключить проверку в кнопке для отправки формы. Такой способ иногда полезен в настоящей веб-странице. Например, вместо отправки, может быть, требуется сохранить наполовину заполненную форму для дальнейшего использования. Чтобы получить такую возможность, в элемент соответствующей кнопки вставляется атрибут formnovalidate:

Обнаружение незаполненных полей — это только один из нескольких типов проверки. Позже мы рассмотрим обнаружение ошибок в данных разных типов.

Оформление результатов проверки

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

Все, что для этого требуется — это добавить несколько простых CSS3-псевдоклассов. Доступны следующие опции:

required и optional

Применяют форматирование к полю в зависимости от того, использует ли это поле атрибут required или нет;

valid и invalid

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

in-range и out-of-range

Форматирование к полям, для которых используется атрибут min или max, чтобы ограничить их значение определенным диапазоном значений.

Проверка с помощью регулярных выражений

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

Регулярное выражение — это шаблон для сопоставления с образцом, закодированный согласно определенным синтаксическим правилам. Регулярные выражения применяются для поиска в тексте строк, которые отвечают определенному шаблону. Например, с помощью регулярного выражения можно проверить, что почтовый индекс содержит правильное число цифр, или в адресе электронной почты присутствует знак @, а его доменное расширение содержит, по крайней мере, два символа. Возьмем, например, следующее выражение:

Квадратные скобки в начале строки определяют диапазон допустимых символов. Иными словами, группа [A-Z] разрешает любые прописные буквы от А до Z. Следующая за ней часть в фигурных скобках указывает множитель, т.е. <3>означает, что нужны три прописные буквы. Следующее тире не имеет никакого специального значения и означает самое себя, т.е. указывает, что после трех прописных букв должно быть тире. Наконец, [0-9] обозначает цифры в диапазоне от 0 до 9, а <3>требует три таких цифры.

Регулярные выражения полезны для поиска в тексте строк, отвечающих условиям, заданных в выражении, и проверки, что определенная строка отвечает заданному регулярным выражением шаблону. В формах HTML5 регулярные выражения применяются для валидации.

Для обозначения начала и конца значения в поле символы ^ и $, соответственно, не требуются. HTML5 автоматически предполагает наличие этих двух символов. Это означает, что значение в поле должно полностью совпасть с регулярным выражением, чтобы его можно было считать корректным.

Таким образом следующие значения будут допустимыми для этого регулярного выражения:

Но регулярные выражения очень быстро становятся более сложными, чем рассмотренный нами пример. Поэтому создание правильного регулярного выражения может быть довольно трудоемкой задачей, что объясняет, почему большинство разработчиков предпочитает использовать для проверки данных на своих страницах готовые регулярные выражения.

Чтобы применить полученное тем или иным путем регулярное выражение для проверки значения поля или

В данном примере событие oninput активизирует функцию validateComments(). Ответственность за написание этой функции, проверку текущего значения поля и вызова метода setCustomValidity() лежит на разработчике.

Если с текущим значением поля имеются проблемы, при вызове метода setCustomValidity() ему необходимо передать сообщение об ошибке. Если же текущее значение допустимо, этот метод вызывается с пустой строкой, таким образом очищая специальные сообщения об ошибке, которые могли использоваться ранее.

Далее приводится пример использования этого метода для проверки требования, чтобы значение в поле содержало не менее 20 символов:

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

Поддержка проверки браузерами

Разработчики браузеров добавляли поддержку проверки в свои продукты по частям, вследствие чего некоторые версии браузеров поддерживают одни возможности валидации, но не обращают внимания на другие. В таблице ниже указаны минимальные версии браузеров, полностью поддерживающих валидацию HTML5:

Поддержка проверки браузерами

Браузер IE Firefox Chrome Safari Opera Safari iOS Android
Минимальная версия 10 4 10 5 10

Так как проверка HTML5 не заменяет валидацию на стороне сервера, ее можно рассматривать как второстепенную возможность, когда даже такая несовершенная поддержка лучше, чем отсутствие вообще какой-либо поддержки. В браузерах, не поддерживающих проверку, таких как IE 9, можно отправлять формы с некорректными данными, но эти ошибки можно выявить на стороне сервера и возвратить эту страницу назад браузеру, но с указанными ошибками.

С другой стороны, ваш веб-сайт может содержать сложные формы, в которых можно сделать массу ошибок при вводе данных, и вы не хотите потерять тех IE-пользователей, которые после первой неудачной попытки заполнить вашу форму не предпримут другую. В таком случае у вас есть два пути: разработать и использовать свою систему проверки или же использовать библиотеку JavaScript, чтобы компенсировать умственную отсталость IE. Какой из этих двух подходов выбрать, зависит от объема и сложности проверки.

На странице HTML5 Cross Browser Polyfills можно найти длинный список библиотек JavaScript, которые все, по большому счету, делают то же самое. Одна из лучших среди этих библиотек — это webforms2.

Библиотека webforms2 реализует все рассмотренные на данный момент атрибуты. Для использования библиотеки загрузите все ее файлы в папку своего веб-сайта (а лучше в подкаталог папки веб-сайта) и добавьте в веб-странице ссылку на эту библиотеку.

Библиотека webforms2 хорошо интегрируется с другой заплаткой JavaScript, называющейся html5Widgets. Она реализует поддержку возможностей форм, которые мы рассмотрим далее, таких как ползунок и средства выбора даты и цвета. Обе эти библиотеки предоставляют хорошую общую поддержку для веб-форм, но содержат в своем коде неизбежные пробелы и незначительные ошибки. Качество сопровождения и усовершенствования этих библиотек покажет только время.

Илон Маск рекомендует:  Что такое код setwindoworg
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL