Проверка формы "на лету"

В этом уроке мы рассмотрим эффект проверки правильности заполения формы "на лету", т.е. без перезагрузки страницы.

Шаг 1.

Подключим необходимые скрипты и таблицу стилей формы:

 <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="utf-8" />

        <script src="js/jquery.js" type="text/javascript"></script>

<script src="js/jquery.validationEngine.js" type="text/javascript"></script>

Если хотите, чтобы форма выглядела, как в нашем примере, то можете подключить еще один стиль (он также есть в исходниках):

 <link rel="stylesheet" href="css/template.css" type="text/css" media="screen" title="no title" charset="utf-8" />

Шаг 2.

Далее просто вставляем форму с классом formular (если вы будете использовать свою таблицу стилей, то класс, конечно, может быть другой: тот, который нужен Вам), в параметре action прописываем файл-обработчик (в нашем примере он отсутствует)

<form id="formID" class="formular" method="post" action="#">

  </form>  

Шаг 3.

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

<input class="validate[required,custom[onlyLetter],length[0,100]] text-input" type="text" name="firstname"/>

Или вот еще один пример, проверяющий правильность введения адреса электронной почты, а также совпадения полей с ней:

	<input class="validate[required,custom[email]] text-input" type="text" name="email" id="email" />
	<input class="validate[required,confirm[email]] text-input" type="text" name="email2"/>

Вот расшифровка подобных классов:

required: Проверка поля
length[0,100] : Между x и x символами
minCheckbox[7] : Максимально позволенное количество чекбоксов
confirm[fieldID] : Совпадает ли с другим полем ( например проверка пароля)
telephone : Проверка телефонного номера
email : Проверка правильности введения адреса электронной почты
onlyNumber : В поле должны быть только цифры
noSpecialCaracters : В поле не должно быть специальных символов
onlyLetter : В поле должны присутствовать только буквы.

Шаг 4.

Если Вам не нравится русификация этого скрипта (русифицировал его я сам), то можете поменять значения команд проверки на свои в файле jquery.validationEngine.js. Но потом обязательно сохраните его в формате UTF-8! Иначе русские символы не будут отображаться!

Вот и все! Спасибо за внимание и пусть Ваши формы всегда заполняют правильно!