プルダウンボックスを選択せず送信ボタンを押すと、送信できないだけでなくエラーメッセージをだす設定にしたいです。

Question

お世話になります。何卒宜しくお願い致します。
以下のプルダウンボックスが選択されていればその下にあるボタンを有効化し、選択されないでボタンを押すとボタンが無効化されていると同時に、”プルダウンボックスが選択されていません”というエラーメッセージを表示するという設定にしたいのですが、どうかご教授頂けませんでしょうか。

[プルダウンボックス]
<input type="hidden" name="mode" value="" />
<select name="category_id" class="box">
<option label="" value="1">カテゴリ</option>
<!--{html_options options=$arrCat selected=$category_id}-->
</select>

[送信ボタン]
<input type="image" src="<!--{$TPL_URLPATH}-->img/button/search.jpg" alt="検索" name="search" />

ounisi5011様
ご教授いただき感謝いたします。
生成されたHTMLは以下になります。何かお分かりになりますでしょうか。
<input type="hidden" name="mode" value="" />
<select name="category_id" class="box">
<option label="" value="1"> カテゴリ</option>
<option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北海道" value="1391">      北海道</option>

<option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三重" value="1387">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三重</option> <option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鹿児島" value="1380">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鹿児島</option> </select>

Answer 1

IE9以下やiPadなど、「多少効かない環境がある」ことに目をつぶれば、HTML側に少し手を加えるだけで実現できます。
<select name="category_id" class="box" required="required">
こうすると、そのリストボックスから吹き出しが出て、「選択してください」のようなメッセージが表示されます（ブラウザ側の機能なので、表示スタイルは少しずつ違いますが）。

サンプルページ ※inputですが、selectに付けても同様に動作します

Answer 2

formでの機能を想定して書きます。

送信を無効にするには、formのsubmitイベントでfalseを返します。

後は、falseを返す場合と何もしない場合を切り分ければ完成です。

処理はjqueryを使用して記述しています。

// 送信時のイベント
$('form').submit(function(){
  
  // カテゴリの取得 ( value項目が取得される ) 
  var val = $('[name=category_id]').val();

  // `選択してください`と比較し、処理を切り分ける
  if(val===''){
    
    // 無効時 : `選択してください`の場合
  	alert('選択してください');    
    
    // 送信しない場合は、falseを返す
    return false;
  }
    
  // 通常時
  // 何もしなければ、送信されます。
})

参考

Answer 3

*コメント欄が長くなりすぎたので、失礼ながら新たに回答とさせていただきます。

nouzoさんのコードを（質問文追記分のHTML含め）コピーして少し手を加えてローカルで動かしてみましたが、普通に動いてしまいましたね…。

<input type="hidden" name="mode" value="" /> 
                <select  name="category_id" class="box"> 
                    <option label="" value="1"> カテゴリ</option> 
                    <option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北海道" value="1391">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北海道</option> 
<option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三重" value="1387">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;三重</option> 
<option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鹿児島" value="1380">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鹿児島</option> 
          </select>

<input type="image" src="<!--{$TPL_URLPATH}-->img/button/search.jpg" alt="検索" name="search" /> 

var select = document.querySelector('select[name="category_id"]');
var searchButton = document.querySelector('input[type="image"][name="search"]');

searchButton.addEventListener("click", function(e){
    var idx = select.selectedIndex;
    var notSelected = (idx <= 0);
    
    if (notSelected) {
        e.preventDefault();
        e.stopPropagation();
        
        window.alert("プルダウンボックスが選択されていません。");
    }
}, false);

カテゴリを選択してもエラーメッセージが表示されるということは（ここで言う「エラーメッセージ」が選択していない時に表示されるものと同じものであるなら）変数[notSelected]が常にtrueであると評価されていることになります。
idx <= 0 について考えてみると、これがtrueと評価される idx にはいくつかパターンが存在します。

// 0以下の数字型
console.log(0 <= 0);         //==> true
// null
console.log(null <= 0);      //==> true
// 空文字
console.log("" <= 0);        //==> true
// 長さ0の配列
console.log([] <= 0);        //==> true
// 上記の値を一つ含んだ長さ1の配列
console.log([0] <= 0);       //==> true
console.log([null] <= 0);    //==> true
console.log([""] <= 0);      //==> true
console.log([[]] <= 0);      //==> true

