HTML5 добавил возможность лучше определять проверку на стороне клиента в формах без необходимости использования JavaScript. Концепция уже существовала с такими атрибутами, как «максимальная длина» и «минимальная длина». Он был расширен такими атрибутами, как «обязательный» и «шаблон». Однако HTML5 также определил ограничения на эти атрибуты, и браузеры WebKit реализовали эти ограничения (вероятно, Firefox и Opera не сильно отстают).
Рассматриваемые ограничения связаны с видимостью элемента управления формы, когда он скрыт с помощью CSS / JavaScript с использованием display: none
или visibility: hidden
правила CSS . Ограничения определены как:
4.10.7.1.1 Скрытое состояние
Когда атрибут типа элемента
input
находится в скрытом состоянии [...] Элементinput
представляет собой значение, которое не предназначено для проверки или манипулирования пользователем.[Кроме того,]
- IDL-атрибут
значение
применяется к этому элементу и находится в режиме по умолчанию.- Следующие атрибуты содержимого не могут быть указаны и не применяются к элементу:
accept
,alt
,autocomplete
,checked
,dirname
,formaction
,formenctype
,formmethod
,formnovalidate
,formtarget
,высота
,список
,макс
,максимальная длина
,мин
,кратное
,шаблон
,заполнитель
,только для чтения
,требуется
,размер
,src
,step
ишириной
.- Следующие атрибуты и методы IDL не применяются к элементу:
проверено
,файлы
,список
,selectedOption
,] selectionStart
,selectionEnd
,selectionDirection
,valueAsDate
иvalueAsNumber
IDL-атрибуты; Методыselect ()
,setSelectionRange ()
,stepDown ()
иstepUp ()
.- События входа
и
изменения
не применяются.
На первый взгляд, имеет смысл сказать, что проверка не должна выполняться для элементов управления формы, которые пользователь не может контролировать. И для формы, построенной с использованием элементов управления формой по умолчанию, это имеет смысл.Но теперь возникла проблема со сборкой удаленных элементов управления формой.
Ни HTML5, ни CSS3 (ни основные браузеры) не упростили стилизацию элементов управления формами. Элементы
по-прежнему сильно ограничены с точки зрения стиля, и оба элемента
и
имеют досадно разные правила стилизации (и для не- Браузеры IE, почти невозможный таргетинг на браузер CSS). Таким образом, когда моим дизайнерам нужны «красивые» элементы управления формой, их может потребоваться перестроить с использованием HTML, CSS и JavaScript. Смоделированный элемент управления будет удаленно управлять реальным элементом управления, скрытым с помощью CSS. Это применимо к элементам
,
и
для меня, все из которых вызывают проблема в браузерах WebKit, когда задан обязательный атрибут .
Поскольку в спецификации HTML5 указано, что определенные атрибуты, такие как required
, не могут существовать в элементах управления скрытой формы, браузеры должны будут реагировать на недопустимые атрибуты. Браузеры WebKit в ответ не отправляют форму (и не запускают событие JavaScript submit
). Я столкнулся с ошибкой прямо сейчас с элементом
.
Chrome выдает следующую ошибку в консоли:
Недопустимый элемент управления формой с именем = ' имя-элемента ' не может быть сфокусирован.
Safari не работает, показывая серую полосу в нижней части окна с сообщением:
Выберите элемент в списке
Итак, меня беспокоит, не слишком ли ограничивает HTML5 или я подхожу к этой проблеме неправильно. . Либо:
Единственные обходные пути, которые я могу придумать на данный момент, - это
submit
никогда не запускается, и можно отправить форму без запуска события click
на кнопке отправки или novalidate
, хотя я все равно потеряю проверку HTML5. Так я правильно смотрю или что-то упустил?