HTML5中隐藏的表单控件的处理是否有意义？

增加了HTML5，可以更好地在窗体中定义客户端验证，而无需使用JavaScript。该概念已经存在于诸如“maxlength”和“minlength”之类的属性中。它已被扩展为诸如“必需”和“模式”等属性。但是，HTML5还定义了这些属性的限制，WebKit浏览器已经实现了这些限制(可能与Firefox和Opera不相称)。

restrictions in question与CSS / JavaScript使用display：none或visibility：hidden CSS规则隐藏时的表单控件的可见性有关。限制定义为：

4.10.7.1.1 Hidden state

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

[Also,]

• The value IDL 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,selectedOption,selectionStart,selectionEnd,selectionDirection,valueAsDate,and valueAsNumber IDL attributes; select(),setSelectionRange(),stepDown(),and stepUp() methods.
• The input and change events do not apply.

乍一看，说出验证不应该在用户控制的表单控件上执行。而且，对于使用默认表单控件元素构建的表单，这些都是有意义的。但现在，构建远程表单控件已经出现了一个问题。

HTML5和CSS3(也不是主要的浏览器)都使得样式窗体控件变得更加容易。 <选择>元素在造型方面仍然受到很大限制，并且< input>和< button>元素具有令人不安的不同风格规则(对于非IE浏览器，接近不可能的CSS浏览器定位)。因此，当我的设计师想要“漂亮”的表单控件时，它们可能需要使用HTML，CSS和JavaScript进行重建。模拟控件将远程控制CSS隐藏的实际控件。这适用于< select>，< input type =“checkBox”>和< input type =“radio”>在给定所需属性时，所有这些都会在WebKit浏览器中引起问题。

由于HTML5规范表明，某些属性(例如必需)不能存在于隐藏的表单控件上，所以浏览器将需要响应无效的属性。 WebKit浏览器通过不提交表单(而不是触发JavaScript的提交事件)进行响应。我现在遇到了一个< select>元件。

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

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

在窗口底部显示一个灰色条，并显示以下消息，Safari将失败：

Please select an item in the list

所以，我关心的是HTML5是否太限制，或者我正在接近这个问题。或者：

> HTML5的规范是有缺陷的，并增加了额外的限制，没有另一个解决方案。假设如果窗体控件不可见，则用户不应该与其进行交互。这样可以防止开发人员将HTML的验证属性用于我们远程控制的元素，同时将原始窗体控件隐藏起来。我们仍然没有能力使用CSS来创建我们的自定义控件，这需要我们自己来构建它们。
>我正在处理远程表单控件。由于我使用“旧”技术来解决可能重新定义的问题，所以我的方法可能已经过时了。还有可能的是，由于WebKit目前是唯一一个处理此限制的程序，因此WebKit有一个我尚未找到的解决方法。

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

>当我用JavaScript动态隐藏表单控件时，删除受限的属性，这意味着我牺牲了HTML5的验证，
>暂时显示并立即隐藏违规表单控件，尽管我不确定何时完成此操作，因为提交事件不会被触发，并且可以提交表单而不会在提交按钮上触发点击事件，或者
>使用novalidate属性，尽管我仍然会失去HTML5验证。

所以我正在看这个是正确的还是我错过的东西？

附：对不起长度。休息后的一切都是我的“tl; dr”。

解决方法

首先你会混合两件事情。如果HTML5规范表示隐藏状态，则spec仅表示将type属性设置为“hidden”值的输入元素。在这种情况下，输入未被验证，这意味着输入不能无效。浏览器不会中止表单提交。

你的问题是另一个问题。你有一个真正的无效元素，它只能在视觉上被隐藏(使用display：none)，并由另一个元素(或一组其他元素)替代。在您的情况下，问题如下：通过规范在交互式表单验证的情况下，浏览器必须集中第一个无效元素，并至少显示此元素一个验证消息。问题是，浏览器既不能集中隐藏的元素，也不能在该元素下面显示验证消息。这意味着浏览器停止表单提交，但是具有奇怪的UI来显示验证问题。

现在给你：这有道理吗？是的，它确实！如果您更改表单元素的UI，那么您还必须实现验证消息的UI。 (如果你想自定义某些东西，你已经定制了你想要使用的所有东西)。 HTML5给你一个API来实现这一点。

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

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

我创建了一个简单的jsfiddle，它模仿一个选择替换，并显示如何使用自定义表单控件实现HTML5表单验证。你可以找到example here。