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

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

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

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

Q&A

解決済

2回答

1148閲覧

[CakePHP] radioボタンの項目によってバリデーションを有効/無効にする方法

DaisukeMori

総合スコア226

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

0グッド

0クリップ

投稿2023/03/30 04:54

前提

  • CakePHP 2x

実現したいこと

radioボタンの項目によってバリデーションを有効/無効にしたい

メールを選択したらメールアドレスのみバリデーション有効
イメージ説明

電話を選択したら電話のみバリデーション有効
イメージ説明

問題点

メールと電話普通にバリデーションを書くだけだと
両方のバリデーションが動くため、未入力だと先に進めない。
かといってバリデーションなしだとUXが悪くなる。

実装イメージ

contact_kindのkeyがメールの値ならemailのバリデーションのみ有効
contact_kindのkeyが電話の値ならphoneのバリデーションのみ有効

参考コード

ビューファイル
views/root/index.ctp

ctp

1<?php echo $form->create(array('inputDefaults' => array('label' => false, 'div' => false, 'legend' => false), 'url' => true, 'id' => 'entry_form', 'class' => 'entry-form h-adr')); ?> 2 3ご希望連絡方法 4<?php echo $form->input('contact_kind', array('type' => 'radio', 'class' => 'contact_method inquiryRadio', 'options' => $select_data['contact_kind'], 'label' => true,)); ?> 5 6メールアドレス 7<?php e($form->input('email', array('div' => false, 'label' => false, 'class' => 'input zen_han', 'placeholder' => '例 example@example.jp'))); ?> 8 9電話番号 10<?php e($form->input('phone', array('div' => false, 'label' => false, 'class' => 'input zen_han', 'placeholder' => '例 09012345678'))); ?> 11 12<?php echo $form->end(); ?>

モデルファイル(バリデーション)
models/contact.php

php

1<?php 2 class Contact extends AppModel { 3 var $name = 'Contact'; 4 5 var $validate = array( 6 'contact_kind' => array( 7 'notempty' => array( 8 'rule' => array('notempty'), 9 'message' => '選択必須項目です', 10 'last' => true, // Stop validation after this rule 11 ), 12 ), 13 'email' => array( 14 'notempty' => array( 15 'rule' => array('notempty'), 16 'message' => '必須項目です', 17 'last' => true, // Stop validation after this rule 18 ), 19 'email' => array( 20 'rule' => 'email', 21 'message' => '正しいメールアドレス形式ではありません。', 22 ), 23 ), 24 'phone' => array( 25 'notempty' => array( 26 'rule' => array('notempty'), 27 'message' => '必須項目です', 28 'last' => true, // Stop validation after this rule 29 ), 30 'between' => array( 31 'rule' => array( 'custom', '/^(0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4})$/'), // ハイフンありとなし両方許容 32 'message' => '正しい電話番号形式ではありません。', 33 'last' => true, // Stop validation after this rule 34 ), 35 ), 36 ); 37 } 38?>

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

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

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

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

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

yambejp

2023/03/30 04:59

cakeの環境が手元に無いですが、出力されるHTMLを提示いただればjsで対応できそうな気がします
DaisukeMori

2023/03/30 05:33

CakePHPのFormヘルパーの出力HTML ブラウザのソースコードからそのままコピペしました ```html ご希望連絡方法 <input type="hidden" name="data[Contact][contact_kind]" id="ContactContactKind_" value="" /><input type="radio" name="data[Contact][contact_kind]" id="ContactContactKind1" class="contact_method inquiryRadio" value="1" /><label for="ContactContactKind1">メール</label><input type="radio" name="data[Contact][contact_kind]" id="ContactContactKind2" class="contact_method inquiryRadio" value="2" /> メールアドレス <input name="data[Contact][email]" type="text" class="input zen_han" placeholder="例 example@example.jp" maxlength="200" id="ContactEmail" /> 電話番号 <input name="data[Contact][phone]" type="text" class="input zen_han" placeholder="例 09012345678" maxlength="200" id="ContactPhone" /> ```
guest

回答2

0

自己解決

アプローチとしてコントローラー側から操作する方法で解決できました。

コントローラーの抜粋で申し訳ないですがあげておきます。
実務データの全ては公開できないのでご了承ください。
考え方のみ参考にお願いします。

php

1 // モデルにデータをセット 2 $this->Contact->set( $this->data ); 3 4 // ご希望連絡方法でのバリデーションの切り分け 5 // データがpostされたかつ、ご希望連絡方法がメールの場合 6 if ( !empty($this->data['Contact']) && $this->data['Contact']['contact_kind'] == '1' ) { 7 // 電話のバリデートをunsetする 8 unset($this->Contact->validate['phone']); 9 } 10 // データがpostされたかつ、ご希望連絡方法が電話の場合 11 if ( !empty($this->data['Contact']) && $this->data['Contact']['contact_kind'] == '2' ) { 12 // メールのバリデートをunsetする 13 unset($this->Contact->validate['email']); 14 }

投稿2023/03/30 07:02

DaisukeMori

総合スコア226

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

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

0

参考

ラジオボタンで当該箇所のdisabledも付け外しすればよいでしょう
HTML要素の特定の仕方は色々あると思うので一例です

javascript

1<script> 2const s='[name="data[Contact][contact_kind]"]'; 3window.addEventListener('DOMContentLoaded', ()=>{ 4 if(document.querySelectorAll(`${s}:checked`).length==0){ 5 document.querySelector(`${s}`).checked=true; 6 } 7}); 8document.addEventListener('change',()=>{ 9 const idx=[...document.querySelectorAll(s)].indexOf(document.querySelector(`${s}:checked`)); 10 document.querySelectorAll('.zen_han').forEach((x,y)=>{ 11 x.disabled=idx!==y; 12 }); 13}); 14</script> 15<input type="radio" name="data[Contact][contact_kind]" id="ContactContactKind1" class="contact_method inquiryRadio" value="1" /> 16<label for="ContactContactKind1">メール</label> 17<input type="radio" name="data[Contact][contact_kind]" id="ContactContactKind2" class="contact_method inquiryRadio" value="2" /> 18<label for="ContactContactKind2">電話</label> 19 20メールアドレス 21<input name="data[Contact][email]" type="text" class="input zen_han" placeholder="例 example@example.jp" maxlength="200" id="ContactEmail" /> 22 23電話番号 24<input name="data[Contact][phone]" type="text" class="input zen_han" placeholder="例 09012345678" maxlength="200" id="ContactPhone" />

投稿2023/03/30 04:56

編集2023/03/30 06:11
yambejp

総合スコア115262

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問