Javascript 如何在“setCustomValidity("...");”之后清除、删除或重置 HTML5 表单验证状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7357192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to clear, remove, or reset HTML5 form validation state after "setCustomValidity("...");"?
提问by XP1
How to clear, remove, or reset HTML5 form validation state after setCustomValidity("...");?
如何清除、删除或重置 HTML5 表单验证状态setCustomValidity("...");？
Setting an empty string, setCustomValidity("");, in Firefox and Chrome closes the form validation error message. I do not want to close the form validation error message. I want to reset the validation state so that the next answer can be checked and also to keep the displayed validation error message. If the validation state is not reset, then even the next, correct answer will incorrectly show a validation error message.
setCustomValidity("");在 Firefox 和 Chrome 中设置空字符串 , 会关闭表单验证错误消息。我不想关闭表单验证错误消息。我想重置验证状态，以便可以检查下一个答案并保留显示的验证错误消息。如果验证状态没有被重置，那么即使是下一个正确的答案也会错误地显示验证错误消息。
So somehow, "clear" means "close"?
所以不知何故，“清晰”意味着“关闭”？
If the argument is the empty string, clears the custom error.
如果参数是空字符串，则清除自定义错误。
Here is a validation test case:
这是一个验证测试用例：
<!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>
Type an incorrect answer, any letters(s) but "a", and press Enter. Type the correct answer "a", and press Enter.
键入不正确的答案、除“a”以外的任何字母，然后按 Enter。输入正确答案“a”，然后按 Enter。
Without changes to the test case, the behavior is the same in Opera, Firefox, and Chrome (except the Chrome bugs). The validation error message persists regardless if the answer is correct or incorrect.
在不更改测试用例的情况下，Opera、Firefox 和 Chrome 中的行为是相同的（Chrome 错误除外）。无论答案正确还是不正确，验证错误消息都会持续存在。
Now, after answer.setCustomValidity("");is uncommented, Opera clears the custom validation error but does not close the validation error message, which is what I expect. On the other hand, Firefox and Chrome both clear the custom validation error and close the validation error message (bug?).
现在，在answer.setCustomValidity("");取消注释之后，Opera 会清除自定义验证错误但不会关闭验证错误消息，这正是我所期望的。另一方面，Firefox 和 Chrome 都清除自定义验证错误并关闭验证错误消息（错误？）。
BUG:Chrome doesn't "checkValidity()" when first invoked.
BUG：Chrome 在第一次调用时不会“checkValidity()”。
In Chrome, answer.checkValidity();doesn't show the validation message after the first submit. Subsequent submits show the validation error message.
在 Chrome 中，answer.checkValidity();第一次提交后不显示验证消息。后续提交显示验证错误消息。
http://code.google.com/p/chromium/issues/detail?id=95970
http://code.google.com/p/chromium/issues/detail?id=95970
BUG:In Chrome, the validation error message is blanked but not closed when the input is changed.
BUG：在 Chrome 中，当输入更改时，验证错误消息为空白但未关闭。
http://code.google.com/p/chromium/issues/detail?id=95973
http://code.google.com/p/chromium/issues/detail?id=95973
Opera 11.51 Build 1087
歌剧 11.51 版本 1087
Firefox 6.0.2
火狐 6.0.2
Google Chrome 13.0.782.220 m
谷歌浏览器 13.0.782.220 m
采纳答案by XP1
A custom validation message is not shown if setCustomValidity() is called in 'submit' event handler.
如果在“提交”事件处理程序中调用 setCustomValidity()，则不会显示自定义验证消息。
@tkent:
@tkent：
I confirmed Opera 11.50 worked as your expectation, but Firefox 6 and Chrome 14 didn't.
However, Chrome's behavior is correct according to the standard.
- If the submitted from submit() method flag is not set, and the submitter element's no-validate state is false, then interactively validate the constraints of form and examine the result: if the result is negative (the constraint validation concluded that there were invalid fields and probably informed the user of this) then abort these steps.
- If the submitted from submit() method flag is not set, then fire a simple event that is cancelable named submit, at form. If the event's default action is prevented (i.e. if the event is canceled) then abort these steps. Otherwise, continue (effectively the default action is to perform the submission).
Browsers must invoke the interactive validation BEFORE 'submit' event is fired. You need to call setCustomValidity() before 'submit' event if you want a browser to show a validation message. Opera seems to handle these steps in incorrect order. Note that checkValidity() in your code has no effect anyway. checkValidity() never shows a validation message.
我确认 Opera 11.50 符合您的预期，但 Firefox 6 和 Chrome 14 没有。
但是，根据标准，Chrome 的行为是正确的。
- 如果submit()方法中的submit()方法标志没有设置，并且submitter元素的no-validate状态为false，那么交互验证form的约束并检查结果：如果结果是否定的（约束验证的结论是有无效的字段并可能通知用户这一点）然后中止这些步骤。
- 如果从 submit() 方法标志未设置，则在 form.submit() 方法中触发一个名为 submit 的可取消的简单事件。如果事件的默认操作被阻止（即如果事件被取消），则中止这些步骤。否则，继续（实际上默认操作是执行提交）。
浏览器必须在触发“提交”事件之前调用交互式验证。如果您希望浏览器显示验证消息，则需要在 'submit' 事件之前调用 setCustomValidity()。Opera 似乎以错误的顺序处理这些步骤。请注意，代码中的 checkValidity() 无论如何都不起作用。checkValidity() 从不显示验证消息。
http://code.google.com/p/chromium/issues/detail?id=95970
http://code.google.com/p/chromium/issues/detail?id=95970
[Bug 11287] New: 'setCustomValidity' call in element should use 'oninput' event...
[错误 11287] 新功能：元素中的“setCustomValidity”调用应使用“oninput”事件...
@Nick:
@缺口：
'setCustomValidity' call in element should use 'oninput' event...
元素中的“setCustomValidity”调用应使用“oninput”事件...
http://lists.w3.org/Archives/Public/public-html/2010Nov/0186.html
http://lists.w3.org/Archives/Public/public-html/2010Nov/0186.html
Re: [whatwg] Form element invalid message
回复：[whatwg] 表单元素无效消息
@Mounir Lamouri:
@穆尼尔·拉穆里：
So, what you do is making the element valid in the invalid event which is too late. After the invalid event, Firefox tries to show the UI using the validationMessage which return the empty string when the form is valid. You should cancel the event if you want to have no UI at all but still cancel the submission. You should use onchange/oninput(emphasis added) to change the validity state if you want the form to be submitted.
因此，您所做的是使元素在无效事件中有效，这为时已晚。在无效事件之后，Firefox 尝试使用validationMessage 显示UI，当表单有效时返回空字符串。如果您希望根本没有 UI 但仍要取消提交，则应取消该事件。如果您希望提交表单，您应该使用 onchange/oninput（已添加强调）来更改有效性状态。
http://www.mail-archive.com/[email protected]/msg23762.html
http://www.mail-archive.com/[email protected]/msg23762.html
The fix is to validate the input with the "input" event handler instead of the "submit" event handler.
解决方法是使用“输入”事件处理程序而不是“提交”事件处理程序来验证输入。
<!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>
