フォームの入力欄に何も入力されていない場合、送信前にアラートを出すjQuery

更新日：2017年2月5日

お問い合わせページのようなフォームに情報を入力するページで、必須項目部分の入力欄に何も入力されていない状態で送信されてきては困ってしまいますよね。
ネット通販で何かを買う時、住所や電話番号を入力しますが、何か抜けがあった場合に「必須項目が記入されてませんよ」みたいな警告が出された経験誰しもありますよね。あれがアラートです。

入力欄に何も入力されていない場合、送信前にアラートを出して送信させないようにしましょう。

それではどのように実装するかというと、HTMLで

	
今日の天気を教えてくれますか？
	

	

と記述します。
これはあくまで例ですので、内容は何でもいいのですが、
重要なのはformタグにonsubmit="return chk(this)"を記述することと、フォームの入力欄に任意の名前をつけることです。
この例ではweatherという名前をつけています。

仕上げにjQueryには下記のように記述します。

function chk() {
	if($('input[name="weather"]').val() =="") {
		alert("必須項目が記入されていません。");
		return false;
	}
}

もしもweatherというnameの入力欄に値が何も入っていなかったら「必須項目が記入されていません。」とアラートを出して、送信をさせないという記述になります。

これにてもう実装完了です。
ちなみに実装すると下記のように出力されます。
入力欄に何も入力されていなければアラートが出て、何か入力されていればこのページの上部に飛ばされます。