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

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

demosourse

Шаг 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! Иначе русские символы не будут отображаться!

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.position-absolute.com
Перевел: Сергей Патин
Урок создан: 3 Июня 2009
Просмотров: 121344
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^