Javascript “之后如何清除、删除或重置HTML5表单验证状态”；setCustomValidity（“…”）&引用；？
如何在Javascript “之后如何清除、删除或重置HTML5表单验证状态”；setCustomValidity（“…”）&引用；？,javascript,forms,html,validation,Javascript,Forms,Html,Validation,如何在setCustomValidity（“…”）之后清除、删除或重置HTML5表单验证状态 设置空字符串，setCustomValidity（“”），关闭表单验证错误消息。我不想关闭表单验证错误消息。我想重置验证状态，以便可以检查下一个答案，并保留显示的验证错误消息。如果验证状态未重置，则即使是下一个正确答案也会错误显示验证错误消息 那么，“清晰”的意思是“接近” 如果参数为空字符串，则清除自定义错误 下面是一个验证测试用例： <!DOCTYPE html> <html
setCustomValidity（“…”）之后清除、删除或重置HTML5表单验证状态
设置空字符串，setCustomValidity（“”），关闭表单验证错误消息。我不想关闭表单验证错误消息。我想重置验证状态，以便可以检查下一个答案，并保留显示的验证错误消息。如果验证状态未重置，则即使是下一个正确答案也会错误显示验证错误消息
那么，“清晰”的意思是“接近”
如果参数为空字符串，则清除自定义错误
下面是一个验证测试用例：
<!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>
验证测试用例
/*jslint浏览器：true，vars:true，white:true，maxerr:50，缩进：4*/
（功能（）
{
“严格使用”；
var form=null；
var-answer=null；
var isCorrectAnswer=函数（值）
{
返回值（值=“a”）；
};
var closeValidation=函数（元素）
{
//关闭表单验证错误消息（如果显示）。
元素blur（）；
元素focus（）；
};
var validateForm=函数（事件）
{
event.preventDefault（）；
event.stopPropagation（）；
var isValidForm=event.target.checkValidity（）；
if（isValidForm）
{
if（isCorrectAnswer（answer.value））
{
form.reset（）；
闭合验证（回答）；
console.log（“正确答案”）；
警惕（“正确答案”）；
}
其他的
{
console.log（“回答不正确”）；
答案。设置自定义有效性（“错误答案”）；
回答：检查有效性（）；
//回答：设置客户有效期（“”）；
}
}
};
addEventListener（“DOMContentLoaded”，函数（）
{
form=document.getElementById（“testForm”）；
答案=document.getElementById（“答案”）；
表格.附录列表（“提交”，validateForm，false）；
}，假）；
}());
键入不正确的答案，除“a”以外的任何字母，然后按Enter键。
键入正确答案“a”，然后按Enter键
如果不更改测试用例，那么在Opera、Firefox和Chrome中的行为是相同的（除了Chrome bug）。无论答案是正确的还是不正确的，验证错误消息都将持续
现在，在answer.setCustomValidity（“”）之后未注释，Opera将清除自定义验证错误，但不会关闭验证错误消息，这正是我所期望的。另一方面，Firefox和Chrome都会清除自定义验证错误并关闭验证错误消息（bug？）
错误：首次调用时，Chrome不会“checkValidity（）”
在Chrome中，answer.checkValidity（）在第一次提交后不显示验证消息。后续提交将显示验证错误消息
错误：在Chrome中，当输入发生更改时，验证错误消息将被清除，但不会关闭
歌剧院11.51楼1087
火狐6.0.2
如果在“提交”事件处理程序中调用setCustomValidation（），则不会显示自定义验证消息
<!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>
@特肯特：
我确认Opera 11.50符合您的预期，但Firefox 6和
铬14没有
然而，根据标准，Chrome的行为是正确的
如果未设置Submited from submit（）方法标志，则
submitter元素的no-validate状态为false，然后以交互方式
验证表单约束并检查结果：如果结果
为负值（约束验证得出的结论是
无效字段，可能已通知用户此信息），然后中止
这些步骤
如果未设置Submited from submit（）方法标志，则激发
一个名为submit的简单事件，可在表单中取消。如果
阻止事件的默认操作（即，如果事件被取消）
然后中止这些步骤。否则，继续（有效地）默认设置
操作是执行提交）
浏览器必须在“提交”事件之前调用交互验证
他被解雇了。您需要在“提交”事件之前调用setCustomValidity（）
如果希望浏览器显示验证消息。歌剧似乎很有趣
按错误的顺序处理这些步骤。请注意，在
你的代码无论如何都没有效果。checkValidity（）从不显示
验证消息
[Bug 11287]新：元素中的“setCustomValidity”调用应使用“oninput”事件
@尼克：
“setCustomValidity”元素中的调用应使用“oninput”
事件
Re:[whatwg]表单元素无效消息
@穆尼尔·拉穆里：
因此，您要做的是使元素在无效事件中有效
太晚了。无效事件发生后，Firefox会尝试显示UI
使用validationMessage，当
表格有效。如果你愿意，你应该取消活动