Офис НП AMWAY в Ярославле
Купить продукцию Амвей в Ярославле
На карте Купить AMWAY в ЯрославлеПриобрести высококачественную продукцию Амвей в Ярославле, получить консультации по бизнесу, заказать продукцию или получить заказ:
Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
Телефон: +7 (920) 112-00-91
Email: matyxho@mail.ru
Сайт: https://www.amway.ru/user/lebedem
Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » HTML, CSS, JS » Проверка форм на заполненность
Сниппет
Весьма полезная в плане удобства и юзабилити фишка: вывод подсказок при пустоте поля (полей) формы, обязательных для заполнения, без перезагрузки страницы.
Проверка форм на заполненность
Опубликовал  Pisatel Добавлено  10-10-2013 10:13 10 Октябрь 2013 10:13:02 8024  Прочтений 8024 Прочтений  0 Комментариев 0 Комментариев
 printer
Думаю, многие сталкивались с подобным: нужно заполнить какую-либо форму, мы ее, вроде, заполняем, жмем "Отправить", а нам в ответ- "Поле ... не может быть пустым! Попробуйте снова." согласись, это просто убивает, и в большинстве случаев пользователь просто плюнет, скажет пару-тройку непечатных фраз в адрес тебя, твоих родственников и твоего сайта, закрывая вкладку. Избежать этого можно, если проверять заполненность и корректность заполненности полей и выводить подсказки сразу, без отправки данных на сервер. И поможет нам в этом JQuery- плагин JQuery Validation Plugin.
Итак, у нас есть обычная форма отправки данных, например- это форма обратной связи, нам нужно, чтобы все поля были обязательными для заполнения, а поле email, к тому же, было еще сразу проверено на корректность введенного email- адреса. Вот как выглядит сама форма:
Код: HTML
    <form name='userform' method='post' action='/' id='cform'>
<p><label for='your_name'>Ваше имя</label><input type='text' name='mailname' id='your_name' minlength='3' maxlength='50' class='required' size='50' placeholder='Введите Ваше имя'/></p>
<p><label for='your_email'>Ваш email</label><input type='text' name='email' id='your_email' maxlength='100' size='50' class='email required' placeholder='Введите Ваш email'/></p>
<p><label for='your_subject'>Заголовок</label><input type='text' name='subject' id='your_subject' minlength='3' maxlength='50' size='50' class='required' placeholder='Введите заголовок сообщения'/></p>
<p><label for='your_message'>Сообщение</label><textarea name='message' id='your_message' class='required' placeholder='Текст Вашего сообщения'></textarea></p>

<input type='submit' name='sendmessage' value='Отправить сообщение' class='submit' /><br />
</form>



Думаю, вопросов по структуре формы возникнуть не должно, однако сделаю все-таки небольшие пояснения: id самой формы (cform) - это идентификатор, с помощью которого мы привяжем нашу форму к скрипту валидатора, placeholder- это элемент HTML5, выводящий нужный текст в поле ввода, далее чуть интереснее: minlength- этот параметр отсутствует в html, однако нашему валидатору он даст команду- не менее 3х символов в поле, то есть, если пользователь введет менее 3х символов, то он сразу увидит сообщение об ошибке; класс required делает поле обязательным для заполнения; класс email включает проверку на корректность ввода email-адреса. Ну и самой кнопке Отправить не забываем присвоить класс submit, чтобы валидатор мог ее увидеть.
Все настройки, что я привожу здесь- по умолчанию, то есть они уже реализованы в плагине, и никаких дополнительных манипуляций проводить не потребуется. Из архива, который ты скачаешь по ссылке выше, берем только два файла: сам валидатор и языковой файл для показа ошибок.
Ну и далее- само подключение плагина и его инициализация.
Код: JQUERY
    <script type='text/javascript' src='/jquery.validate.js'></script>
<script type='text/javascript' src='/jquery.validate_ru.js'></script>
<script type='text/javascript'>
$('#cform').validate({
submitHandler: function(form) {
form.submit();
}
});
</script>



Как видишь, все довольно просто. По умолчанию, плагин при ошибке (когда поле, например, обязательно для заполнения или содержит недостаточно символов) добавляет label с классом error под полем ввода. Ты можешь изменить его положение с помощью CSS- стилей.
Ну и еще небольшая плюшка- если поле заполнено корректно, можно показать это пользователю. Для этого по умолчанию в плагине используется класс valid. Например, подсветим корректно заполненные поля зеленым цветом:
Код: CSS
#cform input.valid, #cform textarea.valid {
border: 1px solid green;
box-shadow: 0 2px 4px green inset;
border-radius: 3px;
}



Примерно таким же образом можно подсветить и неверно заполненные поля:
Код: CSS
#cform input.error, #cform textarea.error {
border: 1px solid red;
box-shadow: 0 2px 4px red inset;
border-radius: 3px;
}



Ну вот, в общем, и все. Настроек у данного плагина еще масса: это и проверка форм при регистрации- например, совпадение введенных паролей из поля пароля и поля подтверждения пароля, проверка чекбоксов, проверка корректности ввода кредитных карт... Более подробную информацию и все возможности плагина можно найти на официальном сайте.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
Нет комментариев.
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL
805 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
5062 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
5955 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
3769 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
37536 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
2835 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
5104 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
5638 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
2056 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
7915 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
3302 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
4835 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
23245 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
2497 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
10417 13 Pisatel
03. апреля 2015