jQueryでフォームが空の状態でエンターを押したときsubmitを無効にする

楽天goldでamazon風に検索できるトップページを作ったときのメモです。普通、input要素はエンターを押すと自動的にsubmitボタンが押される仕組みになっています。でも、検索フォームに何も文字を入れていないのに、エンターを押したら勝手にsubmitされてしまうのはユーザービリティーを考えるとよくないですよね。そこで、jQueryを使ってちゃちゃっと解決したので、その方法を紹介します。

基本となるHTML

  
  検索

もっともシンプルなマークアップはこんな感じです。検索ボタンは、inputではなくbutton要素を使った方がいいですよ。カスタマイズしやすいです。

jQueryで問題を解決

$('.search-box').keypress(function(e){
  if(e.which && e.which === 13 || e.keyCode && e.keyCode === 13){
    if(!$(this).val().match(/\S/g)){
      return false;
    }
  }
});

１行目

$('.search-box').keypress(function(e){

.search-box 内でキーが押されたときに実行されます。

２行目

if(e.which && e.which === 13 || e.keyCode && e.keyCode === 13){

押されたキーがエンターキーかどうかを判定しています。エンターキーのコードは13です。

３〜５行目

if(!$(this).val().match(/\S/g)){
  return false;
}

$(this).val() で .search-box 内の値を取得し、match(/\S/g) で正規表現を使っています。\S は、空白文字以外の文字を表すものです。これに論理値の反転 ! をつけることにより、もし空白文字（何も入力していない）だったらというif文ができあがります。