Home/ Questions/Q 6563089
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T13:47:18+00:00

How to clear, remove, or reset HTML5 form validation state after setCustomValidity(…); ? Setting

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    1. 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.
    2. 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>
    • 0