HTML5 添加了无需使用 JavaScript 即可更好地在表单中定义客户端验证的功能。这个概念已经存在，带有“maxlength”和“minlength”等属性。它已经扩展了诸如“required”和“pattern”之类的属性。然而，HTML5 也定义了对这些属性的限制，并且 WebKit 浏览器已经实现了这些限制(可能紧随其后的是 Firefox 和 Opera)。

restrictions in question与使用 display: none 的 CSS/JavaScript 隐藏时表单控件的可见性有关或 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(也不是主流浏览器)都没有使表单控件的样式化变得更容易。 <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 失败并向控制台显示此错误:

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

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

Please select an item in the list

所以，我担心的是 HTML5 是否过于严格，或者我处理这个问题的方式不正确。要么:

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

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

• 每当我使用 JavaScript 动态隐藏表单控件时删除受限属性，这意味着我牺牲了 HTML5 的验证，
• 暂时显示并立即隐藏有问题的表单控件，尽管自 submit 以来我不确定何时会完成此操作事件永远不会被触发，并且可以在不触发 click 的情况下提交表单。提交按钮上的事件，或
• 使用novalidate属性，尽管我仍然会失去 HTML5 验证。

那么我是正确看待这个问题还是遗漏了什么？

最佳答案

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

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

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

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

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

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

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

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

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

关于html - HTML5 中隐藏表单控件的处理有意义吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6944783/