Имеет ли смысл управление скрытыми формами в HTML5?

HTML5 добавил возможность лучше определять проверку на стороне клиента в формах без необходимости использования JavaScript. Концепция уже существовала с такими атрибутами, как "maxlength" и "minlength". Он был расширен такими атрибутами, как "required" и "pattern". Тем не менее, HTML5 также определил ограничения для этих атрибутов, и браузеры WebKit внедрили эти ограничения (вероятно, с Firefox и Opera не сильно отстали).

Рассматриваемые ограничения связаны с видимостью элемента управления формы при скрытии с помощью CSS/JavaScript с использованием display: none или visibility: hidden правила CSS. Ограничения определены как:

4.10.7.1.1 Скрытое состояние

Когда input атрибут типа элемента находится в скрытом состоянии [...] input элемент представляет собой значение, которое не предназначено, чтобы быть рассмотрено или манипулировать пользователем.

[Также,]

Атрибут value IDL применяется к этому элементу и находится в режиме по умолчанию.

Следующие атрибуты содержимого не должны быть указаны и не применяются к элементу: accept, alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, pattern, placeholder, readonly для required size src step width readonly, required, size, src, step и width.

Следующие атрибуты и методы IDL не применяются к элементу: checked, files, list, selectedOption, selectionStart, selectionEnd, selectionDirection, valueAsDate и valueAsNumber IDL атрибуты; setSelectionRange() select(), setSelectionRange(), stepDown() и stepUp().

События input и change не применяются.

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

Ни HTML5, ни CSS3 (ни основные браузеры) не сделали так, чтобы стилизовать элементы управления формы намного проще. Элементы <select> по-прежнему сильно ограничены с точки зрения стиля, и оба элемента <input> и <button> имеют досадно разные правила стиля (и для браузеров, не относящихся к IE, почти невозможна ориентация на браузер CSS). Поэтому, когда мои дизайнеры хотят иметь "красивые" элементы управления формой, их, возможно, придется перестраивать с использованием HTML, CSS и JavaScript. Имитированное управление будет дистанционно управлять реальным управлением, скрытым CSS. Это относится к элементам <select>, <input type="checkbox"> и <input type="radio"> для меня, которые вызывают проблему в браузерах WebKit, когда задан required атрибут.

Поскольку в спецификации HTML5 указано, что определенные атрибуты, такие как required, не могут существовать в скрытых элементах управления формой, браузеры должны будут реагировать на недопустимые атрибуты. Браузеры WebKit отвечают, не отправляя форму вообще (и не вызывая событие submit JavaScript). Я сталкиваюсь с ошибкой прямо сейчас с элементом <select>.

Chrome терпит неудачу с этой ошибкой к консоли:

Недопустимый элемент управления формы с name = 'element-name' не может быть сфокусирован.

Safari терпит неудачу, показывая серую полосу в нижней части окна с сообщением:

Пожалуйста, выберите элемент в списке

Итак, меня беспокоит, слишком ли HTML5 ограничивает или я неправильно подхожу к этому вопросу. Или:

Спецификация HTML5 имеет недостатки и добавляет дополнительные ограничения без другого решения. HTML5 предполагает, что если элемент управления формы не виден, пользователь не должен иметь возможность взаимодействовать с ним. Это не позволяет разработчикам использовать атрибуты проверки HTML5 для элементов, которыми мы управляем удаленно, оставляя скрытым исходный элемент управления формы. У нас до сих пор нет возможности создавать наши собственные элементы управления, используя только CSS, что требует, чтобы мы все равно строили их сами.
Я неправильно обрабатываю удаленные элементы управления. поскольку я использую "старую" технику для решения проблемы, которая вполне могла быть переопределена, возможно, мой подход устарел. Также возможно, что поскольку WebKit является единственным, который в настоящее время обрабатывает это ограничение, у WebKit есть обходной путь, которого я пока не нашел.

Единственные обходные пути, которые я могу придумать на данный момент, это

Удалять ограниченные атрибуты всякий раз, когда я динамически скрываю элемент управления формы с помощью JavaScript, что означало бы, что я жертвую проверкой HTML5,
Временно отобразить и сразу скрыть элементы управления формы, вызывающие оскорбления, хотя я не уверен, когда это будет сделано, поскольку событие submit никогда не запускается и можно отправить форму, не вызывая событие click на кнопке отправки, или
Используйте атрибут novalidate, хотя я все равно потеряю проверку HTML5.

Так я правильно смотрю на это или я что-то упускаю?

Ответ 1

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

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

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

Теперь к вашему вопросу: имеет ли это смысл? Да, это так! Если вы изменяете пользовательский интерфейс элемента формы, вы должны также реализовать пользовательский интерфейс для сообщения проверки. (Если вы хотите что-то настроить, вы должны настроить все, что вы хотите использовать). HTML5 дает вам API для достижения именно этого.

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

В моем полифилле формы HTML5 (библиотека webshims) я уже использую код для связи нативного элемента (с API) с другим элементом + генерации просто подсказок для проверки.

Я создал простой jsfiddle, который имитирует замену выбора и показывает, как добиться проверки формы HTML5 с помощью пользовательских элементов управления формы. Вы можете найти пример здесь и ниже:

HTML

<form class="example">
    <div>
        <select name="test" required>
            <option value="">empty </option>
            <option>sdadsa</option>
        </select>
    </div>

    <div>
        <input type="submit" />
    </div>
</form>

<p><a href="#" onclick="location.href='http://afarkas.github.com/webshim/demos/index.html'; return false;" target="_blank">uses the webhsims library</a>

JavaScript

(function() {
    "use strict";
    webshims.polyfill('forms dom-support');

    $(function() {
        $('select').each(function(){
            var visualReplacement = $('<span tabinde="0">replaced select</select>');
            $(this).after(visualReplacement).hide();
            // Bind the visual element to the API element
            webshims.addShadowDom(this, visualReplacement);
        });
        $('form').on('firstinvalid', function(e){
            webshims.validityAlert.showFor(e.target);
            // Remove native validation
            return false;
        });
    });
})();