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

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

HTML
1<!-- 問い合わせ入力フォーム -->
2<div class="cArea_1">
3  <p class="part_1">
4    <label class="checkbox_text">
5      <!--<input id="fI_11" class="checkbox_input_1" type="checkbox" name="checked[]" value="カタログ一式（総合カタログ＋製品カタログ全種）">-->
6      <input id="fc_1" class="checkbox_input_1" type="checkbox" name="checked[]" value="カタログ一式（総合カタログ＋製品カタログ全種）">
7      <span class="checkbox_parts_1">カタログ一式（総合カタログ＋製品カタログ全種）</span>
8    </label>
9  </p>
10  <p class="part_1">
11    <label class="checkbox_text">
12      <!--<input id="fI_11" class="checkbox_input_1" type="checkbox" name="checked[]" value="総合カタログ">-->
13      <input id="fc_2" class="checkbox_input_1" type="checkbox" name="checked[]" value="総合カタログ">
14      <span class="checkbox_parts_1">総合カタログ</span>
15    </label>
16  </p>
17  <p class="part_1">
18    <label class="checkbox_text">
19      <!--<input id="fI_11" class="checkbox_input_1" type="checkbox" name="checked[]" value="製品１">-->
20      <input id="fc_3" class="checkbox_input_1" type="checkbox" name="checked[]" value="製品１">
21      <span class="checkbox_parts_1">製品１</span>
22    </label>
23  </p>
24  <p class="part_1">
25    <label class="checkbox_text">
26      <!--<input id="fI_11" class="checkbox_input_1" type="checkbox" name="checked[]" value="製品２">-->
27      <input id="fc_4" class="checkbox_input_1" type="checkbox" name="checked[]" value="製品２">
28      <span class="checkbox_parts_1">製品２</span>
29    </label>
30  </p>
31</div>
32
33<div class="cArea_2">
34  <p class="part_2">
35    <!--<input id="fI_09" name="number[]" value=""  maxlength="3" type="text" disabled="disabled">-->
36    <input id="fn_1" name="number[]" value=""  maxlength="3" type="text" disabled="disabled"> 部
37  </p>
38  <p class="part_2">
39    <!--<input id="fI_09" name="number[]" value=""  maxlength="3" type="text" disabled="disabled">-->
40    <input id="fn_2" name="number[]" value=""  maxlength="3" type="text" disabled="disabled"> 部
41  </p>
42  <p class="part_2">
43    <!--<input id="fI_09" name="number[]" value=""  maxlength="3" type="text" disabled="disabled">-->
44    <input id="fn_3" name="number[]" value=""  maxlength="3" type="text" disabled="disabled"> 部
45  </p>
46  <p class="part_2">
47    <!--<input id="fI_09" name="number[]" value=""  maxlength="3" type="text" disabled="disabled">-->
48    <input id="fn_4" name="number[]" value=""  maxlength="3" type="text" disabled="disabled"> 部
49  </p>
50</div>

