Офис НП 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 Октябрь 2013 10:13:02
11649 Прочтений
Думаю, многие сталкивались с подобным: нужно заполнить какую-либо форму, мы ее, вроде, заполняем, жмем "Отправить", а нам в ответ- "Поле ... не может быть пустым! Попробуйте снова." согласись, это просто убивает, и в большинстве случаев пользователь просто плюнет, скажет пару-тройку непечатных фраз в адрес тебя, твоих родственников и твоего сайта, закрывая вкладку. Избежать этого можно, если проверять заполненность и корректность заполненности полей и выводить подсказки сразу, без отправки данных на сервер. И поможет нам в этом JQuery- плагин JQuery Validation Plugin.
Итак, у нас есть обычная форма отправки данных, например- это форма обратной связи, нам нужно, чтобы все поля были обязательными для заполнения, а поле email, к тому же, было еще сразу проверено на корректность введенного email- адреса. Вот как выглядит сама форма:
Думаю, вопросов по структуре формы возникнуть не должно, однако сделаю все-таки небольшие пояснения: id самой формы (cform) - это идентификатор, с помощью которого мы привяжем нашу форму к скрипту валидатора, placeholder- это элемент HTML5, выводящий нужный текст в поле ввода, далее чуть интереснее: minlength- этот параметр отсутствует в html, однако нашему валидатору он даст команду- не менее 3х символов в поле, то есть, если пользователь введет менее 3х символов, то он сразу увидит сообщение об ошибке; класс required делает поле обязательным для заполнения; класс email включает проверку на корректность ввода email-адреса. Ну и самой кнопке Отправить не забываем присвоить класс submit, чтобы валидатор мог ее увидеть.
Все настройки, что я привожу здесь- по умолчанию, то есть они уже реализованы в плагине, и никаких дополнительных манипуляций проводить не потребуется. Из архива, который ты скачаешь по ссылке выше, берем только два файла: сам валидатор и языковой файл для показа ошибок.
Ну и далее- само подключение плагина и его инициализация.
Как видишь, все довольно просто. По умолчанию, плагин при ошибке (когда поле, например, обязательно для заполнения или содержит недостаточно символов) добавляет label с классом error под полем ввода. Ты можешь изменить его положение с помощью CSS- стилей.
Ну и еще небольшая плюшка- если поле заполнено корректно, можно показать это пользователю. Для этого по умолчанию в плагине используется класс valid. Например, подсветим корректно заполненные поля зеленым цветом:
Примерно таким же образом можно подсветить и неверно заполненные поля:
Ну вот, в общем, и все. Настроек у данного плагина еще масса: это и проверка форм при регистрации- например, совпадение введенных паролей из поля пароля и поля подтверждения пароля, проверка чекбоксов, проверка корректности ввода кредитных карт... Более подробную информацию и все возможности плагина можно найти на официальном сайте.
Итак, у нас есть обычная форма отправки данных, например- это форма обратной связи, нам нужно, чтобы все поля были обязательными для заполнения, а поле 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;
}
Ну вот, в общем, и все. Настроек у данного плагина еще масса: это и проверка форм при регистрации- например, совпадение введенных паролей из поля пароля и поля подтверждения пароля, проверка чекбоксов, проверка корректности ввода кредитных карт... Более подробную информацию и все возможности плагина можно найти на официальном сайте.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Заголовок
Категория
Просмотров
Поделиться:
Последние активные темы форума
| Темы | Просмотров | Ответов | Последние сообщения | |
 |
Вопрос по переделке bb-кода PHP, MySQL |
22379 | 5 | Pisatel 26. мая 2017 |
|
Вопросы по Ajax форме обратной связи CMS PHP Fusion |
68852 | 48 | Ditrin 19. февраля 2017 |
|
BBCode YouTube Video Colorbox mod CMS PHP Fusion |
15396 | 2 | Pisatel 10. декабря 2016 |
|
Как лучше создать собственную страницу? CMS PHP Fusion |
17949 | 17 | Pisatel 11. мая 2016 |
|
Небольшие вопросы по скриптам магазина и катало... PHP, MySQL |
145353 | 80 | Pisatel 11. января 2016 |
|
BBCode Code mod CMS PHP Fusion |
14451 | 0 | Pisatel 31. августа 2015 |
|
Ajax Like Dislike Article Panel CMS PHP Fusion |
22609 | 16 | Pisatel 07. июля 2015 |
|
Хлебные крошки / BreadCrumbs SEO Panel CMS PHP Fusion |
26331 | 17 | Pisatel 04. июля 2015 |
|
Abbr Description BBCode CMS PHP Fusion |
7677 | 0 | Pisatel 15. июня 2015 |
|
Плагин Email рассылки Mail To All by Pisatel CMS PHP Fusion |
37118 | 32 | Pisatel 26. апреля 2015 |
|
Подозрительный трафик и прочие страшилки Всякая хрень |
11836 | 2 | Ditrin 23. апреля 2015 |
|
Мод Newsletter - рассылка писем пользователям с... CMS PHP Fusion |
31077 | 13 | Pisatel 10. апреля 2015 |
|
Мод отправки писем PHPMailer для PHP-Fusion CMS PHP Fusion |
128917 | 113 | Ditrin 06. апреля 2015 |
|
Появление неизвестного файла subscriptions.php CMS PHP Fusion |
8866 | 2 | Pisatel 06. апреля 2015 |
|
Autoban on IP CMS PHP Fusion |
23225 | 13 | Pisatel 03. апреля 2015 |