JavaScriptのonsubmitとは？フォーム送信前に入力チェックを行う方法を解説
onsubmit は、フォームが送信される直前に発生するイベントです。
このイベントの戻り値が false の場合、フォーム送信は中止されます。
入力チェックや送信前処理を行う際に必須のイベントです。
onsubmitイベントとは？
フォームの送信ボタンが押されたとき、または form.submit() が実行されたときに発生します。
使用例：フォーム送信時に関数を実行
<form onsubmit=”return formCheck()”>
→ formCheck() の戻り値が false なら送信されません。
送信を中止する方法
送信を止めたい場合は、return false を返す関数を用意します。
例：常に送信を中止する関数
function sendMail() {
return false;
}
return false;
}
この関数を onsubmit に設定すると、フォームは送信されません。
<form onsubmit=”return sendMail()”>
入力チェックに利用する例
フォーム送信前に入力内容をチェックし、未入力なら送信を止めることができます。
例：text1 に文字が入力されている場合だけ送信を許可
<form name=”form1″ action=”” onsubmit=”return document.form1.text1.value != ””>
<input type=”text” name=”text1″>
<input type=”submit” value=”送信”>
</form>
<input type=”text” name=”text1″>
<input type=”submit” value=”送信”>
</form>
→ 空欄の場合は false が返り、送信されません。
実際のフォーム例（入力チェック付き）
<script>
function checkForm() {
let v = document.myForm.user.value;
if (v === ”) {
alert(‘名前を入力してください’);
return false;
}
return true;
}
</script>
function checkForm() {
let v = document.myForm.user.value;
if (v === ”) {
alert(‘名前を入力してください’);
return false;
}
return true;
}
</script>
<form name=”myForm” onsubmit=”return checkForm()”>
名前：<input type=”text” name=”user”><br>
<input type=”submit” value=”送信”>
</form>
→ 入力が空の場合は送信されず、警告が表示されます。
まとめ
onsubmitはフォーム送信直前に発生するイベント- 戻り値が
falseの場合、送信は中止される - 入力チェックや送信前処理に必須
- return と関数を組み合わせることで柔軟な制御が可能
