Навигация

Проверка заполнения полей формы с помощью jquery

Для проверки полей формы с помощью библиотеки jQuery нам понадобится плагин:

Подробнее можно ознакомиться с документацией:

http://jqueryvalidation.org/documentation/

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

<div>
<label for="uemail" class="control-label">Email</label>
<input type="text" placeholder="Email" name="uemail" value="">
</div>

<div>
<label for="phone">Номер телефона:</label>
<input type="text" placeholder="+7(911)111-11-11" name="uphone" value="">
</div>

<div>
<div>
<button type="submit">Отпрвить данные</button>
</div>
</div>

</form>

<script>
$(function() {
$("#MyForm").validate({
rules: {
   uphone: {
required: true,
   minlength: 16,
   maxlength: 16
},
   uname: {
       required: true,
       minlength: 2
   },
   uemail: {
       required: true,
       email: true
   }
},
messages: {
   uphone: {
       required: "Поле - обязательно к заполнению",
   minlength: "Неверный формат номера",
   maxlength: "Неверный формат номера"
   },
   uname: {
       required: "Поле - обязательно к заполнению",
       minlength: "Слишком короткое имя"
   },
       uemail: "Введите корректный email"
   }
});
});
</script>
</body>
</html>

Собственно из примера легко догадаться, что к нашей форме применяется метод - validate, в нем описываются правила - rules, в котором для имен полей описаны правила, а в messages описаны подсказки, в случае неверно введенных пользователем данных.

Комментарии пользователей

Эту новость ещё не комментировалиНаписать комментарий

Анонимам нельзя оставоять комментарии, зарегистрируйтесь!

Главная	⇒ Статьи по IT и Мото-Тематике ⇐	Видео IT	Файлы	Контакты
JavaScript/jQuery/AJAX	Учебники Python 3, Powershell, Linux	IP-Калькулятор	NSLOOKUP	Карта сайта
Группа в ВК	Краткий учебник PostgreSQL \| Docker	Учебник по BASH	Полезные команды Unix	Видео про мотоциклы и разное

Контакты для обмена ссылками между сайтами	Видео к статьям на Youtube	Код обмена баннерами
Мои друзья:			Сообщество сисадминов
		© Snakeproject.ru создан в 2013 году. При копировании материала с сайта - оставьте ссылку.