Навигация

Проверка заполнения полей формы с помощью 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	IP-Калькулятор	NSLOOKUP	Видео IT
Баллистический калькулятор: тип 1 и тип 2 Калькулятор поправок в MOA Баллистический коэффициент пневматики		Файлы NSLOOKUP IP-Калькулятор

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