Обязательное поле input: Атрибут required | htmlbook.ru

html — Не работает required в форме

Задать вопрос

Вопрос задан 3 года 11 месяцев назад

Изменён 3 года 11 месяцев назад

Просмотрен 829 раз

Все поля имеют атрибут required, обязательное поле, но даже если вообще ничего не заполнять, все равно идет отправка….

<div>
  <form name="formSignup" novalidate="" action="step2-1.html" method="POST">
    <div>
      <h4>
        <span>Контактная информация</span>
      </h4>
      <div>
        <div>
          <div>
            <label for="signupForm.model.lastName">Фамилия</label>
            <input type="text" name="lastName" required><span></span><span></span>
          </div>
        </div>
        <div>
          <div>
            <label for="signupForm.  model.firstName">Имя</label>
            <input type="text" name="firstName" required><span></span><span></span>
          </div>
        </div>
        <div>
          <div>
            <label for="signupForm.model.patronymic">Отчество</label>
            <input type="text" name="patronymic" required><span></span><span></span>
          </div>
        </div>
        <div>
          <div>
            <label>Электронная почта</label>
            <span>Для получения договора и документов об оплате</span>
            <div><input type="email" name="email" required>
              <span>Это поле должно содержать E-Mail в формате [email protected]</span>
            </div>
            <span></span><span></span>
          </div>
        </div>
        <div>
          <div>
            <label>Пароль</label>

            <input type="password" name="password" required><span></span>
            <span></span>
          </div>
        </div>
        <div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <input type="submit" value="&nbsp;	&nbsp;	&nbsp;	Продолжить&nbsp;	&nbsp;	&nbsp;	">
      </div>
    </div>
    <!-- ngIf: isConfirm -->
  </form>
</div>

Почему так?

Как исправить?

Спасибо!

• html
• required

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Техники валидации форм — Блог HTML Academy

Это перевод статьи Ире Адеринокун — «Form validation techniques».

Ни для кого не секрет, что онлайн-формы могут стать серьёзным испытанием для пользователей. Особенно когда они выглядят как список полей для ввода без каких-либо подсказок. Однако мы, как разработчики, можем значительно облегчить жизнь посетителям наших сайтов.

Используем CSS

В CSS существует четыре специальных псевдокласса, применимых к полям формы: :valid (валидное поле), :invalid (невалидное), :required (обязательное) и :optional (необязательное). Их можно использовать, чтобы добавлять некоторые — хотя и весьма ограниченные — подсказки пользователям, заполняющим форму.

Используя :valid и :invalid, мы можем показать пользователю, правильно ли заполнено поле по мере ввода.

Стилизация псевдоклассов :valid и :invalid

Однако с этим способом связана одна проблема: стили применяются до того, как пользователь начнёт работу с формой. Поля, обязательные для заполнения, сразу подсветятся нам как :invalid, а необязательные — как :valid. Это значит, что пользователь, даже не приступив к заполнению формы, может сразу же получить негативную обратную связь. Не очень-то хорошо.

Стилизация состояний :required и :optional сама по себе не особо полезна, поскольку эта информация обычно указывается в подписях к полям формы. Однако мы можем объединить эти состояния с псевдоклассами :valid / :invalid и стилизовать их комбинации. Например, мы хотим показывать лишь положительный результат, когда валидно обязательное к заполнению поле.

Стилизация по :valid и :required

Используем JavaScript

JavaScript даёт намного больше возможностей для улучшения работы пользователей с формами. Давайте рассмотрим в качестве примера три числовых поля, у каждого из которых установлен минимум в 10, максимум в 100 и шаг в 10 единиц.

Устанавливая атрибуты min, max и step, мы можем быть уверены в правильности значения только тогда, когда пользователь использует специальные контролы числового поля. Но что мешает пользователю ввести вручную некорректные данные? Вот что произойдёт, если он вставит 1, 12 и 123 в три поля и отправит форму:

Стандартный тултип валидации

В результате всё, что получит пользователь — это сообщение об ошибке для первого поля. Кроме того, в этом сообщении будет указано лишь одно несоответствие из двух требуемых. Такое поведение можно исправить, изменяя показываемые валидатором сообщения.

Добавляем несколько сообщений об ошибках в один тултип

Валидируя поля, браузер проверяет их по определённому списку потенциальных ошибок. В каждом поле содержится специальный объект validity, включающий в себя список булевых значений, характеризующих ту или иную проверку на валидность. Например, вот такой validity-объект будет у поля, когда пользователь введёт в него 1:

Примечание переводчика: Слово «mismatch» переводится как «несоответствие». Поэтому в значениях patternMismatch, stepMismatch и typeMismatch обратная логика: true — значение не удовлетворяет атрибуту, false — удовлетворяет.