この中で考えられそうなのは…「0」くらいしかないですね。
変数[select]がnullだとすると、そもそもselect.selectedIndexを参照した時点で例外が発生してしまいますし、selectedIndexをきちんと参照できているなら、戻り値は必ず整数になるはずです。
つまり何を選択してもselectedIndexが0かそれ以下になっていると推測します。
とはいえ、selectedIndexが固定値を返す状況が思い浮かびません。私の力量不足です。
長々と書いた上で情けない話になってしまいますが、私には正直今ある情報ではこの程度の返答が限界です。
申し訳ありません。

ここからは蛇足なので読み飛ばしてくださっても結構です。

var searchButton = document.querySelector('input[type="image"][id="search_button"]');

こう書かれて動作しているということは、検索ボタンにIDを振られたということですね。
となるとパフォーマンス的にも可読性的にも

var searchButton = document.querySelector('#search_button');

とする方がよいかと思います。
正直実感できるほどの差はありませんが、計算コストは減るはずです。

また、仕事でそういったものを書いた経験がないため想像になってしまい恐縮ではありますが、実際にシステムに組み込む際にはjQueryやPrototype.jsなどブラウザ間の差異を吸収できるようなライブラリやフレームワークを用いるのが一般的かと思います。
例えば、私のコードはモダンブラウザが対象であることを前提としているため、IE8以下で動きません。

上記のコードをjQueryで素直に書き直すと

jQuery(function($){
    var $select = $('select[name="category_id"]');
    var $searchButton = $('input[type="image"][name="search"]');
    
    $searchButton.on("click", function(e){
        var idx = $select.prop("selectedIndex");
        var notSelected = (idx <= 0);
        
        if (notSelected) {
            window.alert("プルダウンボックスが選択されていません。");
            return false;
        }
    });
});

このような感じになります。

今になって言うのもどうかと思いますが、ymknjuggさんが書かれたようにformタグのsubmitイベントに引っかけた方がスマートですね。

<form action="[POST先]" method="POST">
    <input type="hidden" name="mode" value="" />
    <select name="category_id" class="box">
        <!--省略-->
    </select>

    <button type="submit" name="search">
        <img src="<!--{$TPL_URLPATH}-->img/button/search.jpg" alt="検索"/>
    </button>
</form>

$('form').on("submit", function(e){
    // 省略
});

Comments

[nouzo]

htsign様

真摯にご教授いただきまして感謝いたします。
わからないなりに調べたりと試しておりました。
いろいろとに勉強になりました。
本当にありがとうございます。

Answer 4

選択されないでボタンを押すとボタンが無効化されている

ここがよく分からなかったのですが、とりあえずjsFiddleで書いてみました。

なお、送信ボタンがtype="image" であるため、有効無効が視覚的に分かりにくいと思います。
これは

input[type="image"][disabled] {
    opacity: .5;
}

などとして区別させることはできそうです。

Comments

[sounisi5011]

「ボタンが無効化されている」というのは、ボタンを押しても送信しない、という意味ではないでしょうか。
つまり、

セレクトボックスが未選択状態の場合、送信ボタンを押しても送信せず、「プルダウンボックスが選択されていません」のalertを出す

という機能を質問者は求めているものと考えます。

[htsign]

なるほど。
disabled=true の状態であると解釈しましたが、それだとボタンクリック自体ができないので分からなかったのですよね。
「ボタンクリックは有効だが本来の送信を行わない」というのであればしっくり来ますね。
ありがとうございます。

それに基づいて修正しようかと思いましたが、ほかの方の回答の方が分かりやすく簡潔ですね。
私のよりもそちらを参考になさった方がよさそうです。

[nouzo]

