вы не заполнили поле
Сидорчик учит себя жить
Людвиг Быстроновский советует книгу «Поток» Михайя Чиксентмихайи. Хочу её прочитать, нахожу в интернет-магазине, нажимаю «Купить», и на меня вываливается куча полей:
Сайт заставляет делать какие-то непонятные вещи. Я уже хотел читать, как перевести обыденную работу в приятное состояние, когда не ощущаешь времени, когда вместо усталости — постоянный прилив энергии. А вижу 19 полей, 2 чекбокса и 1 выпадающий список.
Правда, книга в этом интернет-магазине дешевле, чем в других, поэтому терплю. Меня спрашивают способ доставки — выбираю самовывоз. Для этого можно заполнить не все поля, а только пять. Но сайт всё равно ругается:
Ему не понравилось, что я оставил поля со звёздочкой пустыми. Оказывается, мало заполнить пять полей, надо поставить прочерки в остальных. Иначе машина не пропустит дальше.
Эти действия бессмысленные для пользователя. Они оттягивают момент покупки — отсеивают неопытных покупателей и уменьшают оборот магазина.
Исправит ситуацию упрощение формы. Например, такое:
Всё равно девушка из колл-центра позвонит, чтобы подтвердить заказ,— вот и спросит всё, что нужно.
См. также, как Илья Бирман в совете упрощает форму
Новые правила заполнения платежных поручений с 1 октября 2021 года
C 1 октября 2021 года начинают действовать новые правила заполнения платёжных поручений. Изменения внесли приказом Минфина от 14 сентября 2020 года № 199н. Рассказываем, как теперь заполнять платёжки.
Основания платежа
В поле «106» c основанием платежа значения «ТР», «ПР», «АП», «АР» больше использовать нельзя. При платежах, не связанных с налогами и сборами, таможенными сборами и пошлинами, поле «106» оставляйте пустым — тут изменений нет. При перечислении текущих налоговых платежей указывайте «ТП». При перечислении недоимки, пеней и штрафов в поле «106» вписывайте «ЗД».
Если в поле «106» указано значение «ЗД», обязательно нужно заполнить поле «108» — внести реквизиты документов. Например:
Сначала указывайте буквенный код вида документа, а потом без пробелов — номер документа. И не забывайте указать дату документа — основания платежа в поле «109».
Важно! Номер должен строго соответствовать значениям и количеству знаков, указанным в документе.
Продолжают действовать коды:
Статус плательщика
Перестают действовать статусы:
В поле «101» (статус составителя поручения) значение «13» (плательщик сборов, страховых взносов и иных платежей, администрируемых налоговыми органам) нужно использовать следующим плательщикам:
Налоговые агенты по-прежнему указывают статус «02».
Будьте внимательны при формировании платёжек и не забудьте изменить шаблоны для их заполнения.
Валидация форм на HTML и CSS
Вы можете добиться внушительных результатов в вопросе проверки форм исключительно при помощи HTML-атрибутов. Вы можете сделать пользовательский опыт простым и понятным при помощи CSS-селекторов. Но вам потребуется несколько трюков, чтобы все получилось правильно!
(Вы можете) сделать label похожим на placeholder
Я бы сказал, что если форма короткая и с понятным паттерном поведения (вход или регистрация), то вы можете сделать названия полей в виде плейсхолдеров, но используйте для этого реальные элементы label.
Вам не нужно хитро изворачиваться и беспокоиться об установке курсора в поле ввода, все уже сделано семантикой. Если пользователь нажимает на название поля — активируется поле ввода. Если нажимает на само поле — курсор устанавливается в поле ввода. Оба варианта верны.
Фишка в том, чтобы поставить поле ввода первым (семантически допустимо). Таким образом вы сможете скрывать label при фокусе:
Сделайте определенные поля обязательными
Пожалуй, самым простым способом проверки формы является использование атрибута required. Нет более быстрого пути отлова ошибок, кроме как позволить браузеру сделать это самому!
Подсвечивайте верно заполненные поля
Дайте пользователю знать, что поле было заполнено верно. Браузер может предоставить нам эту информацию по CSS-псевдоклассу :valid.
:valid в этом случае показывает, что выполнено условие required. Но селектор так же подойдет для проверки данных по типу поля.
Покажите напоминание о виде вводимых данных
Вы также можете установить определенное требуемое значение. Вроде email или number. Здесь перечислены все возможные варианты.
Это поле является обязательным для заполнения и вводимая информация будет проверяться на соответствие адресу электронной почты. Давайте улучшим UX:
Но еще… не показывайте никаких подсказок, если поле пустое. И не считайте его неверно заполненным. Это может создать ощущение назойливости и будет только раздражать. Для того, чтобы соблюсти эту рекомендацию, мы должны будем узнать, пустое поле или нет.
Проверяем заполнено поле или нет
Мы хотим провернуть фокус с :valid и :invalid, но мы не хотим опережать события и считать поле невалидным до того, как оно было заполнено.
Есть ли CSS-селектор для проверки пустоты поля? Вообще-то нет! Вы можете подумать на :empty, но ошибетесь. Этот псевдокласс предназначен для проверки ситуаций когда элемент
не содержит в себе ничего. Поля ввода и так пусты по умолчанию.
Трюк в том, чтобы проверить поле на видимость атрибута placeholder:
Мы не использовали плейсхолдер в нашем примере, но это правило сработает, если мы зададим значение из одного пробела:
:placeholder-shown супер полезен для нас! Это в целом секретный селектор, позволяющий проверить, есть ли в поле значение или нет.
IE и Firefox пока не поддерживают его, что немного осложняет задачу. Обычно спасителем является новая функция @ supports, но…
Вы не можете использовать @supports для селекторов, только для свойства/значения (например @supports (display: flex)).
Проверить плейсхолдер при помощи JavaScript довольно легко:
Но это не кажется самым простым способом имитации :placeholder-shown. Поэтому…возможно, просто стоит подождать поддержки всеми браузерами.
Представим, что поддержка уже повсеместная и посмотрим, как это будет выглядеть…
Вы можете создать более сильную проверку
Это уже не просто required или type=”email” (и подобные). Вы можете проверить на клиентской стороне такие вещи, как длину (например минимальную длину пароля или максимальное количество символов в textarea>) и даже использовать полноценное регулярное выражение.
Вот статья об этом. Скажем, вы хотите проверку пароля по параметрам:
Вы можете это сделать следующим образом:
Я оставил в этом примере :placeholder-shown, так что в Firefox и IE может работать не очень хорошо. Это просто пример! Не стесняйтесь брать по частям или менять под свои нужды.
P.S. Если вам понравилась эта статья — нажмите зеленое сердечко. Это много значит для меня. Спасибо!
Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!
Выдать ошибку, что поле не заполнено
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Проверка заполнено ли поле
Подскажите как проверить введу ли данные с формы, я что то читал про функцию isset() но не могу.
Выдать ошибку, если текстовое поле пустое
Есть форма UserForm3, на ней два текстовых поля txt3 и txt4 и кнопка CommandButton4 (Ввод). Если в.
Выдать ошибку, если поле для заполнения пустое
Есть диалоговое окно. Там есть место для заполнения имени. Как вывести error если поле для.
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Строки, в которых заполнено поле
Помогите написать запрос Напишите запрос с использованием таблицы location в схеме hr, который бы.
Как посмотреть заполнено ли поле ListBox?
Здравствуйте, у меня возникла такая проблема: У меня есть кнопка и в зависимости заполнено ли поле.
Поле склад не заполнено при проведении
Доброго дня появилась проблема месяца закрывал без проблем теперь вылезла ошибка раньше все без.
Пометка обязательных полей в формах
Перевод статьи Nielsen Norman Group.
Аннотация: Использование звездочки для пометки обязательных полей — это простой способ улучшить удобство использования ваших форм. Отметка только необязательных полей затрудняет заполнение формы.
Общий вопрос на многих наших UX Conference: следует ли помечать обязательные поля в форме? Если большинство полей в форме являются обязательными, должны ли мы пометить их? (Это много пометок,в конце концов.) Краткий ответ — да. И оставшуюся часть статьи я объясню, почему.
Часто дизайнеры считают, что наличие пометок для каждого обязательного поля это уродливо, повторяющееся, занимает слишком много места, а с более длинными формами, может даже показаться деспотичным (форма требует от пользователя так много!). Таким образом, они обычно принимают одну или обе из следующих стратегий:
(Редко, в некоторых ситуациях дизайнеры ничего не делают: они просто предполагают, что пользователи будут волшебным образом знать, какие поля требуется обязательно заполнить; если пользователи этого не делают, им просто придется иметь дело с возникающей ошибкой.)
Приложение для кредитных карт Citicards (слева) содержит инструкции, написанные маленьким шрифтом и курсивом. Все поля обязательны для заполнения, если не указано иное в верхней части формы; Форма American Express (справа) вообще не содержала инструкций. В обеих формах были отмечены только необязательные поля: в случае Ситибанка с несколько неясной аббревиатурой опт.
Что не так с этими “стратегиями”? Есть несколько проблем:
Люди не читают инструкции в верхней части форм
Известно, что пользователи не читают инструкции, и еще реже они читают инструкции в верхней части формы. Поля формы кажутся самодостаточными — в конце концов, каждое поле имеет определенную инструкцию — свою метку, зачем нужно читать что-то еще, чтобы заполнить ее?
Даже если люди прочитали инструкции, они могут забыть их.
Вы можете подумать: если пользователи прочитали инструкцию сверху, то как они смогут так быстро забыть? Но они забывают — особенно если форма длинная или если они отвлекаются при заполнении (ситуация, которая часто встречается на мобильных устройствах). И даже если люди не забывают инструкции, вы увеличиваете их когнитивную нагрузку, заставляя помнить ненужную информацию. Другими словами, вы усложняете им задачу. Заполнение формы — это итак задача не из легких для пользователей, почему вы хотите усложнить это еще?
Люди должны анализировать форму, чтобы определить, является ли поле обязательным
Мы увидели, что независимо от того, указали ли вы инструкции в верхней части формы или нет, результат, скорее всего, будет одинаковым — люди будут их игнорировать или забывать. Итак, что происходит, когда пользователь заполняет форму? Как они узнают, обязательно ли поле для заполнения?
Что ж, более прилежные пользователи будут оглядываться, пытаясь выяснить — они анализируют форму и находят поле, помеченное как необязательное (иногда прокручивая страницу выше, как в примере с American Express, где первое необязательное поле появляется ниже мобильного сгиба); если пользователи найдут такое поле, они будут считать, что все, что не отмечено, обязательно для заполнения. Но это требует времени и затрат на взаимодействие — и опять же, зачем вам усложнять заполнение формы для ваших пользователей?
Однако большинство пользователей не будут искать примеров и анализировать форму, они просто сделают предположения. Например, они скажут: «Ну, номер телефона — им действительно не нужен мой номер телефона, не так ли? Может быть, я оставлю это поле пустым ». И даже если они заполняют это поле, необходимость сделать паузу, чтобы решить, нужно ли заполнение, замедляет взаимодействие и делает процесс более длительным и утомительным.(Помните, как бы вам ни хотелось думать иначе, никто не хочет заполнять форму — ни на маленьком, ни на большом экране.) Результатом будет ошибка отправки формы, которая означает, что потребуется еще больше времени на решение проблемы.
Решение простое: отметьте все обязательные поля. Будьте максимально честными и прозрачными: каждое поле, которое необходимо заполнить, отметьте как обязательное.
Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».