Офис НП AMWAY в Ярославле
Офис Амвей в Ярославле
На карте Офис 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 8764  Прочтений 8764 Прочтений  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 Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
13245 33 promask
27. апреля 2019
folder Вопрос по переделке bb-кода
PHP, MySQL
3325 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
13773 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
7703 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
7049 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
52687 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
4024 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
8154 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
9189 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
3040 0 Pisatel
15. июня 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
5694 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
7722 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
41247 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
3715 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
13623 13 Pisatel
03. апреля 2015