如何在“setCustomValidity（" ..."）”之后清除，移除或重置HTML5表单验证状态;“？ [英] How to clear, remove, or reset HTML5 form validation state after "setCustomValidity("...");"?
问题描述
如何在 setCustomValidity（...）; ？
$ b $之后清除，移除或重置HTML5表单验证状态b
在Firefox和Chrome中设置一个空字符串 setCustomValidity（）; ，关闭表单验证错误消息。我不想关闭表单验证错误消息。我想重置验证状态，以便可以检查下一个答案，并保持显示的验证错误消息。如果验证状态未被重置，那么即使是下一个正确答案也会错误地显示验证错误消息。
所以不知何故，清除意味着关闭？
如果参数是空字符串，清除自定义错误。 b $ b
以下是验证测试用例：
<！DOCTYPE html>
< html dir =ltrlang =en>
< head>
< meta charset =utf-8/>
< title>验证测试用例< / title>
< / head>
< body>
< form id =testForm>
< input type =textid =answerpattern =[A-Za-z] +需要自动对焦/>
< input type =submitvalue =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）
{
//如果显示，关闭表单验证错误信息
element.blur（）;
element.focus（）;
};
var validateForm = function（event）
{
event。 preventDefault（）;
event.stopPropagation（）;
var isValidForm = event.target.checkValidity（）;
if（isVali dForm）
{
if（isCorrectAnswer（answer.value））
{
form.reset（）;
closeValidation（answer）;
console.log（正确答案。）;
alert（正确答案。）;
}
else
{
console.log（错误的答案。）;
answer.setCustomValidity（错误答案。）;
answer.checkValidity（）;
//answer.setCustomValidity（）;
}
}
};
window.addEventListener（DOMContentLoaded，function（）
{
form = document.getElementById（testForm）;
answer = document.getElementById（答案）;
form.addEventListener（submit，validateForm，false）;
}，false）;
}（））;
< / script>
< / body>
< / html>
键入一个不正确的答案，任何字母但是a，然后按Enter键。
输入正确的答案a，然后按Enter键。
不改变测试用例，Opera，Firefox和Chrome中的行为是相同的（Chrome漏洞除外）。
现在，在 BUG： Chrome第一次调用时不会显示checkValidity（）。 在Chrome中， http://code.google.com/p/chromium/issues/detail?id=95970 http://code.google.com/p/chromium/issues/detail?id=95973 Opera 11.51 Build 1087 Firefox 6.0.2 Google Chrome 13.0.782.220 m 如果setCustomValidity （）在'submit'事件处理程序中调用。 @tkent： 我确认Opera 11.50能够满足你的期望，但Firefox 6和b $ b Chrome 14没有。 http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of answer.setCustomValidity（）; 之后，验证错误消息会持续存在，无论答案是正确还是错误。 $ c>未注释，Opera清除了自定义验证错误，但未关闭验证错误消息，这正是我所期望的。另一方面，Firefox和Chrome都清除了自定义验证错误并关闭了验证错误消息（bug？）。
answer.checkValidity （）; 在第一次提交后不显示验证消息。后续提交显示验证错误消息。
$ b BUG ：：在Chrome中，验证错误消息是空白的，但在输入发生更改时不会关闭。
$ b
- 如果提交从submit（）方法标志未设置，然后触发
a简单事件即可取消命名提交，在表单中。如果
事件的默认操作被阻止（即，如果事件被取消）
，则放弃这些步骤。否则，继续（实际上默认的
动作是执行提交）。
li>如果未设置submit（）方法标志提交并且
submitter元素的无效状态为false，则交互式
验证表单的约束并检查结果：如果结果
是否定的（约束验证认为存在
无效字段并可能告知用户这一点），然后放弃
这些步骤。
浏览器必须调用交互式验证BEFORE'提交'事件
被触发。如果您希望浏览器显示验证消息，则需要在'提交'事件
之前调用setCustomValidity（）。歌剧似乎
以不正确的顺序处理这些步骤。请注意，
中的checkValidity（）无论如何都不起作用。 checkValidity（）从不显示
验证消息。
http://code.google.com/p/chromium/issues/detail?id=95970
[Bug 11287]新增功能：元素中的'setCustomValidity'调用应使用'oninput'事件...
@Nick：
'setCustomValidity'元素中的调用应该使用'oninput'
event ...
http://lists.w3.org/Archives/Public/public-html/2010Nov/0186.html
Re：[whatwg]表单元素无效消息
@Mounir Lamouri：
因此，您所做的是使元素在无效事件中有效，而
为时已晚。无效事件发生后，Firefox会尝试使用validationMessage显示UI
，在
表单有效时返回空字符串。如果您根本没有UI
，您应该取消活动，但仍会取消提交。您应该使用
onchange / oninput （强调添加）来更改有效性状态，如果您希望提交表单
。
http：/ /www.mail-archive.com/whatwg@lists.whatwg.org/msg23762.html
解决方法是使用输入事件处理程序而不是提交事件处理程序来验证输入。
< ;! DOCTYPE html>
< html dir =ltrlang =en>
< head>
< meta charset =utf-8/>
< title>验证测试用例< / title>
< / head>
< body>
< form id =testForm>
< input type =textid =answerpattern =[A-Za-z] +需要自动对焦/>
< input type =submitvalue =OK/>
< / form>
< script>
/ * jslint browser：true，vars：true，white：true，maxerr：50，indent：4 * /
（函数（控制台）
{
use strict ;
var form = null;
var answer = null;
var isCorrectAnswer = function（value）
{
return（value ===a）;
};
var closeValidation = function（element）
{
//如果显示，关闭表单验证错误信息。 b $ b 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（错误的答案。）;
}
};
window.addEventListener（DOMContentLoaded，function（）
{
form = document.getElementById（testForm）;
answer = document.getElementById（答案）;
form.addEventListener（submit，validateForm，false）;
answer.addEventListener（input，function（）
{
/如果值匹配模式，只显示自定义表单验证错误消息
if（answer.value.match（new RegExp（answer.getAttribute（pattern））））
{
answer.setCustomValidity（isCorrectAnswer（answer.value）？：Incorrect answer。）;
}
}，false）;
}，false）;
}（window.console））;
< / script>
< / body>
< / html>
How to clear, remove, or reset HTML5 form validation state after 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.
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.
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.
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?).
BUG: Chrome doesn't "checkValidity()" when first invoked.
In Chrome, answer.checkValidity(); doesn't show the validation message after the first submit. Subsequent submits show the validation error message.
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.
http://code.google.com/p/chromium/issues/detail?id=95973
Opera 11.51 Build 1087
Firefox 6.0.2
Google Chrome 13.0.782.220 m
A custom validation message is not shown if setCustomValidity() is called in 'submit' event handler.
@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.
http://code.google.com/p/chromium/issues/detail?id=95970
[Bug 11287] New: 'setCustomValidity' call in element should use 'oninput' event...
@Nick:
'setCustomValidity' call in element should use 'oninput' event...
http://lists.w3.org/Archives/Public/public-html/2010Nov/0186.html
Re: [whatwg] Form element invalid message
@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.
http://www.mail-archive.com/whatwg@lists.whatwg.org/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>
这篇关于如何在“setCustomValidity（" ..."）”之后清除，移除或重置HTML5表单验证状态;“？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
