Проверка формы на валидацию

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

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

Шаг №1

Как всегда, сначала копируем файлы и подключаем необходимые фреймворки и скрипты:

Синтаксис: html
Синтаксис: html

Шаг №2

Вставляем HTML-код формы:










Мужской Женский


Синтаксис: html

Синтаксис: html

Сразу хочу обратить внимание на то, чтобы всё отлично работало, форма должна удовлетворять следующим требованиям:
Форма должна иметь идентификатор (в нашем случае - send).
Обязательно должен присутствовать тег LABEL с атрибутом for.
В LABEL должен присутствовать класс, если требуется проверять это поле.

Шаг №3

Открываем validate.css и смотрим на идентификатор формы. Так как я использую send, то прописываю:
Синтаксис: css
#send .redСинтаксис: css
Синтаксис: css
#send label.redСинтаксис: css
Синтаксис: css
#send .redСинтаксис: css
Синтаксис: css
#send .customRedСинтаксис: css
Синтаксис: css
#send .errorMessageСинтаксис: css

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

Шаг №4

А теперь подключаем таблицу стилей validate.css:
Синтаксис: html
Синтаксис: html

Если вы используете свою таблицу стилей, то скопируйте содержимое validate.css.

Шаг №5

Перед закрытие тега BODY вставляем следующий код:
Синтаксис: javascript

Стоит заметить, что send - это идентификатор формы.
Настройка стилизации Validate

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

Первоначально ошибка выводится красным цветом, а поле получаем красное обрамление. Есть возможность добавить или изменить на свой вкус и цвет. Для этого нам нужно изменить следующие два класса в validate.css:
#send .red {
border: 1px solid blue;
Синтаксис: css
}Синтаксис: css
#send .errorMessage {
color: blue;
margin-left: 10px;
font-size: 0.8em;
Синтаксис: css
}Синтаксис: css

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

В этом скрипте существует несколько вариантов проверки полей:
Проверка полей на пустошь

Для этого нужно добавить в LABEL класс required:
Синтаксис: html
class="required"Синтаксис: html
Проверка ввода email (формат: латиница с цифрами@латиница с цифрами . латиница)

Для того чтобы проверять ввод email в поле, нужно добавить в LABEL класс required email:
Синтаксис: html
class="required email"Синтаксис: html
Проверка ввода телефонного номера (формат: цифры. допускается в начале + и -, а также точка между цифрами)

Для того чтобы проверять ввод телефона в поле, нужно добавить в LABEL класс required number:
Синтаксис: html
class="required number"Синтаксис: html
Проверка ввода почтового индекса (формат: только цифры)

Для того чтобы проверять ввод индекса в поле, нужно добавить в LABEL класс required postcode:
Синтаксис: html
class="required postcode"Синтаксис: html
Проверка ввода даты в поле (есть возможность выбора формата)

Для того чтобы проверять ввод даты в поле, нужно добавить в LABEL класс required date:
Синтаксис: html
class="required date"Синтаксис: html

Для того чтобы изменить сам формат введённой даты, то стоит править 19 строчку в validate.js:
Синтаксис: javascript
dateFormat: 'd.m.y',Синтаксис: javascript
На данный момент стоит вводить дату так: 12.05.09. Все возможные форматы вы сможете получить на CodeNet.
Регулярные выражения

Всё дело в том, что скрипт написан английским товарищем, а там, как я понял, используется в индексе дополнительный префикс, поэтому когда я вводил в поле 433310, мне скрипт выдавал ошибку. Я изменил регулярное выражение так, что теперь разрешается вводить индекс только числовой, поэтому если у вас используется другой индекс, то изменяйте выражение под себя. Все регулярные выражения вы можете поменять в validate.js