PHP
1// エラー表示設定
2$temp_err = [
3	'__Error_Input_Data__'		=> '必須項目が未入力です。'
4,	'__Error_Marge_Data__'		=> '入力された内容に不足があります'
5,	'__Error_Mail_Address__'	=> 'メールアドレスが正しくありません'
6,	'__Error_Mail_Check__'		=> 'メールアドレスが一致しません'
7,	'__Error_CheckBox_Check__'		=> 'ご希望のカタログを１つ以上選択してください。'
8,	'__Error_Number_Check__'		=> 'ご希望のカタログ部数を入力してください。'
9,	'__Error_Text_Max__'		=> '文字数が多すぎます（__Text_Max__字まで）'
10];
11
12unset($_SESSION['SFM']);
13$error = $email = '';
14foreach ($_POST as $key => $value) {
15  $name = preg_replace('/(.+)_s$/', "$1", $key);
16  if ($value == 'none') {
17   $value = '';
18  }
19  if (is_array($value)) {
20   $value = $this->valueMarge($key, $value, $cfg['name_marge']);
21   if ($value == '__Error_Marge_Data__') {
22    $error = 1;
23   }
24  }
25   $value = mb_convert_kana($value, 'KV', $cfg['internal_enc']);
26  if (preg_match('/_s$/', $key) && $value == '') {
27   $_SESSION['SFM'][$name] = '__Error_Input_Data__';
28   $error = 1;
29  } elseif ($name == 'email' && $value) {
30   if (!preg_match("/^[\w\-.]+\@[\w\-.]+.([a-z]+)$/", $value)) {
31    $_SESSION['SFM']['email'] = '__Error_Mail_Address__';
32    $error = $email = 1;
33  } else {
34    $_SESSION['SFM']['email'] = $email = $value;
35   }
36  } elseif ($name == 'emailcheck') {
37   if ($email != 1 && $email != $value) {
38    $_SESSION['SFM']['email'] = '__Error_Mail_Check__';
39    $error = 1;
40   }
41  } elseif ($name == 'checked') {
42    if (($_POST[$name]) === "") {
43    $_SESSION['SFM'][$name] = '__Error_CheckBox_Check__';
44    $error = 1;
45   } else {
46  if (isset($_POST[$name]) && is_array($_POST[$name])) {
47   $_SESSION['SFM'][$name] = $value;
48    }
49   }
50  } elseif ($cfg['maxText'] && strlen($value) > $cfg['maxText']) {
51   $_SESSION['SFM'][$name] = '__Error_Text_Max__';
52   $error = 1;
53  } else {
54   $_SESSION['SFM'][$name] = $value;
55   }
56  }

HTML
1<!-- 確認画面 -->
2<table>
3 <tr>
4  <th class="fItem_01">ご希望カタログ<span class="req">必須</span></th><!-- .fItem_01 -->
5  <td class="fItem_02">
6   <div class="inner_3">
7    <div class="cArea_1">
8     <?php echo $sfm_html->checked; ?>
9    </div>
10    <div class="cArea_2">
11     <?php echo $sfm_html->number."部";?>
12    </div>
13   </div>
14  </td>
15 </tr>
16</table>

yambejp

2018/11/26 08:49

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

akinco

2018/11/26 09:17

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

