JavaScriptのonchangeイベントによりHTMLフォームのonsubmitイベントが妨げられますか?
-
20-08-2019 - |
質問
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
}