前提・実現したいこと
現在以下のような機能をもった1ページのフォームを実装しようとしています。
0. チェックボックスにチェックをしたら隠れていたページが表示される。
0. チェックボックス自体はCSSを用いて隠し、白地の大きなボタンにする。
0. 隠されたページの中にはバリデーションチェックをするためのボタンがあり、押されたらその項目内のバリデーションチェックがされる。
その際データ自体は送信しないようにする。
0. 全てのバリデーションチェックでエラーがなければ確認画面に行くためのボタン(submit)が表示され、
押すと最終的なバリデーションチェックを行い、問題がなければ別ウィンドウで確認画面が出る。
尚、このようにしたのは
- 全部回答してからチェック後にエラーに戻るのは面倒くさいだろうから
- 後から前の回答を修正しようと思った時に面倒くさいことになるだろうから
という考えによるものです。
バリデーションチェックはAjaxで行います。
仕様としては
0. それぞれの項目においてその中のそれぞれの値を引数にした関数を作る。
0. バリデーションが通るならtrue、通らないならfalseを返す。
0. それぞれの項目において1における関数全てがtrueを返すならtrueを返す関数を作り、
それがtrueを返すならその項目のバリデーションチェックを終了とする。
0. 各項目において3における関数が全てtrueを返すならtrueを返す関数を作り、
trueを返したら全体のバリデーションチェックを終了とする。
簡略化してソースにすると以下の通りです。
PHP
1function A($a){ 2//$aの値によってtrueかfalseかを決める 3} 4function B($b){ 5//$bの値によってtrueかfalseかを決める 6} 7//これが1番と2番 8function C($a,$b){ 9if(A($a)==true&&B($b)==true)){ 10return true; 11}else{ 12return false; 13} 14} 15//これが3番 16function A1($a1){ 17//$a1の値によってtrueかfalseかを決める 18} 19function B1($b1){ 20//$b1の値によってtrueかfalseかを決める 21} 22//これが1番と2番 23function C1($a1,$b1){ 24if(A1($a1)==true&&B1($b1)==true)){ 25return true; 26}else{ 27return false; 28} 29} 30//これが3番 31function X($a,$b,$a1,$b1){ 32if(A($a)==true&&B($b)==true&&A1($a1)==true&&B1($b1)==true)){ 33return true; 34}else{ 35return false; 36} 37} 38//これが4番で表示を行うか判断する場所であり、trueなら最終的な提出ボタンを表示する。
発生している問題・エラーメッセージ
少なくともこの機能の実装のためには
"各項目ごとにバリデーションを行うためのボタン(項目の数だけ存在する)を設計し、その際データ自体は送信しないようにする。"
という機能が必要だと考えました。
1と2は完成し、4においてsubmitボタンを表示するアルゴリズムも大方できてはいますが
3と最終的なバリデーションチェックに関しては未だによくわからない状況です。
というのも、
「フォームが入れ子にできない、かつsubmitを使わなければボタンを押した際に処理はできない」という状況において
0. ボタンをどう設計するか
- どのようにバリデーションチェックをスタートさせるか
がわからないからです。
該当のソースコード
尚、ソースコードは以下の通りです
css
1.hidden_box label[class="survey"] { 2 padding: 15px; 3 font-weight: bold; 4 border: solid 2px black; 5 cursor :pointer; 6} 7 8/*チェックは見えなくする*/ 9.hidden_box input[class="survey"] { 10 display: none; 11} 12 13/*中身を非表示にしておく*/ 14.hidden_box .hidden_show { 15 height: 0; 16 padding: 0; 17 overflow: hidden; 18 opacity: 0; 19 transition: 0.8s; 20} 21 22/*クリックで中身表示*/ 23.hidden_box input[class="survey"]:checked ~ .hidden_show { 24 padding: 10px 0; 25 height: auto; 26 opacity: 1; 27} 28 29
PHP
1<form action="" method="post" autocomplete="off" id="a" target="_blank"> 2<!--actionのURIがまだ無いため現在は空白のままです。--> 3<!--隠すためのメインとなる部分のみ。hidden_boxクラスを繰り返してフォームを作るつもりです。--> 4<!--繰り返しここから--> 5<div class="hidden_box"> 6 <label for="label1" class="survey">属性</label> 7 <input type="checkbox" id="label1" class="survey" value="abc" form="validate"> 8 <div class="hidden_show"> 9 <!--非表示ここから--> 10 11 <!--フォームの中身--> 12 <input type="submit" form="validate"><!--ここでhidden_showクラスのバリデーションチェックを行いたいです--> 13 <!--非表示ここまで--> 14 </div> 15</div> 16<!--繰り返しここまで--> 17<input type="submit" value="x" form="validate"> 18<!--ここまででバリデーションチェックを行っており、全てに問題ないなら上のsubmitボタンを表示するつもりです--> 19</form>
補足情報(FW/ツールのバージョンなど)
PHP、XAMPP:最新版
OS:Windows10