XP1*_*XP1 30 javascript forms validation html5
如何清除,删除或重置HTML5表单验证状态setCustomValidity("...");？
setCustomValidity("");在Firefox和Chrome中设置空字符串会关闭表单验证错误消息.我不想关闭表单验证错误消息.我想重置验证状态,以便检查下一个答案,并保持显示的验证错误消息.如果未重置验证状态,则即使是下一个正确答案也会错误地显示验证错误消息.
所以,某种程度上,"清除"意味着"接近"？
如果参数是空字符串,则清除自定义错误.
这是一个验证测试用例:
<!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
Firefox 6.0.2
谷歌浏览器13.0.782.220米
XP1*_*XP1 12
如果在"submit"事件处理程序中调用setCustomValidity(),则不会显示自定义验证消息.
@tkent:
我确认Opera 11.50符合您的期望,但Firefox 6和Chrome 14没有.
但是,根据标准,Chrome的行为是正确的.
- 如果未设置submit()方法标志提交,并且submitter元素的无验证状态为false,则以交互方式验证表单的约束并检查结果:如果结果为负(约束验证结论为无效)字段,并可能告知用户这个)然后中止这些步骤.
- 如果未设置submit()方法标志提交,则在窗体中触发一个名为submit的可取消的简单事件.如果阻止事件的默认操作(即,如果事件被取消),则中止这些步骤.否则,继续(实际上默认操作是执行提交).
浏览器必须在触发'submit'事件之前调用交互式验证.如果您希望浏览器显示验证消息,则需要在"submit"事件之前调用setCustomValidity().Opera似乎以不正确的顺序处理这些步骤.请注意,代码中的checkValidity()无论如何都没有效果.checkValidity()从不显示验证消息.
http://code.google.com/p/chromium/issues/detail?id=95970
[错误11287]新:元素中的'setCustomValidity'调用应使用'oninput'事件...
@缺口:
元素中的'setCustomValidity'调用应使用'oninput'事件...
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
修复是使用"input"事件处理程序而不是"submit"事件处理程序验证输入.
<!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>
| 归档时间： |
|
| 查看次数： |
30464 次 |
| 最近记录： |