Как сделать проверку заполнения полей в форме при помощи jQuery плагина? Для этого понадобится плагин jquery.validate.js и библиотека jQuery.
Пример простой формы обратной связи с использованием плагина проверки полей:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Проверка заполнения полей формы с помощью jQuery</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#demoForm").validate();
});
$.validator.messages.required = "Заполните поле!";
$.validator.messages.email = "Неверный формат email";
$.validator.messages.url = "Неверный формат url, начните с http://";
</script>
</head>
<body>
<form id="demoForm" method="get" action="">
<fieldset>
<div>
<label>Имя</label>
<em>*</em><input name="name" size="25" class="required" minlength="2" />
</div>
<div>
<label>E-Mail</label>
<em>*</em><input name="email" size="25" class="required email" />
</div>
<div>
<label>URL сайта</label>
<em> </em><input name="url" size="25" class="url" value="" />
</div>
<div>
<label>Комментарий</label>
<em>*</em><textarea name="comment" cols="22" class="required"></textarea>
</div>
<div>
<input type="submit" value="Отправить"/>
</div>
</fieldset>
</form>
</body>
</html>
Скачать пример:
demo.validate.zip
Для работы проверки потребуется наличие библиотеки jQuery и плагина jquery.validate.js
Чтобы поле обозначить обязательным к заполнению, в input пишем class=”required”
Так же используются проверки на правильность заполнения email, url и другие варианты, которые описываются на официальном сайте
jQuery. На данном примере пишем в class=”required email” или class=”url”
По умолчанию уведомление об ошибке выводится на английском языке, чтобы изменить текст незаполненного поля, добавляем соответствующие строки в тело скрипта:
$.validator.messages.required = "Заполните поле!";
$.validator.messages.email = "Неверный формат email";
$.validator.messages.url = "Неверный формат url, начните с http://";