HTML5提供了更好地定义客户端表单验证的能力,而无需使用JavaScript。这个概念已经存在于像“maxlength”和“minlength”这样的属性中。它已经通过属性如“required”和“pattern”进行扩展。然而,HTML5也对这些属性进行了限制,WebKit浏览器已经实现了这些限制(Firefox和Opera可能也不远了)。
所谓的限制涉及到当表单控件被CSS/JavaScript隐藏时,使用"display: none"或"visibility: hidden"的CSS规则。这些限制定义为:
4.10.7.1.1 隐藏状态
当一个元素的type属性处于隐藏状态[...],元素代表一个不打算由用户检查或操作的值。
[同时,]
乍一看,似乎没有必要对用户无法控制的表单控件进行验证。对于使用默认表单控件元素构建的表单来说,这是有道理的。但现在,使用远程表单控件出现了问题。
value
IDL属性适用于此元素,并且处于默认模式。- 以下内容属性不得指定,并且不适用于该元素:
以下 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
。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">
元素,在添加required
属性时会在 WebKit 浏览器中引起问题。由于HTML5规范指定,某些属性(如
required
)不能存在于隐藏的表单控件上,因此浏览器将需要响应无效属性。 WebKit浏览器通过根本不提交表单(而不触发JavaScript的submit
事件),做出了回应。 我目前正在使用<select>
元素遇到这个错误。Chrome会在控制台中出现以下错误:
具有名称='element-name'的无效表单控件无法聚焦。
Safari则在窗口底部显示灰色条,并显示以下消息:
请在列表中选择一个项目
因此,我的关注点是HTML5是否过于严格,或者我是否处理此问题的方式不正确。它可能是以下两种情况之一:
- HTML5规范有缺陷并添加了另一个没有其他解决方案的限制。HTML5假定如果表单控件不可见,则用户不应该能够与其交互。这使开发人员无法利用HTML5的验证属性来控制我们远程控制的元素,同时将原始表单控件保持隐藏。我们仍然无法仅使用CSS创建自定义控件,需要自己构建它们。
- 我处理远程表单控件不当。由于我使用了一种“旧”技术来解决一个可能已被重新定义的问题,所以我的方法可能已经过时。也有可能,由于目前只有WebKit处理此限制,WebKit具有我尚未发现的解决方法。
目前我能想到的唯一解决方法是:
- 每当我使用JavaScript动态隐藏表单控件时,删除受限属性,这意味着我将牺牲HTML5的验证功能。
- 临时显示并立即隐藏有问题的表单控件,但我不确定何时执行此操作,因为从未触发
submit
事件,而且提交按钮上也可能没有click
事件。使用 novalidate
属性,尽管我仍然会失去HTML5验证。所以我是看对了还是漏掉了什么?