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

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

ただいまの
回答率

89.20%

複数選択可能のチェックボックスを、必須選択にする

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,692

nyowaa

score 13

いつもご親切かつ丁寧に回答くださる方ありがとうございます。

前提・実現したいこと

タイトルにも表記しています通り、複数選択可能のチェックボックスがある場合、一つ以上を必須にしたいと思っております。
そこで、「複数選択チェックボックスを入力必須にする」「jquery.validate.jsでチェックボックスを必須化して、最低ひとつはチェックしないとエラーがでるようにする」を参考にスクリプトを書いてみたのですが、チェックボックスを選択しなくてもページ遷移(回答ありがとうございました、のような結果が出力されるページです)してしまいます。

<script>
$(document).ready(function(){
    $("#form").validate({
        rules:{
            '#checkBtn': {required: true}
        },
        messages :{
            '#checkBtn':{required: "1つ以上選択してください"}
        },
        errorPlacement :function(error,element){
            if (element.attr("id") == "#checkBtn" ) error.insertAfter("#error");
            else (element.attr("id") == "id" ) error.insertAfter(element);
        }
    });
});
</script>
echo '<p align="left" style="display:inline-block;">';
    for($j=1; $j<=10; $j++){
        if($col['format']==$frmtR){
        //ラジオボタン
            if($col['answer'.$j]){
                if($col['required'.$k]){
                    echo"<input required type='radio' name='question{$question_count}' value='".$col['answer'.$j]."'>".$col['answer'.$j].'<br>';
                }else{
                    echo"<input type='radio' name='question{$question_count}' value='".$col['answer'.$j]."'>".$col['answer'.$j].'<br>';
                }
            }
        }elseif($col['format']==$frmtC){
        //チェックボックス
            echo '<div id="error">';
            if($col['answer'.$j]){
                    if($col['required'.$k]){
                            echo"<input type='checkbox' name='question{$question_count}[]' value='".$col['answer'.$j]."' id='checkBtn'>".$col['answer'.$j].'<br>';
                    }else{
                            echo"<input type='checkbox' name='question{$question_count}[]' value='".$col['answer'.$j]."'>".$col['answer'.$j].'<br>';
                    }
            }
            echo'</div>';
        }elseif($col['format']==$frmtT){
        //テキストボックス
            if($col['answer'.$j]){
                if($col['required'.$k]){
                    echo"<input required type='text' name='question{$question_count}' value=''>".$col['answer'.$j].'<br>';
                }else{
                    echo"<input type='text' name='question{$question_count}' value=''>".$col['answer'.$j].'<br>';
                }
            }
        }
    }
$question_count++;

    //その他
    if($col['other'.$k]){
        echo $col['other'.$k]."<input type='text' name='question{$question_count}' id='question{$question_count}' value=''>";
    }
echo "<input type='hidden' name='question_id' value='".$col['questionnaires_id']."'>";
}
echo'</p>';


このように、条件分岐でチェックボックスを取得してきております。

試したこと

参考させていただいたページのとおりにnameの部分を使って実行してみたのですが、チェックボックスを選択しなくても送信されてしまいました。

補足情報(言語/FW/ツール等のバージョンなど)

PHPのバージョンは5.3.1です。
エディタはサクラエディタを利用しています。

追記

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" ;/>
<link href="css/questionStyle.css" type="text/css" rel="stylesheet">
<title>アンケート</title>

<script>
$(document).ready(function(){
    $("#form").validate({
        rules:{
            '#checkBtn': {required: true}
        },
        messages :{
            '#checkBtn':{required: "1つ以上選択してください"}
        },
        errorPlacement :function(error,element){
            if (element.attr("id") == "#checkBtn" ) error.insertAfter("#error");
            else (element.attr("id") == "id" ) error.insertAfter(element);
        }
    });
});
</script>

</head>
<body>

<form action ="send.php" method="post" id="form">
<h1 align="center">あんけえと</h1>
<hr>
<div class="question" align="center">
<p>Q1.くえすちょん</p>
<p align="left" style="display:inline-block;">
    <input type='checkbox' name='question1[]' value='いち' id='required'>いち<br>
    <input type='checkbox' name='question1[]' value='に' id='required'><br>
    <input type='checkbox' name='question1[]' value='さん' id='required'>さん<br>
    <input type='checkbox' name='question1[]' value='よん' id='required'>よん<br>
    <input type='checkbox' name='question1[]' value='ご' id='required'><br>
    <input type='hidden' name='question_id' value='1'>
</p>
</div>
<div align="right">
    <input type="submit" value="送信する" id="send" class="send" name="send" style="width:100px; height:30px;">
</div>
</form>
<div id="error">
</div>
</body>
</html>

質問はHTMLベースでおこなってください。

PHPをブラウザで開き、ソースをコピーしてみたのですが、このような感じであっていますでしょうか?

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

クライアントサイドでバリデートするならphpで例示されても困ります。
質問はHTMLベースでおこなってください。

ラジオボタンやテキストボックスに「◯◯[]」のようなnameをつけるのも
あまりお勧めしません。

なおjavascriptでバリデートしても、ユーザーから送られてくるデータは
常に不正である前提で、サーバー側でもバリデートが必要ですのでご注意ください

<script>
$(function(){
  $('input[type=button][value=check]').on('click',function(){
    var flg=$('input[type=checkbox][name="hoge[]"]:checked').length>0;
    alert(flg?'OK':'NG!');
  });
});
</script>
<form>
<input type="checkbox" name="hoge[]" value="1">1<br>
<input type="checkbox" name="hoge[]" value="2">2<br>
<input type="checkbox" name="hoge[]" value="3">3<br>
<input type="button" value="check">
</form>

 追記

ご提示のソースだとidがユニークでないので問題です。
また、必須項目の情報をタグに持たせるかどうかは微妙ですね。
プログラム側で判断するなら、こんな感じです

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $("#form").on('submit',function(e){
    var flg=$(this).find('input[name="question1[]"]:checked').length==0;
    if(flg){
      e.preventDefault();
      alert("1つ以上選択してください");
    }
  });
});
</script>

</head>
<body>

<form action ="send.php" method="post" id="form">
<h1 align="center">あんけえと</h1>
<hr>
<div class="question" align="center">
<p>Q1.くえすちょん</p>
<p align="left" style="display:inline-block;">
    <input type='checkbox' name='question1[]' value='いち'>いち<br>
    <input type='checkbox' name='question1[]' value='に'><br>
    <input type='checkbox' name='question1[]' value='さん'>さん<br>
    <input type='checkbox' name='question1[]' value='よん'>よん<br>
    <input type='checkbox' name='question1[]' value='ご'><br>
    <input type='hidden' name='question_id' value='1'>
</p>
</div>
<div align="right">
<input type="submit" value="送信する" id="send" name="send" style="width:100px; height:30px;">
</div>
</form>
<div id="error">
</div>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/14 11:43

    チェックせずに中途半端にかいてすみません。
    ケツが「[]」のアイテムがあるのに、チェックされてない場合という条件付けが必要ですね

    var flg=$(this).find('input[name$="[]"]').length>0 && $(this).find('input[name$="[]"]:checked').length==0;

    でどうでしょうか?

    キャンセル

  • 2016/12/14 11:55

    question_id をもっているんだから html 名称は question1→question で 統一とか
    question_id の値から selector を自動生成するとかね

    キャンセル

  • 2016/12/14 12:03

    ありがとうございます!コード付け足したら解決できました!
    長々と申し訳ありません、とても助かりました!

    キャンセル

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

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