Событие Javascript onchange, предотвращающее событие отправки в HTML-форме? - PullRequest
Новая
       25

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

3 голосов
/ 29 января 2009

Рассмотрим форму 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.

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

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

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

Ответы [ 5 ]

3 голосов
/ 29 января 2009

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

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

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

Браузеры, о которых известно, что они не затрагиваются:
Google Chrome - Win
Safari - Mac
FF - Mac

2 голосов
/ 29 января 2009

Я пытался с 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» и «Check Valid Array». Сначала я думал, что return false может быть причиной, по которой форма не была отправлена, но она отправлена ​​(по крайней мере, называется checkValidArray()).

Теперь, что вы делаете в своих checkValidArray() и validate() методах? Что-то особенное? Вы можете разместить код?

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

1 голос
/ 29 января 2009

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

0 голосов
/ 22 июня 2009

Не твори; кнопка отправки. Вместо этого создайте обычную кнопку и напишите функцию, которую можно вызвать 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
}
0 голосов
/ 29 января 2009

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

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

Разница в том, делаете ли вы что-нибудь в validate (). Закомментируйте строку оповещения («вали»); и это работает! (Фактическое возвращаемое значение из validate () не имеет значения, хотя я бы не ожидал.)

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

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

...