まず、onsubmit属性とは

form要素 に記述し、送信ボタンを押したとき(submit)に起動するスクリプトを指定するイベント属性(イベントハンドラ)です。

起動するスクリプトは、属性値に "return 関数名()" と書きます。

"true" を返せばフォームのアクションを実行し、"false" なら実行を中止します。

 

onsubmit イベントで submit を中断するユースケース

  • フォーム送信時に JavaScriptで入力値をチェックし、未入力や不正な入力項目がある
  • フォーム内に複数のボタンが存在する

 

では、具体的に onsubmit属性の戻り値を "false" にして submit をキャンセルする記述についてご説明していきます。


以下のコードでは check関数で必須項目が入力されていないときに、return false; を返しキャンセルしようとしていますが submit が実行されてしまいます。

 

form 要素 の onsubmit 属性の書き方を下記のように変更してください。

フォーム送信をキャンセルするには onsubmit 属性で指定した JavaScript関数のリターン値(false)を return する必要があります。

 

ちなみに

必ずキャンセルさせたいならば、 onsubmit="check(); return false;" とします。