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

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

ただいまの
回答率

88.63%

PHP:チェックボックスとテキストボックスを関連付けにし、未入力だった場合にエラーを出したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 508

akinco

score 17

【前提・やりたいこと】
下図のように、カタログを請求する問い合わせフォームを作っています。
jQueryで、チェックが入った際にテキストボックスをONにし、PHPで入力判定を行っています。

PHPで入力判定の際、チェックボックスと連動しているテキストボックスが未入力だった場合にエラーメッセージを出したいのですが、どのようにすればいいのでしょうか?ご教授ください。
イメージ説明

<!-- 問い合わせ入力フォーム -->
<div class="cArea_1">
  <p class="part_1">
    <label class="checkbox_text">
      <!--<input id="fI_11" class="checkbox_input_1" type="checkbox" name="checked[]" value="カタログ一式(総合カタログ+製品カタログ全種)">-->
      <input id="fc_1" class="checkbox_input_1" type="checkbox" name="checked[]" value="カタログ一式(総合カタログ+製品カタログ全種)">
      <span class="checkbox_parts_1">カタログ一式(総合カタログ+製品カタログ全種)</span>
    </label>
  </p>
  <p class="part_1">
    <label class="checkbox_text">
      <!--<input id="fI_11" class="checkbox_input_1" type="checkbox" name="checked[]" value="総合カタログ">-->
      <input id="fc_2" class="checkbox_input_1" type="checkbox" name="checked[]" value="総合カタログ">
      <span class="checkbox_parts_1">総合カタログ</span>
    </label>
  </p>
  <p class="part_1">
    <label class="checkbox_text">
      <!--<input id="fI_11" class="checkbox_input_1" type="checkbox" name="checked[]" value="製品1">-->
      <input id="fc_3" class="checkbox_input_1" type="checkbox" name="checked[]" value="製品1">
      <span class="checkbox_parts_1">製品1</span>
    </label>
  </p>
  <p class="part_1">
    <label class="checkbox_text">
      <!--<input id="fI_11" class="checkbox_input_1" type="checkbox" name="checked[]" value="製品2">-->
      <input id="fc_4" class="checkbox_input_1" type="checkbox" name="checked[]" value="製品2">
      <span class="checkbox_parts_1">製品2</span>
    </label>
  </p>
</div>

<div class="cArea_2">
  <p class="part_2">
    <!--<input id="fI_09" name="number[]" value=""  maxlength="3" type="text" disabled="disabled">-->
    <input id="fn_1" name="number[]" value=""  maxlength="3" type="text" disabled="disabled"></p>
  <p class="part_2">
    <!--<input id="fI_09" name="number[]" value=""  maxlength="3" type="text" disabled="disabled">-->
    <input id="fn_2" name="number[]" value=""  maxlength="3" type="text" disabled="disabled"></p>
  <p class="part_2">
    <!--<input id="fI_09" name="number[]" value=""  maxlength="3" type="text" disabled="disabled">-->
    <input id="fn_3" name="number[]" value=""  maxlength="3" type="text" disabled="disabled"></p>
  <p class="part_2">
    <!--<input id="fI_09" name="number[]" value=""  maxlength="3" type="text" disabled="disabled">-->
    <input id="fn_4" name="number[]" value=""  maxlength="3" type="text" disabled="disabled"></p>
</div>
// エラー表示設定
$temp_err = [
    '__Error_Input_Data__'        => '必須項目が未入力です。'
,    '__Error_Marge_Data__'        => '入力された内容に不足があります'
,    '__Error_Mail_Address__'    => 'メールアドレスが正しくありません'
,    '__Error_Mail_Check__'        => 'メールアドレスが一致しません'
,    '__Error_CheckBox_Check__'        => 'ご希望のカタログを1つ以上選択してください。'
,    '__Error_Number_Check__'        => 'ご希望のカタログ部数を入力してください。'
,    '__Error_Text_Max__'        => '文字数が多すぎます(__Text_Max__字まで)'
];

