Menu
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
241
To ignore HTML validation, you can remove the attribute on button click using JavaScript. Uer removeAttribute() to remove an attribute from each of the matched elements.
Adding an else statement to return the value of your error message span to a non-error state could correct this. this should display your error msg and return it to blank when a valid input is present.
With HTML5, form validation is a built-in feature. There are various validation attributes that come with HTML5. When form input is valid, the :valid CSS pseudoclass is applied to the element. If it's invalid, then the :invalid CSS pseudoclass is applied to the element.
INPUT type="number" and type="range" The number and range input types also accept parameters for min, max and step. In most cases you can leave out step as it defaults to 1. As with other HTML5 input types, browsers that don't recognise the new options will default to simple text inputs.
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.
http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm
- 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/[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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With