Событие onchange Javascript, предотвращающее событие onsubmit в HTML-форме?

StackOverflow https://stackoverflow.com/questions/489527

Вопрос

Рассмотрим HTML-форму:

<form action="" method="POST" onsubmit="return checkValidArray()">
    <input type="text" name="data" onchange="return validate(this);">
</form>

Похоже (как в IE 6, так и в Firefox 3), что когда вы вводите некоторый текст в поле ввода и нажимаете отправить, событие onchange срабатывает для поля ввода, но событие onsubmit не срабатывает для формы, пока вы не нажмете кнопку отправки во второй раз (при этом onchange, конечно, не срабатывает).Другими словами, onchange, похоже, предотвращает запуск onsubmit.

Желание состоит в том, чтобы проверять каждое поле в форме, когда пользователь выходит из поля, чтобы предоставить ему немедленную обратную связь о проверке, а также предотвратить отправку формы, если есть неверные данные.

[ПРАВИТЬ:Обратите внимание, что обе функции проверки содержат alert() .]

Как можно обойти эту проблему?

Это было полезно?

Решение

Решение (своего рода):

Оказывается, что только наличие alert() - или confirm() - во время события onchange ввода приводит к тому, что событие onsubmit формы не срабатывает.Поток JS, похоже, блокируется предупреждением().
Обходной путь заключается в том, чтобы не включать никаких предупреждений() или подтверждений() в вызов onchange ввода.

Браузеры, о которых известно, что они затронуты:
IE6 - Windows
IE8 - Победа
FF3 - Победа

Браузеры, о которых известно, что они не затронуты:
Google Chrome - Победа
Safari - Mac
FF - Mac

Другие советы

Я попробовал с Firefox 3 (Mac) со следующим кодом:

    <html>
        <head>
            <script>
                function validate(ele)
                {
                    alert("vali");
                    return false;
                }

                function checkValidArray()
                {
                    alert("checkValidArray");
                }

            </script>
        </head>
        <body>
            <form action="" method="POST" onsubmit="return checkValidArray()">
                <input type="text" name="data" onchange="return validate(this);">
                <input type="submit" value="Ok">
            </form>
        </body>
</html>

Кажется, это работает.Когда я нажимаю на кнопку Ok, появляются как "Vali", так и "Проверить допустимый массив".Сначала я думал, что return false может быть причиной, по которой форма не была отправлена, но она отправлена (по крайней мере, checkValidArray() называется).

Итак, что вы делаете в своем checkValidArray() и validate() методы?Что-то особенное?Можете ли вы опубликовать код?

Редактировать:Я тестировал с IE8 и FF3 в Windows, и здесь оба события не запускаются.Я понятия не имею, почему.Возможно, onblur - ЭТО решение, но ПОЧЕМУ onchange не работает?Есть ли какая-то конкретная причина или это просто очередное несоответствие?(Работает как в FF, так и в Safari на Mac)

Вы могли бы использовать событие onblur в своих входных данных вместо onchange .

Довольно интересно, что поведение отличается на Mac, поэтому оно зависит от платформы, а не от браузера.Где-то там должна быть зацепка...

Я попробовал onblur с кодом Nivas, но получил тот же результат, что и с onchange (только предупреждение "Vali").

Что действительно имеет значение, так это то, делаете ли вы что угодно в validate().Закомментируйте строку оповещения ("vali");и это работает!(Фактическое возвращаемое значение из validate() не имеет значения, хотя я бы этого и не ожидал.)

Редактировать:Коллега только что попробовал это в Google Chrome на Windows, и там это работает.Это интуитивно имеет смысл из-за того, как Chrome разделяет потоки JS.

Что-то в первом предупреждении(), блокирующем поток, приводит к потере события onsubmit.Возможные условия гонки?

Не создавайте ;кнопка отправки.Вместо этого создайте обычную кнопку и напишите функцию, которая может быть вызвана onClick с помощью этой кнопки.

Функция выполнит проверку полей формы, и если все в порядке, она отправит форму.Иначе этого не будет.

function validate
{
  "Piece of code to Validate your form"
  document.formName.action.value = "URL which you want to call"
 document.propFile.submit(); // It will submit he page
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top