【jQuery】検索ボックス未入力時にsubmitを無効にする方法

Programming Web

Web制作者

Web制作者
「検索ボックスへのキーワード未入力時には検索を実行させないようにしたい」

こういった要望にお応えします。

本記事の内容

  • jQueryを使用した、検索ボックスへキーワード未入力時にsubmitを無効にする方法

こんにちは、mineです。
Web制作歴は7年になります。

Googleのトップページを始めとして、Webサイトを見ているとでキーワードでページを探すための検索ボックスをよく見かけます。ちなみにmineblogにもブログ記事を検索できるように設置しています。

通常、検索ボックスにキーワードを入力し、フォーカスされている状態でEnterキーを押すと、フォームがsubmitされ検索の処理が実行されます。
普通はキーワードが未入力の状態でもsubmitされることが多いです(Googleの検索ボックスはキーワードを入力しないと無反応ですが)。

この記事では、キーワード未入力時には検索を実行させたくないという方向けに、検索ボックスが空の時にEnterキーによるsubmitを無効にするjQueryを使用した方法を紹介します。

検索ボックスの仕様を設定

検索ボックス仕様

今回は下記の様な検索ボックスの仕様を考えます。

仕様

  • <input>タグ+type属性textの検索キーワード入力欄を1つ設置
  • <input>タグ+type属性submitの検索ボタンを1つ設置
  • キーワード入力欄が未入力(全角・半角スペース、タブ、改行の入力を含む)の場合submitしない

キーワード入力欄が未入力(全角・半角スペース、タブ、改行のみの入力を含む)の状態で、Enterもしくは検索ボタンクリックしても何も起こりません。

何かしらの文字列を入力すると、URLにパラメータ?q=(入力した文字列)が付加されます。

検索ボックスの実装方法

具体的に仕様に沿った実装方法をご紹介します。今回はCSSは本質ではないので特に記述しません。

HTML

<form action="/" method="get" id="search_form" name="search_form">
	<div class="clearfix">
		<input type="text" id="search_word" placeholder="キーワードを入力" name="q">
		<input type="submit" value="検索">
	</div>
</form>

仕様のところでも記述していますが、検索ボックスと検索ボタンの2つを設置しているだけです。

jQuery

<head>内に記述

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>

<head>内に上記コードを記述して、jQueryを読み込みます。

フォームの制御

$(function(){
	// 1.フォーム要素の取得
	var search_form = $("#search_form");
	// 2.フォームのsubmitイベントを取得
	search_form.submit(function(){
		// 3.入力されているキーワードを取得し、正規表現により未入力かどうかを判別する
		var keyword = $('input[id=search_word]').val();
		if(keyword.match(/^[  \r\n\t]*$/)){
			return false;
		}
	});
});

1.フォーム要素の取得

submitの対象となる検索ボックスのフォーム要素を取得します。

2.フォームのsubmitイベントを取得

.submit()メソッドの中でfunction()を使うことで、submit前に入力内容のチェックや加工が可能になります。

3.入力されているキーワードを取得し、正規表現により未入力かどうかを判別する

.val()メソッドで入力されたキーワードを取得します。
取得したキーワードを.match()メソッドと正規表現によって未入力(全角・半角スペース、タブ、改行のみの入力を含む)かどうかをチェックします。

未入力の場合はそのままsubmit、入力されている場合、falseを返してsubmitを無効にします。

※ここでの/^[  \r\n\t]*$/は、全角スペース、半角スペース、復帰文字、改行文字、タブ文字が0回以上連続している文字列を指します。

まとめ

シンプルなjQueryで、未入力時のsubmit無効が実現できました。

ここで、検索ボックス未入力時のsubmit無効化のポイントをまとめます。

ポイント

  • 検索ボックスは普通に設置する
  • submitイベント発生時に入力キーワードを取得する
  • 正規表現により入力キーワードを判別し、submitさせるかどうか決定する

正規表現のところを変更することで、未入力以外でもsubmitさせる条件を変更させることができます。

検索キーワードが未入力でも普通に検索できるサイトはたくさんあるので、特に必要な処理ではありませんが、もし未入力での検索は禁止したいという場合は、この方法を使ってみてください。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ

おすすめ記事 お名前.comのドメインプロテクションは必要か【採算がとれるか】