Проверка полей с помощью JQuery VALIDATE

Рассмотрим простой пример:

Подключаем нужные файлы:

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/myscripts.js"></script>

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

Вот HTML код с нашем формой:

<form id="loginform" action="" method="post">
Ваш логин:
<input type="text" name="login" />
Ваш пароль:
<input type="password" name="pswd" />
<input type="submit" name="enter" value="Войти" /></form>

И вот файл myscripts.js с нашим кодом проверки форм:

$(document).ready(function(){
$("#loginform").validate({
rules:{
login:{
required: true,
minlength: 4,
maxlength: 16,
},
pswd:{
required: true,
minlength: 6,
maxlength: 16,
},
},
messages:{
login:{
required: "Это поле обязательно для заполнения",
minlength: "Логин должен быть минимум 4 символа",
maxlength: "Максимальное число символо - 16",
},
pswd:{
required: "Это поле обязательно для заполнения",
minlength: "Пароль должен быть минимум 6 символа",
maxlength: "Пароль должен быть максимум 16 символов",
},
}
});
});

Чтобы менять внешний вид сообщений об ошибке, нужно в файле CSS работать с классом .error

Например:

.error{ color: red; }

Список правил:

• required – поле обязательное для заполнения (true или false)
• remote – указывается файл для проверки поля (например: check.php)
• email – проверяет корректность e-mail адреса (true или false)
• url – проверяет корректность url адреса (true или false)
• date – проверка корректности даты (true или false)
• dateISO – проверка корректности даты ISO (true или false)
• number – проверка на число (true или false)
• digits – только цифры (true или false)
• creditcard – корректность номера кредитной карты (true или false)
• equalTo – равное чему-то (например другому полю equalTo:”#pswd”)
• accept – проверка на правильное расширение (accept: “xls|csv”)
• maxlength – максимальное кол-во символов (число)
• minlength – минимальное кол-во символов (число)
• rangelength – кол-во символов от скольки и до скольки (rangelength: [2, 6])
• range – число должно быть в диапазоне от и до (range: [13, 23])
• max – максимальное значение числа (22)
• min – минимальное значение числа (11)