PHP
1<?PHP
2//修正：$checked=filter_input(INPUT_POST,"checked",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
3$checked=filter_input(INPUT_POST,"checked",FILTER_DEFAULT,["options"=>["default"=>[]],"flags"=>FILTER_REQUIRE_ARRAY]);
4$number=filter_input(INPUT_POST,"number",FILTER_VALIDATE_INT,FILTER_REQUIRE_ARRAY);
5$error=[];
6foreach(array_keys($checked) as $key){
7  if(!isset($number[$key]) or empty($number[$key])){
8    $error[$key]="<span style='color:red'>数書け!!</span>";
9  }
10};
11?>
12<script>
13HTMLElement.prototype.trigger=function(eventStr){
14  if (document.createEvent) {
15    var e = document.createEvent("HTMLEvents");
16    e.initEvent(eventStr, true, true );
17    return this.dispatchEvent(e);
18  } else {
19    var e = document.createEventObject();
20    return this.fireEvent("on"+eventStr, e);
21  }
22};
23window.addEventListener('DOMContentLoaded', function(e){
24  [].forEach.call(document.querySelectorAll('.checkbox_input_1'),function(x){
25    x.addEventListener('change',function(e){
26      document.querySelector('[name="'+x.dataset["target"]+'"]').disabled=!e.target.checked;
27    });
28    x.trigger('change');
29  });
30});
31</script>
32<form method="post">
33<p class="part_1">
34<label class="checkbox_text">
35<input class="checkbox_input_1" type="checkbox" name="checked[0]" data-target="number[0]" value="カタログ一式（総合カタログ＋製品カタログ全種）">
36<span class="checkbox_parts_1">カタログ一式（総合カタログ＋製品カタログ全種）</span>
37</label>
38</p>
39<div class="cArea_2">
40<p class="part_2">
41<input name="number[0]" value=""  maxlength="3" type="text" disabled required> 部
42</p>
43</div>
44<p class="part_1">
45<label class="checkbox_text">
46<input class="checkbox_input_1" type="checkbox" name="checked[1]" data-target="number[1]" value="総合カタログ">
47<span class="checkbox_parts_1">総合カタログ</span>
48</label>
49</p>
50<div class="cArea_2">
51<p class="part_2">
52<input name="number[1]" value=""  maxlength="3" type="text" disabled required> 部
53</p>
54</div>
55<p class="part_1">
56<label class="checkbox_text">
57<input class="checkbox_input_1" type="checkbox" name="checked[2]" data-target="number[2]" value="製品１">
58<span class="checkbox_parts_1">製品１</span>
59</label>
60</p>
61<div class="cArea_2">
62<p class="part_2">
63<input name="number[2]" value=""  maxlength="3" type="text" disabled required> 部
64</p>
65</div>
66<p class="part_1">
67<label class="checkbox_text">
68<input class="checkbox_input_1" type="checkbox" name="checked[3]" data-target="number[3]" value="製品２">
69<span class="checkbox_parts_1">製品２</span>
70</label>
71</p>
72<div class="cArea_2">
73<p class="part_2">
74<input name="number[3]" value=""  maxlength="3" type="text" disabled required> 部
75</p>
76</div>
77<input type="submit" value="go">
78</form>
79

errorをまとめて表記

