Работая над написанием административного, да и пользовательского интерфейса, я не раз ловил себя на ...
Работая над написанием административного, да и пользовательского интерфейса, я не раз ловил себя на мысли — а все ли я делаю так, чтобы при минимуме усилий обеспечить оптимальное качество?
Сегодня хотелось бы обсудить вопрос обработки ошибок ввода форм в веб-приложениях.
Читать дальше →
HTML-форм уделяют ...
Валидации HTML-форм уделяют очень мало внимания. Например, даже на habrahabr.ru пока я регистрировался и входил на сайт несколько раз мне выдавалось сообщение об ошибке: то код протекции ввел неправильно, то в логине указал email вместо логина. А еще бывает пользователи ошибаются с количеством цифр в номере телефона или реквизитах организации, путают русскую букву «с» с английской, при копировании и вставке в Windows лишнии пробелы добавляются к данным.
Конечно, все это не смертельно. Но было бы крайне удобно, чтобы данные проверялись еще до отправки на сервере. Особенно CAPTCHA, ибо ее часто вводишь с ошибкой.
Для решения данной проблемы были несколько способов: HTML5, jQuery Validate, zForms.ru и еще ряд менее известных библиотек. Но все эти способы имели свои недостатки: HTML5 поддерживается не всеми браузерами и не имеет опции не отправлять незаполненные поля, ограничить список допустимых символов для ввода в поле, возможности склеивать поля, посылать значения чекбоксов в формате csv или суммы значений.
Читать дальше →
... />
В интернете без труда можно найти множество критики в адрес программистов, которые пишут плохой код. Есть множество статей о плохих и хороших программистах, и даже специальные сайты. Но меня удивляет почти полное безразличие к тому говнокоду, что пишут верстальщики. В этой статье я постараюсь донести вам свои мысли о том, почему подавляющее большинство сайтов в интернете просто не должны работать.
Фрагмент результата валидации example.com
Читать дальше →
... но одна беда –
. Постоянно приходится изобретать ... >
(по умолчанию ...
Часто приходится «насыщать» интерфейсы с помощью JavaScript. В основном работаю через jQuery, всё нравится, но одна беда – валидация. Постоянно приходится изобретать «велосипед», искать в сети обрывки кода; а ведь хочется написать пару строчек без углубления в детали. Радость не заставила себя ждать: нашёл библиотеку
Valid8 (произносится как validate), и, наконец, решил проблему написания кода валидации.
Как пользоваться
Пользоваться библиотекой оказалось очень просто, чего не скажешь о склеивании jQuery «обрезков» из интернета. Чтобы подключить библиотеку, нужно зайти сюда и нажать заветный
Download. Скачается архив, в котором особый интерес представляет файл
jquery.valid8.js, его копируем в папку с js файлам нашего проекта и подключаем библиотеку в html:
<script src="/js/jquery-1.6.3.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.valid8.js" type="text/javascript" charset="utf-8"></script>
Допустим у нас есть форма:
<form><ul>
<li><input type="text" id="inputSome" /></li>
</ul></form>
Добавляем валидацию (по умолчанию только проверка обязательности заполения), передавая в качестве параметра строку с сообщением об ошибке. Работаем в стиле jQuery:
$('#inputSome').valid8("Заполни это поле!");
После того как поле получит фокус и вы из него выйдете не заполнив, объемлющий тег (в нашем случае
li) получит класс стиля
error.
Для визуализации ошибок добавим CSS в
head нашего документа:
<style>
.error input { background:pink; }
</style>
Валидация готова. Все.
Читать дальше →
... и для привычной
с помощью javascript ...
Для проверки текстовых полей на валидность обычно используют регулярные выражения. Существует несколько наиболе распространенных видов таких даных, как например номер кредитки, дата в определенном формате и т. д. На сайте html5pattern.com собирается коллекция регулярных выражений для таких данных (там это позиционируется, как возможное содержимое html5-атрибута pattern у inpit-элементов, но эти регулярные выражения можно использовать и для привычной валидации с помощью javascript). Актуальные для российской аудитории примеры, вместе с соответствующими регулярными выражениями вы можете посмотреть под катом.
Читать дальше →
