Проверка правильности заполнения формы html

Проверка ввода данных

Рассмотрим пример проверки правильности ввода данных через HTML, с подсветкой CSS, а затем дополнительно сделаем валидацию с помощью JavaScript.

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

Пример: для программ типа калькулятора нужно вводить числа, чтобы производить с ними различные вычисления и нужна проверка (валидация) на то, что пользователь ввёл числа, а не буквы или символы.

Для ввода данных служит элемент input, у него и будем проверять валидацию.

Валидация input через HTML происходит с помощью атрибута pattern.

Примеры атрибута «pattern»

Только русские слова

type=»text»
title=»Разрешено использовать только пробелы и русские буквы»
pattern=»^[А-Яа-яЁё\s]+$»
/>

Только латинские слова

type=»text»
title=»Разрешено использовать только пробелы и латинские буквы»
pattern=»^[a-zA-Z\s]+$»>

Только русские или латинские слова с пробелами, не менее 6 символов

type=»text»
title=»Разрешено использовать только пробелы и русские или латинские буквы, не менее 6″
pattern=»^[A-Za-zА-Яа-яЁё\s]»>

Введите телефон в формате: +7 (777) 777-77-77 (Россия)

type=»tel»
title=»Используйте формат: +7 (777) 777-77-77″
pattern=»[+]7\s[\(]\d[\)]\s\d[\-]\d[\-]\d»>

Атрибут required делает заполнение поля обязательным.

Атрибуты minlength, maxlength задаёт минимальное и (или) максимальное допустимое количество символов. Например minlength=»6″.

Пример валидации на HTML

Использование CSS при валидации

/* Верный ввод */
input:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод */
input:invalid border-color: red;
color: red;
box-shadow: none;
>
/* Верный ввод при фокусе */
input:focus:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод при фокусе */
input:focus:invalid border-color: red;
color: red;
box-shadow: none;
>
/* Верный ввод при фокусе обязательного input */
input:focus:required:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод при фокусе обязательного input */
input:focus:required:invalid border-color: red;
color: red;
box-shadow: none;
>

Введите число ОТ 10 ДО 999

Введите что нибудь и щёлкните вне элемента INPUT.

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

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

Атрибуты minlength=»2″ maxlength=»3″ следят за тем, чтобы было введено от двух до трёх символов. Один символ, подсветка останется красной. Больше трёх символов ввести не удаться.

При правильном вводе, красная подсветка исчезнет, а введённые числа станут зелёными.

Пример валидации на JavaScript

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

JavaScript

function validateForm() var x = document.forms[«myForm»][«fname»].value;
if (x == «») alert(«Необходимо ввести имя»);
return false;
>
>

html

Пример

Проверка ввода чисел

JavaScript

function myFunction() var x;
var text = «Все в порядке»;

if (isNaN(x) || x 10) text = «Ввод не верен»;
>
document.getElementById(«demo»).innerHTML = text;
>

html

Пример

Необычный способ проверки валидности email.

JavaScript

function myFunction() const email = document.getElementById(«mail»);

email.addEventListener(«input», function (event) if (email.validity.typeMismatch) email.setCustomValidity(«Введите корректный email»);
> else email.setCustomValidity(«»);
>
>);

html

Пример

Остальные проверки валидации на JS

var regex = /^[a-zA-Z\s]+$/;
if(regex.test(name) === false) printError(«nameErr», «Пожалуйста, введите правильное имя»);

var regex = /^9\d$/;
if(regex.test(mobile) === false) printError(«mobileErr», «Пожалуйста, введите действительный 10-значный номер мобильного телефона»);
>

Источник

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

Данный урок описывает, как создать JavaScript форму, которая проверяет правильность заполнения посетителем полей перед отправкой данных на сервер. Сначала мы объясним, почему проверка заполнения формы является полезной методикой, а затем построим простой пример с объяснением, как все происходит.

Зачем нужна проверка заполнения формы?

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

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

Проверка формы на стороне клиента. Обычно выполняется с помощью встроенного JavaScript скрипта.

Проверка формы на стороне сервера. Обычно выполняется с помощью CGI или ASP скрипта.

В данном уроке мы построим простую форму с проверкой на стороне клиента с помощью JavaScript. Вы сможете затем адаптировать ее под свои нужды.

