この記事で分かること
onsubmitの役割と仕組み- フォーム送信前に入力チェックを行う方法
return falseによる送信制御の基本- HTML と JavaScript での書き方の違い
- 実務で使える入力チェックの実例
onsubmit は、フォームが送信される直前に発生するイベントです。
このイベントの戻り値が false の場合、フォーム送信は中止されます。
入力チェックや送信前処理を行う際に必須のイベントです。
onsubmit イベントとは？
フォームの送信ボタンが押されたとき、または form.submit() が実行されたときに発生します。
送信前にチェックを行いたい場合、もっともよく使われるイベントです。
使用例：フォーム送信時に関数を実行
<form onsubmit="return formCheck()">
→ formCheck() の戻り値が false なら送信されません。
送信を中止する方法
送信を止めたい場合は、return false を返す関数を用意します。
確認ダイアログやエラー表示など、送信前の制御に便利です。
例：常に送信を中止する関数
function sendMail() {
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>
→ 空欄の場合は false が返り、送信されません。
実際のフォーム例（入力チェック付き）
<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>
→ 入力が空の場合は送信されず、警告が表示されます。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- フォーム処理や入力チェックを基礎から理解したい
onsubmit のような「フォーム送信前の処理」は、実務で必ず使う重要なイベントです。
書籍ではこれらを体系的に順序立てて学べるため、バリデーションや送信制御の理解が深まります。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
入力欄の扱い・イベント処理・フォーム操作など、onsubmit の基礎となる内容を丁寧に理解できます。
この本で解決できること：
- フォーム操作の基本を視覚的に理解できる
- イベントと入力チェックの関係が分かる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
フォーム送信・バリデーション・イベント処理の仕組みを深く理解し、実務レベルのフォーム実装が身につきます。
この本で解決できること：
onsubmitの動作原理を体系的に理解できる- 実務で使える入力チェックの書き方が身につく
- 現代的な JavaScript のフォーム処理が理解できる
動画で理解を深めたい方へ（Udemy講座）
onsubmit は「フォーム送信前の処理」を扱うイベントで、
実際の動きを動画で見ると理解が一気に深まります。
Udemy では、フォーム操作・入力チェック・イベント処理を初心者向けに丁寧に解説した講座が多数あります。
初心者のためのJavaScript 完全入門
関数・条件分岐・イベントなど、JavaScriptの基礎を体系的に学べる人気講座です。
フォーム操作や入力チェックの基礎もカバーしており、onsubmit の理解に直結します。
この講座で解決できること：
- フォーム送信前の処理を視覚的に理解できる
- 入力チェックの基本的な実装方法が分かる
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、フォーム送信制御やバリデーションをさらに深めたい方に最適です。
この講座で解決できること：
- 実務レベルの入力チェック・送信制御を理解できる
- イベント処理と DOM 操作の連携が身につく
- 現代的なフォーム実装をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- 入力チェックやバリデーションの設計で迷いやすい
- フォーム送信制御の正しい書き方が分からない
- コードレビューを受ける機会がない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
onsubmit を使ったフォーム送信制御や実務的なバリデーションなど、
つまずきやすい部分を丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
onsubmit に関するよくある質問（FAQ）
HTML と JavaScript のどちらで書くべき？
HTML に直接書く方法でも動きますが、JavaScript で設定する方が保守性が高く一般的です。
return false を書かないとどうなる？
戻り値が true または未指定の場合、フォームはそのまま送信されます。
複数のチェックをまとめて行うには？
関数内で条件分岐を行い、問題があれば false を返す形にまとめるのが一般的です。
JavaScript を無効化されたらどうなる？
onsubmit は動作しません。重要なチェックはサーバー側でも必ず行う必要があります。
まとめ
onsubmitはフォーム送信直前に発生するイベント- 戻り値が
falseの場合、送信は中止される - 入力チェックや送信前処理に必須
returnと関数を組み合わせることで柔軟な制御が可能
