Html HTML5 中隐藏表单控件的处理有意义吗？

Does the handling of hidden form controls in HTML5 make sense?

提问by KOVIKO

HTML5 added in the ability to better define client-side validation in forms without needing to use JavaScript. The concept already existed with attributes such as "maxlength" and "minlength". It's been extended with attributes such as "required" and "pattern". However, HTML5 has also defined limits on these attributes and WebKit browsers have implemented these restrictions (likely with Firefox and Opera not far behind).

HTML5 添加了在表单中更好地定义客户端验证的能力，而无需使用 JavaScript。该概念已经存在，具有诸如“maxlength”和“minlength”之类的属性。它已经扩展了诸如“必需”和“模式”之类的属性。然而，HTML5 也定义了对这些属性的限制，并且 WebKit 浏览器已经实现了这些限制（Firefox 和 Opera 可能紧随其后）。

The restrictions in questionhave to do with a form control's visibility when hidden by CSS / JavaScript using the display: noneor visibility: hiddenCSS rules. The restrictions are defined as:

当使用或CSS 规则被 CSS / JavaScript 隐藏时，有问题的限制与表单控件的可见性有关。限制定义为：display: nonevisibility: hidden

4.10.7.1.1 Hidden state

When an inputelement's type attribute is in the Hidden state [...] The inputelement represents a value that is not intended to be examined or manipulated by the user.

[Also,]

• The valueIDL attribute applies to this element and is in mode default.
• The following content attributes must not be specified and do not apply to the element: accept, alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, pattern, placeholder, readonly, required, size, src, step, and width.
• The following IDL attributes and methods do not apply to the element: checked, files, list, selectedOption, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumberIDL attributes; select(), setSelectionRange(), stepDown(), and stepUp()methods.
• The inputand changeevents do not apply.

4.10.7.1.1 隐藏状态

当input元素的 type 属性处于 Hidden 状态时 [...] 该input元素表示不打算由用户检查或操作的值。

[还，]

• 该valueIDL属性适用于这个元素，并在模式默认。
• 下面的内容属性，不得指定，并不适用于元素：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，和valueAsNumberIDL属性; select()、setSelectionRange()、stepDown()、 和stepUp()方法。
• 在input与change事件不适用。

At first glance, it makes sense to say that validation shouldn't need to be performed on form controls that the user has no control over. And, for form's built using default form control elements, these make sense. But now, an issue has arisen with building remote form controls.

乍一看，可以说不需要对用户无法控制的表单控件执行验证是有道理的。而且，对于使用默认表单控件元素构建的表单，这些是有意义的。但是现在，构建远程表单控件出现了问题。

Neither HTML5 nor CSS3 (nor the major browsers) has made it much easier to style form controls. <select>elements are still greatly restricted in terms of styling and both <input>and <button>elements have annoyingly different styling rules (and for non-IE browsers, near impossible CSS browser-targeting). As such, when my designers want "pretty" form controls, they may need to be rebuilt using HTML, CSS, and JavaScript. The simulated control will remotely control the real control which is hidden by CSS. This applies to <select>, <input type="checkbox">and <input type="radio">elements for me, all of which cause an issue in WebKit browsers when given the requiredattribute.

HTML5 和 CSS3（也不是主流浏览器）都没有让表单控件的样式变得更容易。<select>元素在样式方面仍然受到很大限制，并且<input>和<button>元素具有令人讨厌的不同样式规则（对于非 IE 浏览器，几乎不可能以 CSS 浏览器为目标）。因此，当我的设计师想要“漂亮”的表单控件时，可能需要使用 HTML、CSS 和 JavaScript 重新构建它们。模拟控件将远程控制由 CSS 隐藏的真实控件。这适用于<select>,<input type="checkbox">和<input type="radio">元素，当给定required属性时，所有这些都会导致 WebKit 浏览器出现问题。

