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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

バリデーション

Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

981閲覧

同一ページにおける複数のバリデーションチェックとsubmitボタンの扱いに関して

penginer

総合スコア32

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

バリデーション

Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/03/04 07:12

編集2022/01/12 10:55

前提・実現したいこと

現在以下のような機能をもった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. ボタンをどう設計するか

  1. どのようにバリデーションチェックをスタートさせるか

がわからないからです。

該当のソースコード

尚、ソースコードは以下の通りです

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/03/05 04:19

「バリデーションチェックはPHPで行う」ならデータは送信されると思います。データなしで検証というのはどういうことでしょうか?
penginer

2018/03/14 10:08

データを送信(ボタンを操作)してもページ遷移をさせず、バリデーションチェックを行うだけにしたい。という状況です。
x_x

2018/03/14 11:21

であれば条件が変わってきますので「データ自体は送信しないようにする。」を修正してください。ただのAjaxによるチェックになるかと思います。
guest

回答1

0

雑な回答ですいません。ヒントとして読んでください。
1.
<button type="submit" disabled>
で、押せないボタンが作れます
javascriptで、
$('#buttonid').disabled = false
でdisable解除

2.
changedで発火させてその値のバリデーションを行い通れば次を開けるという流れが自然だと思います。

javascript

1$(function () { 2 $('#inputA')changed( function () { 3 if(validA()){ 4 openB(); 5 } else { 6 closeB(); 7 closeC(); 8 closeD(); 9 $('#buttonid').disabled = true; 10 } 11 }; 12 $('#inputB')changed( function () { 13 if(validB()){ 14 openC(); 15 } else { 16 closeC(); 17 closeD(); 18 $('#buttonid').disabled = true; 19 } 20 }; 21 $('#inputC')changed( function () { 22 if(validC()){ 23 openD(); 24 } else { 25 closeD(); 26 $('#buttonid').disabled = true; 27 } 28 }; 29 $('#inputD')changed( function () { 30 if(validD()){ 31 $('#buttonid').disabled = false; 32 } 33 }; 34}

投稿2018/04/28 13:53

vapordog

総合スコア192

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問