По умолчанию браузер отобразит лишь одну ошибку. Что мы можем сделать, так это проверить все эти значения самостоятельно и, если найдутся ошибки, сохранить их. Как только мы сохраним все ошибки для одного поля, мы можем отобразить весь их список в виде специального сообщения об ошибке при помощи функции setCustomValidity().

Теперь при попытке отправить форму мы увидим вот это:

Отображаем несколько ошибок в одном тултипе

Стало лучше, поскольку теперь будут показываться все сообщения об ошибках, связанные с конкретным полем. Однако другая проблема всё ещё не решена: ошибки по-прежнему показываются лишь для первого поля.

Это ограничение валидации, устанавливаемое браузером. Чтобы его побороть, нам нужно пойти другим путём.

Показываем все ошибки для всех полей

Вместо того, чтобы использовать встроенный тултип, мы можем добавлять сообщения об ошибках напрямую в DOM. Таким образом, все ошибки будут выводиться рядом с соответствующим полем.

Этого можно добиться какой-то парой дополнительных строчек в нашем коде:

Вот что происходит при клике на submit теперь:

Отображаем все ошибки для всех полей в DOM

Используем нестандартные проверки валидности

Иногда встроенной в браузер валидации бывает недостаточно. Нам может понадобиться, чтобы вводимые данные удовлетворяли некоторым дополнительным правилам. Например, чтобы в текстовом поле требовалось указать особые символы.

Так как мы уже проверяем все возможные ошибки вручную в нашей функции CustomValidation.prototype.checkValidity, мы можем просто-напросто добавить туда ещё несколько проверок.

Валидация в реальном времени

Хотя текущий способ выглядит намного лучше, он тоже не без изъянов. Наихудший из недочётов заключается в том, что пользователь не сможет увидеть никаких сообщений, пока не нажмёт на кнопку отправки формы. Было бы гораздо лучше, если бы валидация поля происходила сразу же при его заполнении. Можно выделить три правила для того, чтобы с формой было удобно работать:

1. Требования для каждого поля чётко видны до того, как пользователь начал печатать.
2. Как только пользователь начинает вводить данные, соблюдая требования, он сразу видит индикатор успешного заполнения поля или подсказки, если есть ошибки.
3. Нужно отображать сообщения об ошибках таким образом, чтобы пользователь не мог отправить некорректно заполненную форму.

Пример валидации в реально времени

Если вы хотите попробовать свои силы (и даже сделать получше), вы можете воспользоваться вот этим шаблоном.

Самое важное, что вам нужно знать об обязательных и необязательных полях ввода | by Niki Tisza

Как улучшить дизайн UX формы

Передовой опыт для необязательных и обязательных полей ввода — дизайн, созданный Niki Tisza

Какой из них мы должны использовать для удобного дизайна полей формы?

Обязательные метки сообщите нам, какие поля являются обязательными в форме.

Однако, когда количество обязательных меток или обязательных полей формы превышает число необязательных полей формы, это может создать визуальный беспорядок.

Глядя на эти два варианта, Вариант 2 и Вариант 3, мы визуально можем определить, какой из них более загружен.

Пример использования обязательных и необязательных меток — дизайн изображения выполнен Ники Тисой.

Если мы пометим только необязательных полей , будет применен противоположный подход и будет указано, какие поля не являются обязательными, а какие — нет.

Вариант 1

Один из подходов, когда у нас все обязательные поля помечены звездочкой.

Пример оформления формы с использованием звездочки в качестве индикатора обязательных полей — изображение Ники Тисы

Вариант 2

Этот подход также фокусируется на обязательных полях, помечая обязательные, но мы убираем строку инструкций.

Пример дизайна формы с использованием обязательных меток полей — изображение Ники Тиса

Вариант 3

В этом последнем варианте мы помечаем только необязательные поля.

Пример дизайна формы с маркировкой только необязательных полей ввода — изображение Ники Тиса

Мой любимый ответ: это зависит от .

Это действительно зависит от формы.

Например, если у нас есть форма, где все поля являются обязательными, то вместо того, чтобы помечать каждое из них звездочкой, может быть, это то, что вы могли бы сделать.

Примеры маркировки обязательных полей — дизайн, созданный Ники Тисой

Мы можем сказать « все поля обязательны» в верхней части формы, и добавив эту строку, мы удалим визуальный беспорядок со всеми звездочками.

Еще одна вещь, о которой следует помнить при использовании звездочки. .

Вы, должно быть, видели много форм в Интернете, где звездочки отмечены красным цветом. Но не следуйте этому дизайну.

Вместо этого я бы рекомендовал использовать другой цвет, потому что мы должны сохранить красный цвет для сообщений об ошибках. Выберите что-то очень отличное от красного и отличное от цветовой схемы вашего бренда.

Здесь я использую бирюзовый цвет:

Примеры использования красного и бирюзового цвета на звездочке — дизайн создан Ники Тисой

