Интерактивная валидация HTML форм

Содержание материала:

Валидация форм через HTML

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

Синтаксис использования атрибута таков:

Регулярные выражения для распространенных видов данных

Выражение Значение
[A-Za-zА-Яа-яЁё] любая буква
^[a-zA-Z]+$ только латиница
^[a-zA-Z0-9]+$ только цыфры и латинские буквы
^[а-яА-ЯёЁa-zA-Z0-9]+$ цифры+латиница+кириллица
^[ 0-9]+$ только цифры
^\(\d<3>\)\d<3>-\d<2>-\d<2>$ телефон в формате (ХХХ)XXX-XX-XX
/^([a-z0-9_\.-]+)@([a-z0-9_\.-]+)\.([a-z\.]<2,6>)$ email
[0-9]<4>-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01]) дата в формате YYYY-MM-DD
(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d дата в формате DD/MM/YYYY
^([0-1]\d|2[0-3])(:[0-5]\d)<2>$ время в формате HH:MM:SS
\-?\d+(\.\d<0,>)? целые числа и числа с плавающей точкой с разделителем точкой
^[a-zA-Z][a-zA-Z0-9-_\.]<1,20>$ имя пользователя (с ограничением 2-20 символов, которыми могут быть буквами и цифрами, первый символ обязательно буква)
^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(. *\s).*$ пароль (Строчные и прописные латинские буквы, цифры)
(?=^.<8,>$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$ пароль (Строчные и прописные латинские буквы, цифры, спецсимволы. Минимум 8 символов)

Ограничение количества вводимых символов

Атрибут maxlength устанавливает ограничение на максимальное количество символов, которые можно ввести в поле:

JavaScript валидация форм

При помощи JavaScript можно проводить валидацию (проверку данных) форм HTML.

Например, в следующем примере если поле формы (fname) пусто, то функция выводит сообщение с предупреждением и возвращает значение false, чтобы предотвратить отправку данных формы:

Функцию можно вызывать при возникновении события отправки данных формы:

JavaScript может проверять ввод чисел

Часто JavaScript используется для проверки введенных чисел. Попробуйте сами:

Введите число от 1 до 10

Автоматическая проверка HTML форм

Проверка HTML форм также может проводиться браузером автоматически.

В следующем примере, если поле формы (fname) пусто, атрибут required запрещает отправку данных формы:

Внимание! Автоматическая проверка HTML форм не работает в Internet Explorer 9 и более ранних его версиях.

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

Проверка данных проводится для того, чтобы гарантировать, что пользователь ввел корректные, полезные данные без ошибок.

Типичная проверка состоит в поиске ответов на следующие вопросы:

  • Заполнил ли пользователь все необходимые поля?
  • Корректны ли введенные данные?
  • Не ввел ли пользователь текст в поля для цифр?

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

Проверка может осуществляться разными способами и реализовываться разными путями.

Проверка на стороне сервера осуществляется веб-сервером после получения им введенных данных.

Проверка на стороне клиента осуществляется браузером до отсылки введенных данных на сервер.

Ограничивающая проверка HTML

В HTML5 была добавлена новая концепция HTML проверки, название которой можно было бы перевести как «ограничивающая проверка» (англ. Constraint Validation).

Ограничивающая проверка HTML основывается на:

  • HTML атрибутах элемента ввода,
  • CSS псевдоселекторах,
  • свойствах и методах DOM

Атрибуты ограничивающей проверки элемента ввода

Атрибут Описание
disabled Определяет, что элемент ввода отключен
max Определяет максимальное значение в элементе ввода
min Определяет минимальное значение в элементе ввода
pattern Определяет шаблон значений в элементе ввода
required Определяет, что элемент ввода обязателен для заполнения
type Определяет тип элемента ввода

Полный список атрибутов см. в справке по HTML тегу .

CSS псевдоселекторы ограничивающей проверки

Селектор Описание
:disabled Выбирает элемент ввода с атрибутом «disabled»
:invalid Выбирает элемент ввода с некорректным значением
:optional Выбирает элемент ввода без атрибута «required»
:required Выбирает элемент ввода с атрибутом «required»
:valid Выбирает элемент ввода с корректным значением

О том, что такое псевдоклассы см. раздел CSS псевдоклассы.

Методы DOM ограничивающей проверки

Метод Описание
checkValidity() Возвращает true, если элемент ввода содержит корректные данные
setCustomValidity() Устанавливает свойство validationMessage для элемента ввода

Пример
Если поле ввода содержит некорректные данные, вывести сообщение:

Свойства DOM ограничивающей проверки

Свойство Описание
validity Содержит набор свойств типа boolean, определяющих состояние валидности (правильности) элемента ввода
validationMessage Содержит сообщение, которое выведет браузер в случае неудачной проверки
willValidate Указывает, будет ли элемент ввода проверяться

Свойства валидности

Свойство validity элемента ввода содержит некий набор свойств, определяющих состояние валидности данных:

Свойство Описание
customError Установлено в true, если задано пользовательское сообщение о валидности.
patternMismatch Установлено в true, если значение элемента не соответствует шаблону в атрибуте pattern.
rangeOverflow Установлено в true, если значение элемента больше значения в атрибуте max.
rangeUnderflow Установлено в true, если значение элемента меньше значения в атрибуте min.
stepMismatch Установлено в true, если значение элемента неверно по атрибуту step.
tooLong Установлено в true, если значение элемента превышает значение атрибута maxLength.
typeMismatch Установлено в true, если значение элемента неверно по атрибуту type.
valueMissing Установлено в true, если у элемента (с атрибутом required) нет значения.
valid Установлено в true, если значение элемента валидно.

Пример №1. Свойство rangeOverflow.

Если число в поле ввода больше 100 (атрибут max элемента ), то вывести сообщение:

Пример №2. Свойство rangeUnderflow.

Если число в поле ввода меньше 100 (атрибут min элемента ), то вывести сообщение:

Валидация форм в html5.

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

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

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

Но для начала создадим простую форму содержащую в себе несколько полей: Имя, Телефон, E-mail и кнопку отправить.

Вот она самая простая и не красивая форма, поля которой подразумевают что поле имя — будет введен текст, в поле телефон — телефон(т.е. только цифры) и поле e-mail в которое можно ввести как буквы так и цифры, но с одним условием, там должен присутствовать символ @. Теперь посмотрим как html5 позволит нам справиться с задачей и провалидировать данную форму.

Атрибут required.

Данный атрибут у тега input устанавливает обязательное заполнение поля.

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

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

Атрибут type.

Данный атрибут добавляет стандартные способы валидации для полей. Для поля почты изменим значение на type=»email» а для телефона type=»tel»

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

Теперь если в поле введены не верные значения, например в поле email введен просто текст без собаки, то при попытке отправки появляется предупреждающее окно и форма не отправляется. Хорошо, но все еще недостаточно.

Атрибут pattern.

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

Например для имени —

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

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

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

Валидация input

Валидация input с помощью HTML, JavaScript, а также стилизация верно и не верно заполненного поля ввода

Валидация input с помощью HTML

Для этой задачи воспользуемся атрибутом pattern . При использовании такого подхода, обязательно нужно сообщить пользователю в каком формате необходимо вводить в данное конкретное поле (с помощью label и/или title )

Введите число от 1 до 9

Введите не более 5 цифр

Введите от 7 до 9 цифр

Только на русском

Для составления более сложных паттернов необходимо хорошо знать регулярные выражения

Более сложный пример: валидация номера телефона

Пример номера (Россия): +7 (777) 777-77-77

Пример номера (Беларусь): +375 (33) 333-33-33

Валидация input с помощью JavaScript

Теперь будем проверять правильность ввода с помощью JavaScript. С таким подходом можно более оперативно оповещать пользователя о неверном вводе. Повешаем на событие keyup функцию проверки правильности ввода

Разрешим ввод только цифр

Первый аргумент метода replace() — это регулярное выражение (шаблон, по которому будем делать проверку), второй — пустая строка ‘ ‘ . Т.е. при соответствии заданного шаблона мы очищаем недопустимые символы.

  • \d — только цифры
  • ^ — инверсия, т.е. получается ^\d — не цифры
  • /g — флаг глобальный поиск

Т.о., пользователь не сможет ввести отличный от цифр символ.

Введите любое число

Используя регулярные выражения можно задать абсолютно любой шаблон для input.

Стилизация верного и неверного поля ввода.

В основном комбинированием каких-то из этих трёх свойств мы оповещаем пользователя о возможности дальнейшей отправки формы.

Верный ввод при фокусе

НЕверный ввод при фокусе

Верный ввод при фокусе обязательного input

НЕверный ввод при фокусе обязательного input

Достаточно гибко можно стилизовать поля для ввода.

Валидация форм средствами HTML5

Введение

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

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

1. Специализированные типы входных данных

В HTML5 введены несколько новых типов ввода. Они используются для создания поля ввода, принимающего только определенные типы данных.

Новые типы входных данных выглядят следующим образом:

input type =»email»/>

Если браузер не поддерживает данный тип ввода, поле будет вести себя, как обычное поле ввода текста.

2. Обязательные поля для заполнения

Просто добавив атрибут » required » к input > , select > или textarea >. , Вы говорите браузеру, что значение должно быть заполнено.

input type =»checkbox» name =»terms» required >

3. Лимиты

Мы можем установить некоторые ограничения и лимиты, например, максимальные и минимальные значения для числовых полей. Чтобы ограничить длину поля ввода надо использовать атрибут » maxlength «.

input type =»text» name =»name» required maxlength =»15″>

Поле input type =»number» /> использует атрибуты » max «и » min «, чтобы создать диапазон возможно-допустимых значений (в примере минимально допустимый возраст 18)

input type =»number» name =»age» min =»18″ required >

4. Стилизирование

CSS3 псевдо-классы позволяют украсить форму в не зависимости от ее состояния. Это:

В примере мы объединили селекторы » valid » и » invalid » с псевдо-классом » focus » для закрашивания поля формы в красный или зеленый, в зависимости от того, что делает пользователь: выбирает или печатает.

border : solid 2px #F5192F ;

border : solid 2px #18E109 ;

5. Подсказки

Вы замечали всплывающее окно с подсказкой при отправлении неправильно заполненной формы? Установив атрибут » title » для поля ввода, можно добавить подсказки, указывающие на ошибки при нарушении тех или иных правил валидации.

Обратите внимание, что разные браузеры отображают всплывающие подсказки по-разному. В браузере Chrome значение названия атрибута будет отображаться мелким шрифтом, под основным сообщением об ошибке. В Firefox другая проблема: использовав атрибут “pattern” после того как он берется в качестве шаблона, Вы не получите всплывающую подсказку.

input type =»text» name =»name» title =»Пожалуйста введите имя пользователя.»>

6. Шаблоны

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

Вот как это можно использовать:

input type =»email» name =»email» required pattern =»^\[email protected]\S+\.\S+$» title =»[email protected]»>

С функцией фильтрования входных данных мы можем принимать только полный e-mail адрес.

Labdes

Думаю многие знают, что такое форма: это совокупность элементов, которые могут представлять собой текстовое поле (text), текстовое пространство (textarea), чек боксы (checkbox), радио кнопки/переключатели (radio), выпадающие списки (option), кнопки (button, submit). Эти поля посылают данные – имя/значение. Данные соответственно обрабатываются на сервере и результат возвращается пользователю. Валидация – это проверка данных заполненных полей на соответствие какому-то шаблону.

Проверка может осуществляться с помощью html5, javascript/jQuery на клиенте и также на сервере. Любое поле должно иметь атрибут ‘name’ Также input поля могут иметь атрибут ‘value’ . Если значение value заполнено, то оно будет отображаться на страничке по умолчанию. Input поля могут обрамляться тегами . Применение данного тега – является хорошим стилем программирования. Когда он используется то у input поля появляется заголовок при клике на который становится активным данный input или переключатель, а также можно назначать горячие клавиши. Есть два варианта использования: первый вариант связка for ссылающаяся на >Имя либо Имя: Текстовое поле это или У полей с типом password вводимые символы отображаются звездочками для безопасности. Чтобы загрузить файл, используется поле Input с type=”file” Поле с галочкой – Input type=”checkbox”. Если поставить галочку, то такое поле получит атрибут “checked” Радио кнопка – Input type=”radio”, в отличии от чекбокса можно выбрать только одно значение. Для передачи значений, которые не нужно видеть юзеру, используются скрытые поля- Input type=”h >click me . Поле для большого куска текста – Поле выбора значения из выпадающего списка: Задать выбранное поле по умолчанию поможет атрибут selected. Если задать атрибут multiple то можно выбрать несколько значений: …

HTML 5 Input

Input type=”date” выводит календарь для выбора даты. Input type=”color” выводит палитру для выбора цвета. Input type=”range” выведет слайдер для выбора значения от 0 до 100%. Также появились новые атрибуты: autocomplete, placeholder, required, pattern и так далее… Контейнер для всех полей, это тег form. Его возможные параметры: Action – куда послать данные, Enctype – как браузеру воспринимать передаваемые данные, Method – метод передачи данных GET (через url) или POST (фоновая передача).

HTML 5 Валидация

HTML5 Валидация будет осуществляться самим браузером основываясь на типе поля. Например глянем на форму и увидим типы e-mail, url, number, datetime:

Из плюсов это конечно автоматическая проверка, из минусов можно отметить то, что старые браузеры не поддерживают HTML5.

Если добавить атрибут required: то данное поле должно быть обязательно заполнено, иначе появится предупреждение.

Если добавить атрибут placeholder то его значение появится в поле в роли подсказки, например:

Проверить поддержку какого-то параметра браузером, можно на сайте caniuse.com

Ограничить количество вводимых символов можно свойством maxlength, например:

Параметры min/max ограничивают цифровые значения: . Также это ограничение можно присваивать датам:

Параметр multiple позволяет выбирать несколько файлов с помощью Input=”file” или делает возможным ввод нескольких емэйлов в поле Input=”email”.

Разрешить загрузку только определенных типов файлов можно указав mime-type, например только для PNG:

Или только для любых изображений:

Для mp3 и видео:

Можно также использовать регулярные выражения. Например паттерны:

Поле для ввода только слова Привет: . Если надо сделать возможность ввода Привет и привет, то меняем паттерн так: pattern=”[Пп]ривет”. И так далее. Еще примеры. Прописные буквы: [a-z]+ Плюс означает один или больше. Строчные и прописные [A-Za-z]+

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

Можно средствами html css, сделать так чтобы в форму поля можно было ввести только такие данные?

  • Дата рождения (формат в форме дд.мм.гггг)
  • СНИЛС (формат xxx-xxx-xxx xx, только цифры)
  • Полис ОМС (16 символов, только цифры)

Сама форма стандартная: исключение подключен бутстрап для сетки:

2 ответа 2

С версии 5, html поддерживает для input свойство pattern, которое с помощью регулярных выражений позволяет на уровне html осуществлять валидацию полей ввода, а так же определять стили валидных и невалидных введенных данных на css с помощью псевдоэлемента :valid . Например:

Этот код не позвонит предать обработчику по нажатию кнопки submit введенную в поле ввода информацию, если введено это менее одной цифры. А поддерживающий pattern браузер проиндицирует ошибку всплывающим сообщением и цветом окантовки input .

Советую изучить регулярные выражения, они имеют особенности для php/html и js. А так же обратить внимание на безопасность ваших полей ввода — злоумышленник скорее всего будет обращаться напрямую к вашему обрабочику, минуя валидацию на уровне html и js. Поэтому в обработчике все равно придется проводить повторную валидацию.

Валидация html форм с помощью javascript

Программирование › Веб программирование › Валидация html форм с помощью javascript

В этой теме 0 ответов, 1 участник, последнее обновление Васильев Владимир Сергеевич 2 года/лет, 7 мес. назад.

Сегодня статья будет о том, как проверить форму перед отправкой на JavaScript. Статья расчитана на пользователя, который уже знаком с html и javascript.

Допустим у нас есть сайт с регистрацией пользователей. Вот регистрационная форма (читать про обработчик формы):

Теперь необходимо создать проверку данных, введенных пользователем. Если данные введены правильно, то форма будет отправлена, если нет, то отправка будет отменена.

Проверка введенных данных будет осуществляться с помощью JavaScript.

Для проверки данных создадим скрипт и функцию Validate(obj)

А теперь все по порядку. Сначала мы получаем данные формы и сохраняем их в переменные (поле date имеет формат гггг-мм-дд , поэтому используем функцию split() , которая разделяет строку на три значения).

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

Следующий шаг проверки — проверка пароля, он не должен быть короче 6 символов и должен совпадать с повторно введенным. В случае неудачной проверки в переменную errors записывается текст ошибки.

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

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

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

Валидация формы обратной связи.

Вступление.

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

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

Немного подумав, мы решили, что форма будет иметь следующие поля:

  1. имя — ведь нам нужно как-то обращаться к пользователю, когда мы будем писать ему ответ;
  2. электронная почта — мы же должны знать, куда отправлять ответ;
  3. тема сообщения — тоже необходимая информация, по ней мы определимся, кто будет отвечать на это письмо;
  4. текст сообщения — здесь комментарии излишни.

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

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

HTML-разметка формы обратной связи.

Форма обратной связи

Отметим лишь один элемент данной формы:

В этот мы будем выводить красиво оформленное сообщение об ошибке.

Таблица стилей для формы обратной связи.

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

Критерии валидации формы обратной связи.

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

Во-первых, для всех полей формы проверяем заполнены они или нет. Это самая простая проверка.

Во-вторых, поле «Ваше имя». Давайте определимся, что мы ожидаем получить реальное имя человека на русском языке. Значит поступившие данные должны содержать только прописные и строчные буквы русского алфавита. Разрешим ещё и пробел — пользователь кроме имени может указать ещё и своё отчество. Наличие любых других символов приведёт к ошибке.
Паттерн RegExp для такой проверки будет выглядеть так: /^[а-яёА-ЯЁ\s]+$/ .

В-третьих, поле «Электронная почта». Здесь особых объяснений не нужно.
Паттерн RegExp для этого поля выглядит так:
/^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z])+$/ .

