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

Установка Validate

Шаг №1

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

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/date-en-GB.js"></script>
<script type="text/javascript" src="js/validate.js"></script>

Шаг №2

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

<form id="send" action="test.php" method="post">
<p><label for="name">Имя:*</label><br/><input id="name" name="name" title="Введите имя" type="text" class="required"/></p>
<p><label for="email">Email:*</label><br/><input id="email" name="email" title="Введите правильный адрес" type="text" class="required email"/></p>
<p><label for="phone">Телефон:*</label><br/><input id="phone" name="phone" title="Введите тел. номер" type="text" class="required number" /></p>
<p><label for="fax">Факс:</label><br/><input id="fax" name="fax" type="text" /></p>
<p><label for="address">Адрес:*</label><br/><textarea id="address" name="address" title="Введите адрес" class="required"></textarea><p>
<p><label for="postcode">Почтовый индекс:*</label><br/><input id="postcode" name="postcode" title="Введите почтовый индекс" type="text" class="required postcode" /></p>
<p><label for="country">Страна:*</label><br/><select id="country" name="country" title="Выберите страну" class="required">
<option value="">выберите</option>
<option value="Россия">Россия</option>
<option value="Украина">Украина</option>
<option value="германия">Германия</option>
</select></p>
<p><label for="dob">Дата рождения:*</label><br/><input id="dob" name="dob" title="Введите дату рождения" type="text" class="required date"/></p>
<p><label for="sex">Пол:*</label><br/><input type="radio" title="Выберите свой пол" name="sex" value="мужской" class="required" />Мужской <input type="radio" name="sex" value="женский" class="required"/>Женский</p>
<p><label for="disclaimer">Согласны с правилами?:*</label><input type="checkbox" id="disclaimer" title="Вы не согласны с правилами" value="согласен" class="required" /></p>
<input type="submit" value="Отправить" id="submit" class="submit" />
</form>

Сразу хочу обратить внимание на то, чтобы всё отлично работало, форма должна удовлетворять следующим требованиям:

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

Шаг №3

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

#send .red

#send label.red

#send .red

#send .customRed

#send .errorMessage

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

Шаг №4

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

<link href="validate.css" rel="stylesheet" type="text/css"/>

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

Шаг №5

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

<script type="text/javascript">
window.addEvent('domready', function(){
var myFormValidation = new Validate('send',{
errorClass: 'red'
});
});
</script>

Стоит заметить, что send - это идентификатор формы.

Настройка стилизации Validate

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

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

#send .red {
border: 1px solid blue;
}

#send .errorMessage {
color: blue;
margin-left: 10px;
font-size: 0.8em;
}

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

Проверка полей формы на ввод и формат

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

Проверка полей на пустошь

Для этого нужно добавить в LABEL класс required:

class="required"

Проверка ввода email (формат: латиница с цифрами@латиница с цифрами . латиница)

Для того чтобы проверять ввод email в поле, нужно добавить в LABEL класс required email:

class="required email"

Проверка ввода телефонного номера (формат: цифры. допускается в начале + и -, а также точка между цифрами)

Для того чтобы проверять ввод телефона в поле, нужно добавить в LABEL класс required number:

class="required number"

Проверка ввода почтового индекса (формат: только цифры)

Для того чтобы проверять ввод индекса в поле, нужно добавить в LABEL класс required postcode:

class="required postcode"

Проверка ввода даты в поле (есть возможность выбора формата)

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

class="required date"

Для того чтобы изменить сам формат введённой даты, то стоит править 19 строчку в validate.js:

dateFormat: 'd.m.y',

12.05.09

CodeNet

Регулярные выражения

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