JavaScriptのonchangeイベントによりHTMLフォームのonsubmitイベントが妨げられますか?

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 イベントが発生しないように見えます。 2 回目 (もちろん、このときは onchange は起動しません)。言い換えれば、onchange は onsubmit の起動を妨げているように見えます。

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

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

この問題を回避するにはどうすればよいでしょうか?

役に立ちましたか？

解決

（ソートの）解決策：

または確認（） - - 発火しないように、フォームのをonSubmitイベントが発生し、入力者のonchangeイベント中に

これは、それが唯一の警告の存在は（）であることが判明しました。 JSのスレッドが警告（）によってブロックされ得るように見えます。
この問題を回避するには、入力のコールのonchangeで）任意の警告を（）含めるか（確認しないことです。

影響を受けることが知られている

ブラウザ：
IE6 - Windowsの
IE8 - ウィン
FF3 - ウィン


を：影響を受けないように知られている

ブラウザ Google Chromeの - ウィン
サファリ - マック
FF - マック

他のヒント

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() 方法?何か特別なもの？コードを投稿していただけますか?

編集：Windows 上の IE8 と FF3 でテストしましたが、どちらのイベントも発生しませんでした。理由は分かりません。おそらく onblur が解決策ですが、onchange が機能しないのはなぜでしょうか?何か特別な理由があるのでしょうか、それとも単なる矛盾なのでしょうか?(Mac 上の FF と Safari の両方で動作します)

あなたは代わりのonchangeのご入力にonBlurイベントを使用することができます。

これは、動作はMac上で異なっていることは非常に興味深いです、それはプラットフォームに依存していないブラウザ依存が表示されます。手がかりはどこかに存在する必要があります...

私はNivasのコードでのonblur試みたが、のonchange（のみ 『VALI』のアラート）と同じ結果を持っています。

どのような違いを生むことがないことは、あなたがの何かをの検証中（）を行うかどうかです。ラインの警告（「VALI」）をコメントアウト。そして、それは働きます！ （検証から実際の戻り値は（）私はそれを期待していないものの、重要ではありません。）

編集： 同僚は、ちょうどWindows上のGoogle Chromeでこれを試み、それが動作します。これは直感的理由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