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

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

ただいまの
回答率

89.10%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,489

penginer

score 32

 前提・実現したいこと

現在以下のような機能をもった1ページのフォームを実装しようとしています。

  1. チェックボックスにチェックをしたら隠れていたページが表示される。
  2. チェックボックス自体はCSSを用いて隠し、白地の大きなボタンにする。
  3. 隠されたページの中にはバリデーションチェックをするためのボタンがあり、押されたらその項目内のバリデーションチェックがされる。
    その際データ自体は送信しないようにする。
  4. 全てのバリデーションチェックでエラーがなければ確認画面に行くためのボタン(submit)が表示され、
    押すと最終的なバリデーションチェックを行い、問題がなければ別ウィンドウで確認画面が出る。

尚、このようにしたのは

  • 全部回答してからチェック後にエラーに戻るのは面倒くさいだろうから
  • 後から前の回答を修正しようと思った時に面倒くさいことになるだろうから

という考えによるものです。
バリデーションチェックはAjaxで行います。
仕様としては

  1. それぞれの項目においてその中のそれぞれの値を引数にした関数を作る。
  2. バリデーションが通るならtrue、通らないならfalseを返す。
  3. それぞれの項目において1における関数全てがtrueを返すならtrueを返す関数を作り、
    それがtrueを返すならその項目のバリデーションチェックを終了とする。
  4. 各項目において3における関数が全てtrueを返すならtrueを返す関数を作り、
    trueを返したら全体のバリデーションチェックを終了とする。
    簡略化してソースにすると以下の通りです。
function A($a){
//$aの値によってtrueかfalseかを決める
}
function B($b){
//$bの値によってtrueかfalseかを決める
}
//これが1番と2番
function C($a,$b){
if(A($a)==true&&B($b)==true)){
return true;
}else{
return false;
}
}
//これが3番
function A1($a1){
//$a1の値によってtrueかfalseかを決める
}
function B1($b1){
//$b1の値によってtrueかfalseかを決める
}
//これが1番と2番
function C1($a1,$b1){
if(A1($a1)==true&&B1($b1)==true)){
return true;
}else{
return false;
}
}
//これが3番
function X($a,$b,$a1,$b1){
if(A($a)==true&&B($b)==true&&A1($a1)==true&&B1($b1)==true)){
return true;
}else{
return false;
}
}
//これが4番で表示を行うか判断する場所であり、trueなら最終的な提出ボタンを表示する。

 発生している問題・エラーメッセージ

少なくともこの機能の実装のためには
"各項目ごとにバリデーションを行うためのボタン(項目の数だけ存在する)を設計し、その際データ自体は送信しないようにする。"
という機能が必要だと考えました。
1と2は完成し、4においてsubmitボタンを表示するアルゴリズムも大方できてはいますが
3と最終的なバリデーションチェックに関しては未だによくわからない状況です。
というのも、
「フォームが入れ子にできない、かつsubmitを使わなければボタンを押した際に処理はできない」という状況において

  1. ボタンをどう設計するか

  2. どのようにバリデーションチェックをスタートさせるか
    がわからないからです。

 該当のソースコード

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

.hidden_box label[class="survey"] {
    padding: 15px;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
}

/*チェックは見えなくする*/
.hidden_box input[class="survey"] {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box  input[class="survey"]:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
<form action="" method="post" autocomplete="off" id="a" target="_blank">
<!--actionのURIがまだ無いため現在は空白のままです。-->
<!--隠すためのメインとなる部分のみ。hidden_boxクラスを繰り返してフォームを作るつもりです。-->
<!--繰り返しここから-->
<div class="hidden_box">
    <label for="label1" class="survey">属性</label>
    <input type="checkbox" id="label1" class="survey" value="abc" form="validate">
    <div class="hidden_show">
      <!--非表示ここから-->

            <!--フォームの中身-->
    <input type="submit" form="validate"><!--ここでhidden_showクラスのバリデーションチェックを行いたいです-->
      <!--非表示ここまで-->
    </div>
</div>
<!--繰り返しここまで-->
<input type="submit" value="x" form="validate">
<!--ここまででバリデーションチェックを行っており、全てに問題ないなら上のsubmitボタンを表示するつもりです-->
</form>

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

PHP、XAMPP:最新版
OS:Windows10

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • x_x

    2018/03/05 13:19

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

    キャンセル

  • penginer

    2018/03/14 19:08

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

    キャンセル

  • x_x

    2018/03/14 20:21

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

    キャンセル

回答 1

0

雑な回答ですいません。ヒントとして読んでください。

  1.   <button type="submit" disabled>
    で、押せないボタンが作れます
    javascriptで、
    $('#buttonid').disabled = false
    でdisable解除

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

$(function () {
  $('#inputA')changed( function () {
    if(validA()){
      openB();
    } else {
      closeB();
      closeC();
      closeD();
      $('#buttonid').disabled = true;
    }
  };
  $('#inputB')changed( function () {
    if(validB()){
      openC();
    } else {
      closeC();
      closeD();
      $('#buttonid').disabled = true;
    }
  };
  $('#inputC')changed( function () {
    if(validC()){
      openD();
    } else {
      closeD();
      $('#buttonid').disabled = true;
    }
  };
  $('#inputD')changed( function () {
    if(validD()){
      $('#buttonid').disabled = false;
    }
  };
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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