Как очистить, удалить или 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 м

Ответы

Ответ 1

Пользовательское сообщение проверки не отображается, если setCustomValidity() вызывается в обработчике события submit.

@tkent:

Я подтвердил, что Opera 11.50 работает как ваше ожидание, но Firefox 6 и Chrome 14 не сделал.

Однако поведение Chrome корректно в соответствии со стандартом.

http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm

  1.   
  2. Если флажок метода submit() не установлен, а   Элемент безтверждающего элемента отправителя является ложным, а затем интерактивно   проверять ограничения формы и анализировать результат: если результат   является отрицательным (проверка на наличие ограничений заключалась в том, что   неверные поля и, вероятно, проинформировали пользователя об этом), а затем прервать   эти шаги.  
  3. Если установленный флаг submit() не установлен, тогда огонь   простое событие, которое может быть отменено по имени submit, в форме. Если   действие события по умолчанию предотвращается (т.е. если событие отменено)   затем прервите эти шаги. В противном случае продолжите (эффективно по умолчанию   действие должно выполнить представление).  

Браузеры должны вызывать интерактивную проверку перед отправкой события увольняется. Вам нужно вызвать setCustomValidity() перед событием submit если вы хотите, чтобы браузер показывал сообщение проверки. Опера кажется выполните указанные действия в неправильном порядке. Обратите внимание, что checkValidity() в ваш код не имеет никакого эффекта. checkValidity() никогда не показывает подтверждение.

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

[Ошибка 11287] Новое: элемент "setCustomValidity" должен использовать событие "oninput"...

@Nick:

'setCustomValidity' в элементе должен использовать 'oninput' событие...

http://lists.w3.org/Archives/Public/public-html/2010Nov/0186.html

Re: [whatwg] Недопустимое сообщение элемента формы

@Mounir Lamouri:

Итак, что вы делаете, это сделать элемент действительным в недопустимом событии, которое слишком поздно. После недопустимого события Firefox пытается показать интерфейс пользователя используя validationMessage, которые возвращают пустую строку, когда форма действительна. Вы должны отменить событие, если вы не хотите иметь интерфейс на всех, но все же отменить подачу. Вы должны использовать onchange/oninput (выделено мной), чтобы изменить состояние действительности, если вы хотите, чтобы форма быть представленным.

http://www.mail-archive.com/[email protected]/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>