JavaScriptでフォームの送信をキャンセルする方法｜preventDefaultとreturn falseの使い方を解説

JavaScriptでは、onsubmitイベントの戻り値やevent.preventDefault()メソッドを利用することで、フォームの送信処理を自由に制御できます。バリデーション（入力チェック）に失敗した場合に送信を中断したいときなどに、このテクニックが役立ちます。

event.preventDefault()を使って送信を止める

最も一般的な方法は、フォームのonsubmit属性内でevent.preventDefault()を呼び出すことです。これにより、ブラウザ本来の送信動作（ページ遷移）がキャンセルされます。

<form onsubmit="event.preventDefault(); myValidation();">

この例では、まずpreventDefault()で既定の送信動作を止め、その後に独自のバリデーション関数myValidation()を実行しています。

バリデーション関数でfalseを返す

次に、検証結果に応じてtrueまたはfalseを返す関数を用意します。条件を満たさない場合はアラートを表示し、前のページへ戻すなどの処理を行います。

function myValidation()
{
    if(条件を満たしていない場合)
    {
        alert("入力内容に不備があります。確認してください！");
        returnToPreviousPage();
        return false;
    }
    alert("バリデーションに成功しました！");
    return true;
}

falseを返すことで送信が失敗する仕組み

バリデーションが失敗して関数がfalseを返すと、フォームは送信されずに処理が中断されます。逆にtrueを返せば、通常どおりフォームが送信されます。このように、戻り値を活用することで「送信するかどうか」をJavaScript側から柔軟にコントロールできるのです。

addEventListenerを使ったモダンな書き方

HTMLに直接記述する代わりに、addEventListenerを使えば、より保守しやすいコードになります。

document.getElementById("myForm").addEventListener("submit", function(event) {
    if (!myValidation()) {
        event.preventDefault(); // 送信をキャンセル
    }
});

この方式ならHTMLとJavaScriptを分離でき、コードの可読性と再利用性が向上します。実務ではこちらの書き方が推奨されることが多いです。