3

HTMLフォームを考えてみましょう:

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

(IE 6 と Firefox 3 の両方で) 入力フィールドにテキストを入力して送信をクリックすると、入力フィールドに対して onchange イベントが発生しますが、送信ボタンをクリックするまでフォームに対して onsubmit イベントは発生しません。 2 回目 (もちろん、そのときは onchange は起動しません)。つまり、onchange は onsubmit の発火を妨げているようです。

ユーザーがフィールドを出るときにフォームの各フィールドをチェックして、すぐに検証フィードバックを提供し、無効なデータがある場合はフォームの送信を防ぐことが望まれます。

[編集: 両方の検証関数に alert() が含まれていることに注意してください。]

この問題をどのように回避しますか?

4

5 に答える 5

3

（ある種の）解決策：

フォームのonsubmitイベントが発生しない原因は、入力のonchangeイベント中にalert（）（またはconfirm（））が存在することだけであることがわかります。JSスレッドはalert（）によってブロックされているようです。
回避策は、入力のonchange呼び出しにalert（）またはconfirm（）を含めないことです。

影響を受けることがわかっているブラウザ：
IE6-Windows
IE8-Win
FF3-Win

影響を受けないことがわかっているブラウザ：
Google Chrome-Win
Safari-Mac
FF-Mac

于 2009-01-29T20:23:50.020 に答える
2

次のコードでFirefox3（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]と[CheckValidArray]の両方がポップアップ表示されます。return false当初、フォームが送信されなかった理由かもしれないと思いましたが、送信されました（少なくともcheckValidArray()呼び出されます）。

さて、あなたはあなたcheckValidArray()とvalidate()メソッドで何をしていますか？何か特別なもの？コードを投稿できますか？

編集：私はWindowsでIE8とFF3をテストしましたが、ここでは両方のイベントが発生しません。理由はわかりません。おそらくonblurは解決策ですが、なぜonchangeが機能しないのですか？特定の理由がありますか、それとも単なる別の矛盾ですか？（MacではFFとSafariの両方で動作します）

于 2009-01-28T22:01:56.287 に答える
1

onchange の代わりに、入力で onblur イベントを使用できます。

于 2009-01-28T21:50:35.200 に答える
0

Mac では動作が異なることは非常に興味深いことです。したがって、ブラウザに依存するのではなく、プラットフォームに依存するように見えます。どこかに手がかりがあるに違いない…

Nivas のコードで onblur を試しましたが、onchange と同じ結果になりました (「Vali」アラートのみ)。

違いを生むのは、validate() で何かを行うかどうかです。alert("vali"); という行をコメントアウトします。そしてそれは動作します！(validate() からの実際の戻り値は重要ではありませんが、私はそれを期待していません。)

編集: 同僚が Windows の Google Chrome でこれを試したところ、そこで動作しました。これは、Chrome が JS スレッドを分離する方法を考えると、直感的に理にかなっています。

最初の alert() がスレッドをブロックしていると、onsubmit イベントが失われます。競合状態の可能性はありますか?

于 2009-01-29T17:57:33.963 に答える
0

作成しないでください。送信ボタン。代わりに、通常のボタンを作成し、そのボタンで 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
}
于 2009-06-22T11:16:46.907 に答える