皆様懇切丁寧なご指導心より感謝いたします。また私の質問文が不十分であったことをお詫びいたします。
皆様から頂戴致しました記述をそれぞれ試しましたが、何故なのか分かりませんが、期待通りに機能するに至っておりません。そこでもう一度、状況を整理すると以下の様になりますが、どこに投稿して良いか分かりませんでしたが皆様の更なるご教授の程何卒宜しくお願い申し上げます。
割愛しておりましたが、本件は一覧ページを表示するための記述でありまして、数ある中でこのケースに関してだけプルダウンボックスからカテゴリを選択しなければ正確な表示がされない仕様のため、カテゴリ選択を必須にする必要がありました(カテゴリを選択することなくして、一覧ページの表示ボタンを押すことができない状態にし、カテゴリ選択なしで押すとエラーメッセージを表示する。カテゴリを選択すると表示ボタンを押すことができる)。整理した記述は以下になりますが、デザイン上、表示ボタン、そしてプルダウンボックスの位置は以下の様になります。プルダウンボックスのカテゴリは配列$arrCatListで取得しております。

<form name="search_form" id="search_form" method="get" action="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php">

（表示ボタン）
<input type="image" src="<!--{$TPL_URLPATH}-->img/button/search.jpg" alt="検索" name="search" />

（プルダウンボックス）
<input type="hidden" name="mode" value="" />
<select name="category_id" class="box">
<option label="" value="1">カテゴリ</option>
<!--{html_options options=$arrCatList　selected=$category_id}-->
</select>
</form>

[htsign]

少し修正してみました。
http://jsfiddle.net/htsign/hzry713q/2/
内容的にはymknjuggさんの書かれたコードをPureJSで書いただけのような感じになっていますが。
まだ誤解があるようでしたら申し訳ありません。

[nouzo]

htsing様、そして皆様これまでのご指導感謝いたします。

新たに頂いた記述で試しますと、私の環境でもカテゴリを選択なしで送信ボタンを押すとエラーメッセージが表示されるのを確認致しました。

しかし、以下のようにカテゴリを配列$arrCatListより取得する本来の記述で送信ボタンを押し試すとエラーも表示せず、一覧ページを表示してしまいす。いろいろと試しておりますが、何かお分かりになりますでしょうか。

<input type="hidden" name="mode" value="" />
<select name="category_id" class="box">
<option label="" value="1"> カテゴリ</option>
<!--{html_options options=$arrCatList selected=$category_id}-->
</select>

[sounisi5011]

nouzoさん

記述から、テンプレートエンジンにSmartyを使用しているものと仮定します。

配列$arrCatListの中身や、Smartyの動作による影響かもしれません。
Smartyのテンプレートではなく、生成されたHTMLを確認してみてください。
該当のページをブラウザで表示し、ソースの表示より、HTMLそのものを確かめてみてください。
または、こちらに貼り付けてみてください。

貼り付ける場合、コメント欄では機能不足なので質問本文を編集し、貼り付けることをオススメします。

[htsign]

追記のコードを拝見しました。
何もおかしなところは見当たらない気がしますね…。

馬鹿にする意図はないのでお気を悪くされたら申し訳ないのですが、もしかすると私が書いた、あるいは他の方が書かれたコードをそのまま流用されてはいませんでしょうか。
少なくとも私に関してはHTML側にも（JavaScript側から参照しやすくする目的で）少々手を加えておりますので、これをそのまま貼り付けるだけでは機能しません。

私のコードで言えば
var select = document.getElementById("category_id");
var searchButton = document.getElementById("search_button");
の部分を
var select = document.querySelector('select[name="category_id"]');
var searchButton = document.querySelector('input[type="image"][name="search"]');
などとしていただく必要があります。

[nouzo]

Htsign様
ご教授頂きまして感謝いたします。
いろいろ試した結果、以下の記述でカテゴリ選択なしで送信ボタンを押すとエラーメッセージを表示します。ただ、カテゴリを選択して送信ボタンを押してもエラーメッセージを表示し、一覧ページを開きません。大変申し訳ございませんが、どうすれば宜しいかご教授頂けませんでしょうか。

var select = document.querySelector('select[name="category_id"]');
var searchButton = document.querySelector('input[type="image"][id="search_button"]');
searchButton.addEventListener("click", function(e){
var idx = select.selectedIndex;
var notSelected = (idx <= 0 );
if (notSelected) {
e.preventDefault();
e.stopPropagation();

window.alert("プルダウンボックスが選択されていません。");
}
}, false);