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

Question

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.
• Следующие атрибуты и методы IDL не применяются к элементу: checked,files, list, selectedOption, selectionStart, selectionEnd, selectionDirection, valueAsDate и valueAsNumber IDL;Методы 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 отвечают, не отправляя форму вообще (и не вызывая событие JavaScript submit).Я сейчас сталкиваюсь с ошибкой с элементом <select>.

Сбой Chrome с этой ошибкой для консоли:

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

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

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

---

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

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

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

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

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

Answer 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="http://afarkas.github.com/webshim/demos/index.html" 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;
        });
    });
})();