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

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

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

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

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

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

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


javascript validation html onchange
person machinatus    schedule 28.01.2009    source источник
comment
нажмите "Отправить" [и] событие onchange срабатывает - ›оно срабатывает, когда вы нажимаете кнопку?   -  person geowa4    schedule 29.01.2009
comment
Он сработает, потому что поле теряет фокус при нажатии кнопки (и получает фокус).   -  person Ates Goral    schedule 29.01.2009
comment
Имеет ли значение, что возвращает функция проверки? Если функция проверки возвращает истину, код все еще не достигает функции checkValidArray?   -  person Daan    schedule 29.01.2009

Ответы (5)


arrow_upward
3
arrow_downward

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

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

Известные браузеры:
IE6 - Windows
IE8 - Win
FF3 - Win

Известно, что это не касается браузеров:
Google Chrome - Win
Safari - Mac
FF - Mac

person machinatus    schedule 29.01.2009
comment
Посмотрите: событие stackoverflow.com/questions/8013282 / это была проблема с событием onsubmit, которое состоит из двух частей (например, onclick). - person Oroboros102; 18.11.2011

arrow_upward
2
arrow_downward

Я пробовал использовать 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>

Вроде работает. Когда я нажимаю кнопку «ОК», появляются всплывающие окна «Вали» и «Проверить действительный массив». Сначала я думал, что return false может быть причиной того, что форма не была отправлена, но она отправлена ​​(по крайней мере, вызывается checkValidArray()).

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

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

person Nivas    schedule 28.01.2009

arrow_upward
1
arrow_downward

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

person Lauri Lehtinen    schedule 28.01.2009

arrow_upward
0
arrow_downward

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

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

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

РЕДАКТИРОВАТЬ: коллега только что попробовал это в Google Chrome в Windows, и он там работает. Это интуитивно понятно из-за того, как Chrome разделяет потоки JS.

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

person machinatus    schedule 29.01.2009

arrow_upward
0
arrow_downward

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