PHP
1<?PHP
2$checked=filter_input(INPUT_POST,"checked",FILTER_DEFAULT,["options"=>["default"=>[]],"flags"=>FILTER_REQUIRE_ARRAY]);
3$number=filter_input(INPUT_POST,"number",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
4$error=[];
5foreach(array_keys($checked) as $key){
6  if(!isset($number[$key]) or (int)$number[$key]===0){
7    $error[$key]="<span style='color:red'>数書け!!</span>";
8  }
9};
10?>
11<script>
12HTMLElement.prototype.trigger=function(eventStr){
13  if (document.createEvent) {
14    var e = document.createEvent("HTMLEvents");
15    e.initEvent(eventStr, true, true );
16    return this.dispatchEvent(e);
17  } else {
18    var e = document.createEventObject();
19    return this.fireEvent("on"+eventStr, e);
20  }
21};
22window.addEventListener('DOMContentLoaded', function(e){
23  [].forEach.call(document.querySelectorAll('.checkbox_input_1'),function(x){
24    x.addEventListener('change',function(e){
25      document.querySelector('[name="'+x.dataset["target"]+'"]').disabled=!e.target.checked;
26    });
27    x.trigger('change');
28  });
29});
30</script>
31<form method="post">
32<p class="part_1">
33<label class="checkbox_text">
34<input class="checkbox_input_1" type="checkbox" name="checked[0]" data-target="number[0]" value="カタログ一式（総合カタログ＋製品カタログ全種）">
35<span class="checkbox_parts_1">カタログ一式（総合カタログ＋製品カタログ全種）</span>
36</label>
37</p>
38<div class="cArea_2">
39<p class="part_2">
40<input name="number[0]" value=""  maxlength="3" type="text" disabled required> 部
41</p>
42</div>
43<p class="part_1">
44<label class="checkbox_text">
45<input class="checkbox_input_1" type="checkbox" name="checked[1]" data-target="number[1]" value="総合カタログ">
46<span class="checkbox_parts_1">総合カタログ</span>
47</label>
48</p>
49<div class="cArea_2">
50<p class="part_2">
51<input name="number[1]" value=""  maxlength="3" type="text" disabled required> 部
52</p>
53</div>
54<p class="part_1">
55<label class="checkbox_text">
56<input class="checkbox_input_1" type="checkbox" name="checked[2]" data-target="number[2]" value="製品１">
57<span class="checkbox_parts_1">製品１</span>
58</label>
59</p>
60<div class="cArea_2">
61<p class="part_2">
62<input name="number[2]" value=""  maxlength="3" type="text" disabled required> 部
63</p>
64</div>
65<p class="part_1">
66<label class="checkbox_text">
67<input class="checkbox_input_1" type="checkbox" name="checked[3]" data-target="number[3]" value="製品２">
68<span class="checkbox_parts_1">製品２</span>
69</label>
70</p>
71<div class="cArea_2">
72<p class="part_2">
73<input name="number[3]" value=""  maxlength="3" type="text" disabled required> 部
74</p>
75</div>
76<input type="submit" value="go">
77</form>
78<?php
79foreach($checked as $key=>$val){
80  print $key.")".$val.":";
81  if(isset($error[$key])){
82    print $error[$key]."[".htmlspecialchars(@$number[$key])."]<br>";
83  }else{
84    print "[".htmlspecialchars(@$number[$key])."]<br>";
85  }
86}
87?>
88

投稿2018/11/26 09:26

編集2018/11/27 07:34

yambejp

総合スコア114810

akinco

2018/11/27 05:31

>yambejp様いつもありがとうございます。返答が遅くなりまして申し訳ございません。 array_keys() expects parameter 1 to be array, null given in... Invalid argument supplied for foreach()... エラーがでましたので、　foreach(array_keys((array)$checked) as $key){ と修正しましたが、問題ないでしょうか？また、history.back()で戻った際に、name="number[]"がdisabledとなるのを回避する方法はありますでしょうか？

yambejp

2018/11/27 05:40

$checkedのとり方をちょっと調子しました

yambejp

2018/11/27 05:49

js戻ったときの処理を入れておきました

akinco

2018/11/27 06:34

早速の返答ありがとうございます。度々の質問ですみません。 <?php print isset($error[0])?$error[0]:""; ?> ですが、キーを指定せずに1つの構文で表示することはできるのでしょうか？また、falesの場合には echo $sfm_html->number."部"; を表示させたいです…。

yambejp

2018/11/27 06:44

ごめんなさいどういったエラー表記を希望しているかわかりません。提示したようなspanを指定したエラーではなくなにか特別な書き方を希望されているのでしょうか？姑息なやり方としては print @$error[0]; でもいけますが・・・

akinco

2018/11/27 06:48

修正いただいたコードに変更し、チェックをせずに確認画面へ飛んだ際下記エラーがでました。 array_keys() expects parameter 1 to be array, boolean given in Invalid argument supplied for foreach() in foreach(array_keys((array)$checked) as $key){ とすると、出ませんでした。

akinco

2018/11/27 07:05

説明下手で大変申し訳ありません。 spanを指定したエラー表示で大丈夫です。ただ、表示方法を↓のように一ヶ所でまとめたいのですがコードが長くなるので、シンプルに表記する術があったらいいな・・・と思った次第です。ページの動きとしては、入力画面(contact.html)→確認画面(confirm.php)となっています。確認画面のほうに <div class="cArea_2"> <?php print isset($error[0])?$error[0]:""; print isset($error[1])?$error[1]:""; print isset($error[2])?$error[2]:""; print isset($error[3])?$error[3]:""; ?> <?php echo $sfm_html->number."部";?>　//入力された数字を表示 </div> と記載して、エラー表示されるまでは確認できたのですが上記だと、”数書け！部”　と表示されてしまうため(苦笑) エラーでない場合は、入力された数字を表示するようにしたいです。

yambejp

2018/11/27 07:35

なんとなく調整しました

akinco

2018/12/03 02:22

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

akinco

2018/12/04 00:40

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

行動規範の内容に同意します