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

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

26 голосов
/ 09 сентября 2011

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

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

Значит, как-то «очистить» означает «закрыть»?

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

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>

Введите неправильный ответ, любые буквы, кроме «а», и нажмите Enter. Введите правильный ответ «а» и нажмите Enter.

Без изменений в тестовом примере поведение в Opera, Firefox и Chrome одинаково (за исключением ошибок Chrome). Сообщение об ошибке проверки сохраняется независимо от того, является ли ответ правильным или неправильным.

Теперь, после того, как answer.setCustomValidity(""); не закомментировано, Opera очищает пользовательскую ошибку проверки, но не закрывает сообщение об ошибке проверки, чего я и ожидаю. С другой стороны, Firefox и Chrome очищают пользовательскую ошибку проверки и закрывают сообщение об ошибке проверки (ошибка?).

BUG: Chrome не "checkValidity ()" при первом вызове.

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

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

BUG: В 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 Ответ

13 голосов
/ 09 сентября 2011

Пользовательское сообщение проверки не отображается, если 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. Если флаг метода submit () () не установлен, и состояние no-validate отправляющего элемента - false, затем в интерактивном режиме проверить ограничения формы и изучить результат: если результат отрицательно (проверка ограничения пришла к выводу, что были недопустимые поля и, вероятно, проинформировали пользователя об этом) затем прервать эти шаги.
  2. Если флаг метода submit () не установлен, то срабатывает простое событие, которое можно отменить с именем submit, в форме. Если действие по умолчанию для события запрещено (т.е. если событие отменено) затем прервите эти шаги. В противном случае, продолжить (по умолчанию действие - выполнить отправку).

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

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

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

@ Ник:

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

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

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

@ Мунир Ламури:

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

http://www.mail-archive.com/whatwg@lists.whatwg.org/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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...