NN Group рекомендует отмечать обязательные поля в формах.

Они предлагают использовать звездочку для отметки обязательных полей, потому что это простой способ улучшить удобство использования формы.

Только отметка необязательных полей затрудняет заполнение формы.

Глядя на наши три варианта, основанные на предложении NN Group, они рекомендовали бы против Варианта 3. Таким образом, они предлагали либо Вариант 1, либо Вариант 2.

Варианты дизайна UX формы — дизайн, созданный Ники Тисой не будет полным без включения доступности формы.

Что Deque говорит о специальных формах:

• Нам нужно указать, какие поля являются обязательными, добавив «обязательный» текст к метке
• Мы также должны предоставить символ звезды или звездочки (это визуальная индикация обязательных полей формы)
• Нам нужно использовать цвет, чтобы определить, требуется ли элемент управления формой
• Когда дело доходит до разработки формы, мы также необходимо предоставить атрибут HTML 5 и Aria, который сообщает, какие поля являются обязательными.

Правильный ответ по-прежнему, ну, это зависит.

Зависит от формы. Это зависит от продукта.

Например, если мы посмотрим на приложение Picsart и его процесс регистрации и то, как они представляют поле ввода без маркировки ни одного из них:

Это прекрасный пример нарушения правил и лучших практик UX, потому что у них есть веская причина.

В процессе регистрации Picsart все эти поля, т.е. адрес электронной почты, имя, фамилия и имя пользователя отображаются на экране отдельно. Одно поле ввода, один экран и одна кнопка призыва к действию.

Вы можете обойтись без маркировки полей ввода обязательным и необязательным текстом, если сделаете что-то подобное.

Потому что пользователям легко понять, что если они видят одно поле ввода на экране, им нужно заполнить его, чтобы перейти к следующему экрану.

Что я обычно делаю

Если это большая форма с большим количеством полей ввода, и я не могу разбить ее на части, я предпочитаю вариант 1. Вариант 1 — моя версия, и вы не можете неправильно с этим.

Удаление необязательных полей

Другое обсуждение предполагает, что если поле ввода является необязательным, то почему мы вообще отображаем его на экране, если ничего с ним не делаем? Если это не представляет ценности для клиента, почему мы просим об этом?

Итак, это еще одна вещь, которую нужно учитывать и думать, когда вы добавляете необязательное поле на экран.

Давайте спросим себя, так ли необходим ? Вы можете удалить необязательные поля, если они не являются обязательными.

Если компания ничего не делает с данными, зачем нам вообще запрашивать такую ​​информацию?

При разработке формы всегда учитывайте опыт пользователя и всегда спрашивайте себя, является ли поле ввода обязательным или необязательным.

• Если требуется поле ввода, убедитесь, что оно четко обозначено и легко идентифицируется
• Если поле ввода является необязательным, убедитесь, что оно не является обязательным.
• Используйте понятные метки и инструкции для всех полей ввода.

Эта статья является письменной версией моего видео на YouTube, посмотрите, если вам это нравится 😊

Если вы начинающий UX-дизайнер и интересуетесь тем, что происходит в этой области, у меня есть книга для вас. Получите его, пока он свободен от Gumroad.

Если вам понравился этот пост, вот 3 вещи, которые вы можете сделать, чтобы поддержать меня:

1. 👏 Похлопайте статье.
2. 🤞Подпишитесь на меня для получения следующих статей: электронная почта или подписка.
3. 💌 Подпишитесь на мой бесплатный информационный бюллетень (получайте халяву) и канал YouTube , чтобы изучать дизайн UX и UI и повышать свою карьеру.

Конечно, вы всегда можете связаться со мной в Твиттере, чтобы продолжить разговор.

Анатомия доступных форм: Обязательные поля формы

Недавно я пытался заказать кекс на новом сайте, и у меня ничего не вышло. Я выбрал торт на свой вкус, добавил его в корзину, попытался заполнить свой адрес доставки, и началась дорога к хаосу.

Когда я заполнил данные и отправил форму, появилось сообщение «Пожалуйста, заполните адресную строку 2». Кое-как проплыл и зашел в раздел «оплата». Каждый раз, когда я нажимал «отправить», выдавалось одно и то же сообщение: «пожалуйста, заполните необходимое поле». Я просмотрел формы, чтобы увидеть, есть ли в них какая-либо подсказка, определяющая эти обязательные поля, но мои усилия оказались напрасными.

Затем кто-то сказал мне, что обязательные поля будут отображаться красным цветом, если они не заполнены. Если бы человек без инвалидности не мог понять этих простых вещей при заполнении форм, я мог бы представить, что чувствовали бы люди с нарушениями зрения, физическими и когнитивными нарушениями.

