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

Question

HTML5增加了在不需要使用JavaScript的情况下更好地定义表单中的客户端验证的能力.这个概念已经存在,例如"maxlength"和"minlength".它已经扩展了"必需"和"模式"等属性.但是,HTML5还定义了对这些属性的限制,而WebKit浏览器已经实现了这些限制(可能与Firefox和Opera相差不远).

该问题的限制有当CSS/JavaScript的使用隐藏的表单控件的知名度做display: none或visibility: hiddenCSS规则.限制定义为:

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事件不适用.

乍一看,有必要说不需要对用户控制的表单控件执行验证.而且,对于使用默认表单控件元素构建的表单,这些都是有意义的.但现在,构建远程表单控件出现了一个问题.

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因控制台错误而失败:

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

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

请在列表中选择一个项目

---

所以,我担心的是HTML5是否过于严格,或者我是否错误地接近了这个问题.或者:

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

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

• 每当我使用JavaScript动态隐藏表单控件时,都会删除受限制的属性,这意味着我会牺牲HTML5的验证,
• 暂时显示并立即隐藏有问题的表单控件,但我不确定何时会执行此操作,因为submit事件永远不会被触发,并且可以提交表单而不click在提交按钮上触发事件,或者
• 使用该novalidate属性,但我仍然失去了HTML5验证.

我正确地看着这个还是我错过了什么？

PS抱歉这个长度.休息后的一切都是我的"tl; dr".

Answer 1

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

你的问题是另一个问题.你有一个真正的无效元素,它只是在视觉上隐藏(使用display:none)并被另一个元素(或一组其他元素)替换.在您的情况下,问题如下:在交互式表单验证的情况下,浏览器必须聚焦第一个无效元素,并至少为此元素显示验证消息.问题是,浏览器既不能聚焦隐藏元素,也不能在此元素下面显示验证消息.这意味着浏览器停止表单提交,但有奇怪的UI来显示验证问题.

现在给你:这有意义吗？是的,它确实!如果更改表单元素的UI,则还必须实现验证消息的UI.(如果要自定义某些内容,则可以自定义要使用的所有内容).HTML5为您提供了一个API来实现这一目标.

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

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

我创建了一个简单的jsfiddle,它模仿了一个select-replacement,并展示了如何使用自定义表单控件实现HTML5表单验证.你可以在这里找到这个例子.