В-четвёртых, поля «Тема сообщения» и «Текст сообщения». В этих полях допустимы любые символы, но мы всё же подстрахуемся и запретим символы квадратных и угловых скобок, процентов, апострофа, амперсанда и одиночных кавычек. Это защитит нас на начальном этапе от спамеров и желающих повесить эксплойт на наш сайт.
Более серьёзная проверка на спам и защита от хакеров осуществляется в php-скрипте, в который мы передадим данные формы, но это находится за пределами темы нашей статьи.
Паттерн RegExp будет такой: /[^\ \[\]%’`]+$/ .

Начинаем писать Javascript валидации формы.

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

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

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

Для примера разберем валидацию формы регистрации. Основные шаги:

html-код формы регистрации

Форма классическая — логин, e-mail, пароль и подтверждение пароля. Для первых полей добавим placeholder и стилизуем его.

Css для формы регистрации

Валидация формы регистрации

Сразу приведу полный код валидации, а потом разберем его

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

  1. Для логина зададим ограничение — минимальное количество символов в логине 4. Если условие не соблюдается, то под полем ввода логина выводим соответствующее сообщение, а самому полю присваиваем класс error.
  2. Для поля e-mail сначала проверяем на заполненность и, если в нем что то есть, делаем проверку на соответствие маске. Информация о ошибке выводится аналогично полю ввода логина.
  3. Для полей пароль и подтверждение пароля сначала проверяем на заполненность, и если в них что то есть, делаем проверку на равенство паролей. Информация о ошибке выводится аналогично полю ввода логина.

Похожие записи

9 комментариев

Отличная инструкция. Перебрал множество, эта лучшая!
Только не пойму в каком месте передать информацию в обработчик, если все поля заполнены?

Евгений, если вы хотите отправлять данные ajax-ом, то тогда скрипт отправки можно писать сразу после:
if ( validateForm() ) <
event.preventDefault();
>
тут в случае ошибки validateForm() возвращает true, и выполнение прерывается, код следующий за этим условием выполняться не будет, а если все заполнено корректно, то продолжится выполнение кода.
А если у вас выполняется отправка формы с перезагрузкой страницы, то достаточно у формы указать метод отправки (post или get) и action (если надо указать путь к обработчику)

Алексей, спасибо за ответ.
Но почему то не работает ajax методом.
Вставляю свой код:
else <
var form = $(formis);
$.ajax( <
type: «POST»,
url: «mail.php»,
data: form.serialize()
>).done(function() <
form.find(«.success»).addClass(«active»);
setTimeout(function() <
form.find(«.success»).removeClass(«active»);
form.trigger(«reset»);
>, 2000);
>);
>
То идет отправка POST методом и все передается в строку браузера.
А если использовать без else, тогда данные сразу же отправляются, даже если не заполнены поля

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

Топ-пост этого месяца:  Ценность ссылок как фактора ранжирования практически не изменяется
Добавить комментарий