質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 10K+

score 12

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

[プルダウンボックス]
<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">&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>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+1

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

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

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

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

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

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

参考

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

0

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

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){
    // 省略
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/28 02:42

    htsign様

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

    キャンセル

0

選択されないでボタンを押すとボタンが無効化されている
ここがよく分からなかったのですが、とりあえずjsFiddleで書いてみました。

なお、送信ボタンがtype="image" であるため、有効無効が視覚的に分かりにくいと思います。
これは
input[type="image"][disabled] {
    opacity: .5;
}
などとして区別させることはできそうです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/17 20:08

    nouzoさん

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

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

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

    キャンセル

  • 2015/04/18 13:28

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

    馬鹿にする意図はないのでお気を悪くされたら申し訳ないのですが、もしかすると私が書いた、あるいは他の方が書かれたコードをそのまま流用されてはいませんでしょうか。
    少なくとも私に関しては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"]');
    などとしていただく必要があります。

    キャンセル

  • 2015/04/18 19:57

    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);

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

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