如何在 "setCustomValidity("...");" 之后清除、删除或重置 HTML5 表单验证状态？答案

【问题标题】：How to clear, remove, or reset HTML5 form validation state after "setCustomValidity("...");"?如何在 "setCustomValidity("...");" 之后清除、删除或重置 HTML5 表单验证状态？
【发布时间】：2011-11-13 12:08:07
【问题描述】：

setCustomValidity("..."); 之后如何清除、移除或重置 HTML5 表单验证状态？

在 Firefox 和 Chrome 中设置一个空字符串 setCustomValidity(""); 会关闭表单验证错误消息。我不想关闭表单验证错误消息。我想重置验证状态，以便可以检查下一个答案并保留显示的验证错误消息。如果验证状态没有重置，那么即使是下一个正确答案也会错误地显示验证错误消息。

所以不知何故，“清除”意味着“关闭”？

如果参数是空字符串，则清除自定义错误。

http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#the-constraint-validation-api

这是一个验证测试用例：

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Validation test case</title>
    </head>
    <body>
        <form id="testForm">
            <input type="text" id="answer" pattern="[A-Za-z]+" autofocus required/>
            <input type="submit" value="OK"/>
        </form>

        <script>
            /*jslint browser: true, vars: true, white: true, maxerr: 50, indent: 4 */
            (function ()
            {
                "use strict";

                var form = null;
                var answer = null;

                var isCorrectAnswer = function (value)
                {
                    return (value === "a");
                };

                var closeValidation = function (element)
                {
                    // Close the form validation error message if displayed.
                    element.blur();
                    element.focus();
                };

                var validateForm = function (event)
                {
                    event.preventDefault();
                    event.stopPropagation();

                    var isValidForm = event.target.checkValidity();
                    if (isValidForm)
                    {
                        if (isCorrectAnswer(answer.value))
                        {
                            form.reset();
                            closeValidation(answer);

                            console.log("Correct answer.");
                            alert("Correct answer.");
                        }
                        else
                        {
                            console.log("Incorrect answer.");
                            answer.setCustomValidity("Incorrect answer.");
                            answer.checkValidity();
                            //answer.setCustomValidity("");
                        }
                    }
                };

                window.addEventListener("DOMContentLoaded", function ()
                {
                    form = document.getElementById("testForm");
                    answer = document.getElementById("answer");

                    form.addEventListener("submit", validateForm, false);
                }, false);
            }());
        </script>
    </body>
</html>

键入一个错误答案，除“a”之外的任何字母，然后按 Enter。输入正确答案“a”，然后按 Enter。

在不更改测试用例的情况下，Opera、Firefox 和 Chrome 中的行为是相同的（除了 Chrome 错误）。无论答案是正确还是不正确，验证错误消息都会持续存在。

现在，在取消注释answer.setCustomValidity(""); 之后，Opera 会清除自定义验证错误但不会关闭验证错误消息，这正是我所期望的。另一方面，Firefox 和 Chrome 都清除了自定义验证错误并关闭了验证错误消息（错误？）。

BUG： Chrome 在第一次调用时没有“checkValidity()”。

在 Chrome 中，answer.checkValidity(); 在首次提交后不会显示验证消息。后续提交显示验证错误消息。

http://code.google.com/p/chromium/issues/detail?id=95970

BUG：在 Chrome 中，输入更改时验证错误消息为空白但未关闭。

http://code.google.com/p/chromium/issues/detail?id=95973

Opera 11.51 Build 1087

火狐 6.0.2

谷歌浏览器 13.0.782.220 m

【问题讨论】：

标签： javascript forms html validation

【解决方案1】：

如果在“提交”事件处理程序中调用 setCustomValidity()，则不会显示自定义验证消息。

@tkent：

我确认 Opera 11.50 符合您的预期，但 Firefox 6 和 Chrome 14 没有。

但是，根据标准，Chrome 的行为是正确的。

http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm

如果从 submit() 方法提交的标志未设置，并且 submitter 元素的 no-validate 状态为 false，然后交互验证表单的约束并检查结果：如果结果是否定的（约束验证得出的结论是无效字段并可能通知用户）然后中止这些步骤。

