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, list, 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

http://stackoverflow.com/questions/6944783/does-the-handling-of-hidden-form-controls-in-html5-make-sense

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:HTML5中隐藏的表单控件的处理是否有意义?