jQueryでformのsubmitを止める方法

こんにちは、さるまりんです。

JavaScriptでフォームの値をチェックして、OKならそのままフォームをsubmit、それ以外はalertを表示してフォームのsubmitを止めるということがあると思います。

簡単なフォームで試すと以下のようになります。

HTML

<form name="myForm">
<input type="text" name="text1" value="">
<button type="submit" onclick="return checkMyForm();">送信</button>
</form>

JavaScript

function checkMyForm() {
    if  (document.myForm.text1.value == "") {
        alert("何か入力してください。");
        return false; // myFormのsubmitを止める
    } else {
        return true; // myFormをsubmitする
    }
}

onclickでreturn false;すると止まり、return true;でそのままsubmitします。

buttonに対してなのでonclick、formに対してならばonsubmitで同じようなことができます。

さてこれをjQueryでやると次のようになります。

jQueryでformのsubmitを止める

jQueryではイベントに処理をbindすることで実現します。bindってなあに？正確ではないかもですが、簡単にいうと「引っ付ける」です。clickイベントに引っ付けてもできると思いますが、ここではsubmitイベントでやってみます。

HTML

<form id="myForm">
<input type="text" name="text1" value="" id="text1">
<button type="submit">送信</button>
</form>

JavaScript

$(function() {
  // myFormがsubmitされる時
  $('#myForm').submit(function() {
    // text1が入力されていなければ
    if($('#text1').val() == "") {
      // alertを出して
      alert("何か入力してください。");
      // submitを止める
      return false;
    }
  });
});

上のコードではname属性ではなくてid属性で指定していますが、適切なものならもちろんclass属性の指定やタグの指定でも動作しますよ。

わざわさreturn true;は書いてません。そのまま放っておくとsubmitされるようです。

jQueryでやろうとして迷ったのでメモさせてもらいました。

イベントにbindする方法ってなんだか格好いいって感じています。

まだまだ勉強ですね。

読んでくださってありがとうございました。

ではまた！