如果从 submit() 方法提交的标志未设置，则触发一个可取消的简单事件，名为 submit，在表单中。如果事件的默认操作被阻止（即如果事件被取消）然后中止这些步骤。否则，继续（实际上是默认的 action 是执行提交）。

浏览器必须在“提交”事件之前调用交互式验证被解雇。您需要在“提交”事件之前调用 setCustomValidity() 如果您希望浏览器显示验证消息。歌剧似乎以错误的顺序处理这些步骤。注意 checkValidity() 在你的代码无论如何都没有效果。 checkValidity() 从不显示验证消息。

http://code.google.com/p/chromium/issues/detail?id=95970

[Bug 11287] 新：元素中的“setCustomValidity”调用应使用“oninput”事件...

@尼克：

元素中的“setCustomValidity”调用应使用“oninput” 事件...

http://lists.w3.org/Archives/Public/public-html/2010Nov/0186.html

Re: [whatwg] 表单元素无效消息

@Mounir Lamouri：

因此，您所做的是使元素在无效事件中有效太晚了。在无效事件之后，Firefox 尝试显示 UI 使用validationMessage，它在表格有效。如果你不想有 UI，你应该取消事件完全但仍然取消提交。你应该使用 onchange/oninput（强调添加）如果您希望表单更改有效性状态提交。

http://www.mail-archive.com/whatwg@lists.whatwg.org/msg23762.html

解决方法是使用“输入”事件处理程序而不是“提交”事件处理程序来验证输入。

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Validation test case</title>
    </head>
    <body>
        <form id="testForm">
            <input type="text" id="answer" pattern="[A-Za-z]+" autofocus required/>
            <input type="submit" value="OK"/>
        </form>

        <script>
            /*jslint browser: true, vars: true, white: true, maxerr: 50, indent: 4 */
            (function (console)
            {
                "use strict";

                var form = null;
                var answer = null;

                var isCorrectAnswer = function (value)
                {
                    return (value === "a");
                };

                var closeValidation = function (element)
                {
                    // Close the form validation error message if displayed.
                    element.blur();
                    element.focus();
                };

                var validateForm = function (event)
                {
                    event.preventDefault();
                    event.stopPropagation();

                    var isValidForm = event.target.checkValidity();
                    if (isValidForm)
                    {
                        console.log("Correct answer.");
                        closeValidation(answer);
                        form.reset();
                    }
                    else
                    {
                        console.log("Incorrect answer.");
                    }
                };

                window.addEventListener("DOMContentLoaded", function ()
                {
                    form = document.getElementById("testForm");
                    answer = document.getElementById("answer");

                    form.addEventListener("submit", validateForm, false);
                    answer.addEventListener("input", function ()
                    {
                        // Only show custom form validation error message if the value matches the pattern.
                        if (answer.value.match(new RegExp(answer.getAttribute("pattern"))))
                        {
                            answer.setCustomValidity(isCorrectAnswer(answer.value) ? "" : "Incorrect answer.");
                        }
                    }, false);
                }, false);
            }(window.console));
        </script>
    </body>
</html>

【讨论】：

tl;dr：不要在“提交”事件中使用 setCustomValidity。它应该在 'submit' 事件之前设置，例如在 'input' 或 'change' 事件中。
但为了获得一致的用户体验，我希望能够告诉用户某个特定字段有问题（例如，没有这样的用户），并使用与我的表单其余部分相同的 UI。跨度>
所以答案基本上是setCustomValidity('')：设置空白字符串会取消验证。
我刚刚点击了这个......它似乎在 chrome 和 safari 中工作，但令人惊讶的是不是 firefox......我输入了错误的字符串.. 验证（oninput 或 onchange）设置验证消息（自定义）世界上一切都很好。然后我去更正它，它的有效电子邮件仍然显示消息。我发现的另一个问题似乎发生在任何浏览器中（对于电子邮件）......是 test@test 通过......没有后缀 .com 或其他......这是怎么回事？