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.
http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#the-constraint-validation-api
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
See Question&Answers more detail:
os 
