Как очистить, удалить или reset состояние проверки формы HTML5 после "setCustomValidity ("... ");"?

Как очистить, удалить или reset состояние проверки формы HTML5 после setCustomValidity("...");?

Установка пустой строки setCustomValidity(""); в Firefox и Chrome закрывает сообщение об ошибке проверки формы. Я не хочу закрывать сообщение об ошибке проверки формы. Я хочу reset состояние проверки, чтобы можно было проверить следующий ответ, а также сохранить отображаемое сообщение об ошибке проверки. Если состояние проверки не является reset, тогда даже следующий правильный ответ неверно отобразит сообщение об ошибке проверки.

Итак, так или иначе, "ясно" означает "закрыть"?

Если аргумент представляет собой пустую строку, удаляет пользовательскую ошибку.

http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#the-constraint-validation-api

Вот пример проверки:

<!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 очищают пользовательскую ошибку проверки и закрывают сообщение об ошибке проверки (ошибка?).

ОШИБКА: Chrome не "checkValidity()" при первом вызове.

В Chrome answer.checkValidity(); не отображается сообщение проверки после первого отправления. Последующие сообщения показывают сообщение об ошибке проверки.

http://code.google.com/p/chromium/issues/detail?id=95970

ОШИБКА: В Chrome сообщение об ошибке проверки пусто, но не закрыто при изменении ввода.

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 м

<!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>

Ответ 1