Веб-сайты и мобильные приложения собирают широкий спектр данных с помощью форм. В большинстве этих форм есть обязательные поля, что означает, что пользователь должен заполнить эти поля, чтобы успешно отправить форму. Есть несколько способов указать, что конкретное поле формы является обязательным. Ниже мы рассмотрим каждый из способов.

Это вторая запись в моей серии статей о доступных формах. Не стесняйтесь ознакомиться с первой записью в нашей серии о заполнителях.

Как указать обязательное поле

• Укажите необходимый текст в этикетке.
• Предоставьте графическое * изображение на этикетке с соответствующим замещающим текстом.
• Предоставление символа звезды (звездочки).
• Использование цвета для определения необходимости элемента управления формы.
• Предоставление обязательных атрибутов HTML5 и ARIA.

Предоставление необходимого текста на этикетке

Этот метод является одним из старейших методов, требуемый текст предоставляется на видимой этикетке. Для этого метода как пользователи, использующие вспомогательные технологии, так и пользователи, не использующие вспомогательные технологии, будут знать, какой элемент управления формой требуется, поскольку он отображается через этикетку.

Синтаксис

Требуется имя

Предварительный просмотр

Имя Требуется


Поскольку требуемый текст является частью метки, он всегда виден, и вспомогательные технологии будут отображать его для программ чтения с экрана, если элементы управления форм связаны программно.

Предоставьте графическое изображение * Изображение на этикетке с соответствующим замещающим текстом

Иногда описанный выше метод не нравится некоторым дизайнерам. Некоторые предпочитают предоставлять изображение, которое визуально показывает, что требуется конкретный контроль формы. Например, если изображение снабжено соответствующим замещающим текстом, а элементы управления формы программно связаны с изображением, этот метод доступен для вспомогательных технологий.

Синтаксис

Имя

Предоставление символа звездочки (звездочки)

Это один из наиболее распространенных способов уведомления пользователей о необходимости контроля формы. Вместе с этикеткой имеется символ звезды (звездочки). Если метка программно связана с контролем форм, то она доступна вспомогательным технологиям. Чтобы программы чтения с экрана отображали символ «*», параметры пунктуации должны быть установлены на максимальное значение. Иногда, если для пунктуации установлено значение «некоторые знаки препинания» или «нет», программы чтения с экрана игнорируют специальные символы.

Хотя все пользователи средств чтения с экрана могут не знать, как установить параметры детализации, рекомендуется использовать этот метод в сочетании с другим доступным методом в качестве запасного варианта. Пользователи должны быть уведомлены о том, что все поля, отмеченные звездочками, являются обязательными перед формой, поскольку символ звездочек по умолчанию имеет небольшой размер, его следует сделать достаточно большим, чтобы все пользователи могли его воспринимать.

Синтаксис

Все поля, отмеченные *, обязательны для заполнения Имя * Предварительный просмотр Все поля, отмеченные *, обязательны для заполнения Имя * Использование цвета для определения необходимости элемента управления формой Часто дизайнеры используют цвет как метод определения необходимости элемента управления формой. Когда пользователь перемещается в поле формы или выходит из поля формы, цвет элемента управления формы меняется на красный. Этот метод не рекомендуется, так как он недоступен для пользователей со слабым зрением, пользователей с дальтонизмом, пользователей с когнитивными нарушениями и пользователей с нарушениями зрения. Этот метод может быть реализован, если существует альтернативный запасной метод, который представляет собой «визуальную подсказку», которая может помочь всем пользователям определить, является ли элемент управления формы обязательным полем. Предоставление обязательных атрибутов HTML5 и ARIA Атрибут «обязательный» появился в HTML5. Если этот атрибут используется в любом поле формы, он идентифицируется как требуемый вспомогательными технологиями. Обратите внимание, что при использовании обязательного атрибута в средстве чтения с экрана форма объявляет, что поле является обязательным, а также недействительным. Как только поле формы будет заполнено, «недействительное» уведомление не будет объявлено программе чтения с экрана. Синтаксис   Имя   Предварительный просмотр Имя Подобно атрибуту «required» в HTML5, WAI-ARIA представила атрибут «aria-required». Если этот атрибут используется в элементе управления формы, он будет отображаться в соответствии с требованиями вспомогательных технологий. Синтаксис   Имя   Предварительный просмотр Имя В то время как обязательные атрибуты HTML5 и ARIA помогают пользователям вспомогательных технологий, должен быть механизм для зрячих пользователей, чтобы идентифицировать требуемые элементы управления формы с помощью визуальной подсказки, такой как звездочка (*) или графика . Некоторые вспомогательные технологии и браузеры могут не поддерживать эти атрибуты, поэтому рекомендуется также иметь запасной вариант. Заключение Теперь, когда мы рассмотрели несколько способов предоставления доступного механизма для определения необходимого поля, давайте посмотрим, какой метод лучше всего подходит для всех пользователей. Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт