【jQuery】検索ボックス未入力時にsubmitを無効にする方法
Web制作者
「検索ボックスへのキーワード未入力時には検索を実行させないようにしたい」
こういった要望にお応えします。
本記事の内容
- jQueryを使用した、検索ボックスへキーワード未入力時にsubmitを無効にする方法
こんにちは、mineです。
Web制作歴は7年になります。
Googleのトップページを始めとして、Webサイトを見ているとでキーワードでページを探すための検索ボックスをよく見かけます。ちなみにmineblogにもブログ記事を検索できるように設置しています。
普通はキーワードが未入力の状態でも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ライブで気をつけるべきチャットへのコメントマナーまとめ