Простая форма с проверкой.

Давайте построим простую форму с проверкой заполнения с помощью скрипта. Данная форма имеет одно текстовое поле «Ваше имя» и кнопку для отправки данных. Наш скрипт проверяет, что пользователь ввел свое имя перед тем, как отправить данные на сервер.

Откройте форму и посмотрите в действии. Попробуйте нажать кнопку «Отправить данные» ничего не вводя в поле «Ваше имя».

Вы также можете открыть исходный код формы в другом окне, чтобы было удобно работать с уроком.

Страница содержит функцию JavaScript, которая называется validate_form(). Она выполняет проверку заполнения формы. давайте посмотрим сначала на форму.

Форма

Первая часть формы — тэг form

Форма имеет имя contact_form. С его помощью мы получим доступ к форме из JavaScript функции проверки.

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

Также тэг form содержит onsubmit атрибут для вызова JavaScript функции проверки validate_form (), когда нажимается кнопка «Отправить данные». Функция возвращает логическое значение, для которого true означает «проверка прошла успешно», а false — «данные задержаны». Таким образом мы можем предотвратить отправку данных формы, если пользователь не заполнил ее правильно.

Остальной код формы добавляет поле ввода contact_name и кнопку «Отправить данные»:

Пожалуйста введите Ваше имя.
 
Ваше имя: 

Функция validate_form()

Функция проверки формы validate_form() встроена в секцию head вначале страницы:

Далее начинается код функции validate_form(), и устанавливается значение переменной valid в true.

Мы используем переменную valid для определения правильности заполнения формы. Если хотябы одна проверка не пройдет, мы установим занчение false и форма не будет отправлена.

Следующие пять строк проверяют значение поля contact_name на заполнение.

Если поле пустое, пользователь будет предупрежден с помощью окна сообщений и значение переменной будет установлено в false.

Далее мы возвращаем значение нашей переменной обработчику события onSubmit (как было описано выше). Если значнеие установлено в true — форма отправляется на сервер, если в false — форма не отправляется.

В конце мы закрываем функцию validate_form(), коментарий HTML и скрипт.

Это очень простой пример проверки формы с помощью JavaScript. Наш код выполняет проверку только одного поля. Давайте расширим данный пример более сложной функцией, которая проверяет несколько полей. Также рассмотрим, как выполняется проверка других типов поле ввода, таких как выпадающие списки и радиокнопки.

Более сложная форма

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

Откройте форму и посмотрите в действии. Попробуйте нажать кнопку «Отправить данные» ничего не вводя в поля ввода.

Вы также можете открыть исходный код формы в другом окне, чтобы было удобно работать с уроком.

Также как и в предыдущем примере страница имеет форму под названием contact_form и функцию validate_form(). В дополнение к текстовому полю форма имеет радиокнопки, выпадающий список и чекбокс.

Функция validate_form() выполняет три дополнительных проверки, по одной для каждого нового поля.

Проверка радиокнопок.

После проверки текстового поля contact_name выполняется проверка радикнопок gender

if ( ( document.contact_form.gender[0].checked == false ) && ( document.contact_form.gender[1].checked == false ) )

Данный код проверяет была ли нажата хотябы одна радиокнопка («Мужской» или «Женский»). Если ничего не было нажато (checked == false), пользователю выдается сообщение и переменная valid устанавливается в значение false.

Проверка выпадающего списка

Затем выполняется проверка выпадающего списка «Age», выбрал ли пользователь опцию. В форме первая опция в выпадающем списке называется «Пожалуйста, выберите Ваш возраст». JavaScript функция может проверить, какая опция была выбрана, когда обрабатывается форма. Если выбрана первая опция, то мы знаем, что пользователь не выбрал настоящий возраст, и выдаем предупреждение об этом:

if ( document.contact_form.age.selectedIndex == 0 )

Помните, что значения selectedIndex начинаются с 0 (для первой опции).

Проверка чекбокса

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

if ( document.contact_form.terms.checked == false )

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

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com
Перевел: Сергей Фастунов
Урок создан: 14 Июня 2010
Просмотров: 230980
Правила перепечатки

5 последних уроков рубрики «Разное»

Как выбрать хороший хостинг для своего сайта?

Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

Источник