LiBz Tech Blog

LiBの開発者ブログ

フォームのsubmitイベントをキャンセルする方法まとめ

f:id:shimodach:20190527152922p:plain:w400

令和も当ブログをよろしくお願いします。

はじめに

「感想投稿フォームで、投稿ボタンを押したときに感想入力欄が空欄だったらアラートを出す」など、formの入力値をチェックして、場合によってはsubmitイベントをキャンセルしたいという実装をする場面は多いと思います。

色々書き方があるようですがまとまってる記事が見つからなかったので、まとめてみました。

1. onclick属性やonsubmit属性を使う場合

基本的に関数内でreturn falseすればsubmitイベントをキャンセルできます。

formのonsubmit属性に関数を指定する

<form id="sample-form" action="hoge" method="post" onsubmit="return checkTextareaValue()">
感想(必須)<br>
<textarea id="sample-textarea" rows="10" cols="40"></textarea><br>
<input id="sample-submit-button" type="submit" value="送信">
</form>
function checkTextareaValue() {
  if(document.getElementById("sample-textarea").value === "") {
    alert("感想を入力してください。");
    return false;
  }
}

submitボタンのonclick属性に関数を指定する

<form id="sample-form" action="hoge" method="post">
感想(必須)<br>
<textarea id="sample-textarea" rows="10" cols="40"></textarea><br>
<input id="sample-submit-button" type="submit" value="送信" onclick="return checkTextareaValue()">
</form>
function checkTextareaValue() {
  if(document.getElementById("sample-textarea").value === "") {
    alert("感想を入力してください。");
    return false;
  }
}

2. AddEventListenerを使う場合

関数内でreturn falseしてもsubmitイベントをキャンセルできません。 event.preventDefault()を使う必要があります。

event.preventDefault()とは

イベントが明示的に処理されない場合にuser agentに、そのデフォルトアクションを通常どおりに行うべきではないと伝えます。

例えばチェックボックスに紐づけたchangeイベントでevent.preventDefault()とすると、クリックしてもチェックボックスにチェックがつかなくなります。

formにsubmitイベントリスナーを追加する

<form id="sample-form" action="hoge" method="post">
感想(必須)<br>
<textarea id="sample-textarea" rows="10" cols="40"></textarea><br>
<input id="sample-submit-button" type="submit" value="送信">
</form>
document.getElementById("sample-submit-button").addEventListener('click', checkTextareaValue);

function checkTextareaValue(event) {
  if(document.getElementById("sample-textarea").value === "") {
    event.preventDefault();
    alert("感想を入力してください。");
  }
}

submitボタンにclickイベントリスナーを追加する

<form id="sample-form" action="hoge" method="post">
感想(必須)<br>
<textarea id="sample-textarea" rows="10" cols="40"></textarea><br>
<input id="sample-submit-button" type="submit" value="送信">
</form>
document.getElementById("sample-form").addEventListener('submit', checkTextareaValue);

function checkTextareaValue(event) {
  if(document.getElementById("sample-textarea").value === "") {
    event.preventDefault();
    alert("感想を入力してください。");
  }
}

3. jQueryを使う場合

jQueryのonメソッドでは、return falseをすると自動的にevent.preventDefault()が実行されるようになっているため、関数内でreturn falseすればsubmitイベントがキャンセルされます。

event.stopPropagation()も自動的に実行されます。

formにsubmitイベントをバインドする

<form id="sample-form" action="hoge" method="post">
感想(必須)<br>
<textarea id="sample-textarea" rows="10" cols="40"></textarea><br>
<input id="sample-submit-button" type="submit" value="送信">
</form>
$("#sample-form").on("submit", checkTextareaValue);

function checkTextareaValue(event) {
  if($("#sample-textarea").val() === "") {
    alert("感想を入力してください。");
    return false;
  }
}

submitボタンにclickイベントをバインドする

<form id="sample-form" action="hoge" method="post">
感想(必須)<br>
<textarea id="sample-textarea" rows="10" cols="40"></textarea><br>
<input id="sample-submit-button" type="submit" value="送信">
</form>
$("#sample-submit-button").on("click", checkTextareaValue);

function checkTextareaValue(event) {
  if($("#sample-textarea").val() === "") {
    alert("感想を入力してください。");
    return false;
  }
}

おわりに

同一プロジェクト内ではなるべく書き方を統一しましょう。

参考記事