Since the HTML5 specification states that certain attributes, such as required, cannot exist on hidden form controls, browsers will be required to respond to invalid attributes. WebKit browsers are responding by not submitting the form at all (and not triggering JavaScript's submitevent). I am running into the error right now with a <select>element.

由于 HTML5 规范规定某些属性（例如 ）required不能存在于隐藏的表单控件上，因此浏览器将需要响应无效的属性。WebKit 浏览器通过根本不提交表单来响应（并且不触发 JavaScript 的submit事件）。我现在遇到了一个<select>元素的错误。

Chrome fails with this error to the console:

Chrome 失败，控制台出现此错误：

An invalid form control with name='element-name' is not focusable.

name=' element-name'的无效表单控件不可聚焦。

Safari fails by showing a grey bar at the bottom of the window with the message:

Safari 通过在窗口底部显示带有消息的灰色条而失败：

Please select an item in the list

请在列表中选择一个项目

---

---

So, my concern is whether HTML5 is too restricting or I am approaching this issue incorrectly. Either:

所以，我担心的是 HTML5 是否过于严格，或者我是否错误地处理了这个问题。任何一个：

1. HTML5's specification is flawed and adds an extra restriction without another solution.HTML5 assumes that if a form control is not visible, the user should not be able to interact with it. This prevents developers from utilizing HTML5's validation attributes for elements that we control remotely while leaving the original form control hidden. We still don't have the ability to create our custom controls using only CSS which requires that we still build them ourselves.
2. I am handling remote form controls incorrectly.as I am using an "old" technique to solve a problem that very well may have been redefined, it's possible that my approach is outdated. It's also possible that, since WebKit are the only one handling this restriction at the moment, WebKit has a workaround for this that I haven't found yet.

1. HTML5 的规范是有缺陷的，并在没有其他解决方案的情况下增加了额外的限制。HTML5 假定如果表单控件不可见，则用户应该无法与其交互。这可以防止开发人员对我们远程控制的元素使用 HTML5 的验证属性，同时隐藏原始表单控件。我们仍然无法仅使用 CSS 创建自定义控件，这需要我们自己构建它们。
2. 我正在错误地处理远程表单控件。由于我正在使用“旧”技术来解决一个可能已经重新定义的问题，因此我的方法可能已经过时了。也有可能，由于 WebKit 是目前唯一处理此限制的工具，因此 WebKit 有一个我尚未找到的解决方法。

The only workarounds that I can think of at the moment are to

目前我能想到的唯一解决方法是

• Remove the restricted attributes whenever I dynamically hide a form control with JavaScript, which would mean that I sacrifice HTML5's validation,
• Temporarily display and immediately hide the offending form controls, though I'm unsure when this would be done since the submitevent is never fired and it's possible to submit a form without firing the clickevent on the submission button, or
• Use the novalidateattribute, though I'd still lose the HTML5 validation.

• 每当我使用 JavaScript 动态隐藏表单控件时删除受限属性，这意味着我牺牲了 HTML5 的验证，
• 暂时显示并立即隐藏有问题的表单控件，但我不确定何时会这样做，因为该submit事件从未被触发，并且可以提交表单而不触发click提交按钮上的事件，或者
• 使用该novalidate属性，但我仍然会丢失 HTML5 验证。

So am I looking at this correctly or am I missing something?

那么我是正确看待这个还是我错过了什么？

采纳答案by alexander farkas

First you do mix up two things. If the HTML5 specification says hidden state, the specification only means an input element with an type attribute set to the value "hidden". In this case, the input is not validated, which means, the input can not be invalid. And the browser does not abort form submission.

首先，您确实混淆了两件事。如果 HTML5 规范说隐藏状态，则规范仅表示 type 属性设置为值“隐藏”的输入元素。在这种情况下，输入没有被验证，这意味着输入不能是无效的。并且浏览器不会中止表单提交。

Your problem is another one. You have a true invalid element, which is only visually hidden (using display: none) and replaced by another element (or by a set of other elements). In your case the problem is the following: By specification in case of interactive form validation the browser has to focus the first invalid element and show at least for this element a validation message.

你的问题是另一个问题。你有一个真正的无效元素，它只是在视觉上隐藏（使用 display: none）并被另一个元素（或一组其他元素）替换。在您的情况下，问题如下：在交互式表单验证的情况下，浏览器必须关注第一个无效元素并至少为该元素显示验证消息。

The problem is that a browser can neither focus a hidden element nor show a validation message below this element. Which means that the browser stops form submission, but has an odd UI to show the validation problems.

问题是浏览器既不能聚焦隐藏元素，也不能在该元素下方显示验证消息。这意味着浏览器停止表单提交，但有一个奇怪的 UI 来显示验证问题。

Now to your question: Does this make sense? Yes, it does! If you change the UI of an form element you have to implement also UI for the validation message. (If you want to customize something, you have customize everything you want to use). HTML5 gives you an API to achieve exactly this.

现在回答你的问题：这有意义吗？是的，它确实！如果更改表单元素的 UI，则还必须为验证消息实现 UI。（如果你想定制一些东西，你已经定制了你想要使用的一切）。HTML5 为您提供了一个 API 来实现这一点。

You have to bind the invalid event of your select element, then prevent the default action (if it's the first invalid event of the form) and place your own validation tooltip to styled select element.

您必须绑定 select 元素的 invalid 事件，然后阻止默认操作（如果它是表单的第一个无效事件）并将您自己的验证工具提示放置到样式化的 select 元素。

In my HTML5 form polyfill (webshims library), I'm already using code to link a native element (with API) with another element + generating simply validation tooltips.

在我的 HTML5 表单 polyfill（webshims 库）中，我已经在使用代码将本机元素（使用 API）与另一个元素链接+生成简单的验证工具提示。

I have created a simple jsfiddle, which mimics a select-replacement and shows how to achieve HTML5 form validation with custom form controls. You can find the example hereand below:

我创建了一个简单的 jsfiddle，它模仿了选择替换并展示了如何使用自定义表单控件实现 HTML5 表单验证。您可以在此处和下方找到示例：

HTML

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

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;
        });
    });
})();