unset($_SESSION['SFM']);
$error = $email = '';
foreach ($_POST as $key => $value) {
  $name = preg_replace('/(.+)_s$/', "$1", $key);
  if ($value == 'none') {
   $value = '';
  }
  if (is_array($value)) {
   $value = $this->valueMarge($key, $value, $cfg['name_marge']);
   if ($value == '__Error_Marge_Data__') {
    $error = 1;
   }
  }
   $value = mb_convert_kana($value, 'KV', $cfg['internal_enc']);
  if (preg_match('/_s$/', $key) && $value == '') {
   $_SESSION['SFM'][$name] = '__Error_Input_Data__';
   $error = 1;
  } elseif ($name == 'email' && $value) {
   if (!preg_match("/^[\w\-\.]+\@[\w\-\.]+\.([a-z]+)$/", $value)) {
    $_SESSION['SFM']['email'] = '__Error_Mail_Address__';
    $error = $email = 1;
  } else {
    $_SESSION['SFM']['email'] = $email = $value;
   }
  } elseif ($name == 'emailcheck') {
   if ($email != 1 && $email != $value) {
    $_SESSION['SFM']['email'] = '__Error_Mail_Check__';
    $error = 1;
   }
  } elseif ($name == 'checked') {
    if (($_POST[$name]) === "") {
    $_SESSION['SFM'][$name] = '__Error_CheckBox_Check__';
    $error = 1;
   } else {
  if (isset($_POST[$name]) && is_array($_POST[$name])) {
   $_SESSION['SFM'][$name] = $value;
    }
   }
  } elseif ($cfg['maxText'] && strlen($value) > $cfg['maxText']) {
   $_SESSION['SFM'][$name] = '__Error_Text_Max__';
   $error = 1;
  } else {
   $_SESSION['SFM'][$name] = $value;
   }
  }
<!-- 確認画面 -->
<table>
 <tr>
  <th class="fItem_01">ご希望カタログ<span class="req">必須</span></th><!-- .fItem_01 -->
  <td class="fItem_02">
   <div class="inner_3">
    <div class="cArea_1">
     <?php echo $sfm_html->checked; ?>
    </div>
    <div class="cArea_2">
     <?php echo $sfm_html->number."部";?>
    </div>
   </div>
  </td>
 </tr>
</table>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2018/11/26 17:49

    前もそうだったと思うのですが同じページに同じidは設定できませんので、まずそこを直すところから

    キャンセル

  • akinco

    2018/11/26 18:17

    >yambejp様 いつもありがとうございます。ご指摘いただきました箇所を修正しました。

    キャンセル

回答 1

checkベストアンサー

0

こんな感じで
JSの初期処理を追加

<?PHP
//修正:$checked=filter_input(INPUT_POST,"checked",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
$checked=filter_input(INPUT_POST,"checked",FILTER_DEFAULT,["options"=>["default"=>[]],"flags"=>FILTER_REQUIRE_ARRAY]);
$number=filter_input(INPUT_POST,"number",FILTER_VALIDATE_INT,FILTER_REQUIRE_ARRAY);
$error=[];
foreach(array_keys($checked) as $key){
  if(!isset($number[$key]) or empty($number[$key])){
    $error[$key]="<span style='color:red'>数書け!!</span>";
  }
};
?>
<script>
HTMLElement.prototype.trigger=function(eventStr){
  if (document.createEvent) {
    var e = document.createEvent("HTMLEvents");
    e.initEvent(eventStr, true, true );
    return this.dispatchEvent(e);
  } else {
    var e = document.createEventObject();
    return this.fireEvent("on"+eventStr, e);
  }
};
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('.checkbox_input_1'),function(x){
    x.addEventListener('change',function(e){
      document.querySelector('[name="'+x.dataset["target"]+'"]').disabled=!e.target.checked;
    });
    x.trigger('change');
  });
});
</script>
<form method="post">
<p class="part_1">
<label class="checkbox_text">
<input class="checkbox_input_1" type="checkbox" name="checked[0]" data-target="number[0]" value="カタログ一式(総合カタログ+製品カタログ全種)">
<span class="checkbox_parts_1">カタログ一式(総合カタログ+製品カタログ全種)</span>
</label>
</p>
<div class="cArea_2">
<p class="part_2">
<input name="number[0]" value=""  maxlength="3" type="text" disabled required></p>
</div>
<p class="part_1">
<label class="checkbox_text">
<input class="checkbox_input_1" type="checkbox" name="checked[1]" data-target="number[1]" value="総合カタログ">
<span class="checkbox_parts_1">総合カタログ</span>
</label>
</p>
<div class="cArea_2">
<p class="part_2">
<input name="number[1]" value=""  maxlength="3" type="text" disabled required></p>
</div>
<p class="part_1">
<label class="checkbox_text">
<input class="checkbox_input_1" type="checkbox" name="checked[2]" data-target="number[2]" value="製品1">
<span class="checkbox_parts_1">製品1</span>
</label>
</p>
<div class="cArea_2">
<p class="part_2">
<input name="number[2]" value=""  maxlength="3" type="text" disabled required></p>
</div>
<p class="part_1">
<label class="checkbox_text">
<input class="checkbox_input_1" type="checkbox" name="checked[3]" data-target="number[3]" value="製品2">
<span class="checkbox_parts_1">製品2</span>
</label>
</p>
<div class="cArea_2">
<p class="part_2">
<input name="number[3]" value=""  maxlength="3" type="text" disabled required></p>
</div>
<input type="submit" value="go">
</form>

 errorをまとめて表記

<?PHP
$checked=filter_input(INPUT_POST,"checked",FILTER_DEFAULT,["options"=>["default"=>[]],"flags"=>FILTER_REQUIRE_ARRAY]);
$number=filter_input(INPUT_POST,"number",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
$error=[];
foreach(array_keys($checked) as $key){
  if(!isset($number[$key]) or (int)$number[$key]===0){
    $error[$key]="<span style='color:red'>数書け!!</span>";
  }
};
?>
<script>
HTMLElement.prototype.trigger=function(eventStr){
  if (document.createEvent) {
    var e = document.createEvent("HTMLEvents");
    e.initEvent(eventStr, true, true );
    return this.dispatchEvent(e);
  } else {
    var e = document.createEventObject();
    return this.fireEvent("on"+eventStr, e);
  }
};
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('.checkbox_input_1'),function(x){
    x.addEventListener('change',function(e){
      document.querySelector('[name="'+x.dataset["target"]+'"]').disabled=!e.target.checked;
    });
    x.trigger('change');
  });
});
</script>
<form method="post">
<p class="part_1">
<label class="checkbox_text">
<input class="checkbox_input_1" type="checkbox" name="checked[0]" data-target="number[0]" value="カタログ一式(総合カタログ+製品カタログ全種)">
<span class="checkbox_parts_1">カタログ一式(総合カタログ+製品カタログ全種)</span>
</label>
</p>
<div class="cArea_2">
<p class="part_2">
<input name="number[0]" value=""  maxlength="3" type="text" disabled required></p>
</div>
<p class="part_1">
<label class="checkbox_text">
<input class="checkbox_input_1" type="checkbox" name="checked[1]" data-target="number[1]" value="総合カタログ">
<span class="checkbox_parts_1">総合カタログ</span>
</label>
</p>
<div class="cArea_2">
<p class="part_2">
<input name="number[1]" value=""  maxlength="3" type="text" disabled required></p>
</div>
<p class="part_1">
<label class="checkbox_text">
<input class="checkbox_input_1" type="checkbox" name="checked[2]" data-target="number[2]" value="製品1">
<span class="checkbox_parts_1">製品1</span>
</label>
</p>
<div class="cArea_2">
<p class="part_2">
<input name="number[2]" value=""  maxlength="3" type="text" disabled required></p>
</div>
<p class="part_1">
<label class="checkbox_text">
<input class="checkbox_input_1" type="checkbox" name="checked[3]" data-target="number[3]" value="製品2">
<span class="checkbox_parts_1">製品2</span>
</label>
</p>
<div class="cArea_2">
<p class="part_2">
<input name="number[3]" value=""  maxlength="3" type="text" disabled required></p>
</div>
<input type="submit" value="go">
</form>
<?php
foreach($checked as $key=>$val){
  print $key.")".$val.":";
  if(isset($error[$key])){
    print $error[$key]."[".htmlspecialchars(@$number[$key])."]<br>";
  }else{
    print "[".htmlspecialchars(@$number[$key])."]<br>";
  }
}
?>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/27 16:35

    なんとなく調整しました

    キャンセル

  • 2018/12/03 11:22

    ご連絡が遅くなり申し訳ありません。
    いただいたソースを元に、週末試行錯誤してみましたが思い通りの動作になりません。
    例えば
    ●製品1 2部
    ●製品2 部数入力無し
    とした場合、
    ●製品1 数書け!
    ●製品2 数書け!
    となるので、$number[$key]にフラグを立てて、判別すればいいのか?と
    考えているのですが、そのようなことはできるのでしょうか?
    それとも、もっといい方法があるのでしょうか?

    キャンセル

  • 2018/12/04 09:40

    ご提示いただいたソースを参考に、思う動作にすることができました。
    ありがとうございました。

    キャンセル

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

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

関連した質問

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

  • トップ
  • PHPに関する質問
  • PHP:チェックボックスとテキストボックスを関連付けにし、未入力だった場合にエラーを出したい