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

Question

前提

• CakePHP 2x

実現したいこと

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

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

電話を選択したら電話のみバリデーション有効

問題点

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

実装イメージ

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

参考コード

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

<?php echo $form->create(array('inputDefaults' => array('label' => false, 'div' => false, 'legend' => false), 'url' => true, 'id' => 'entry_form', 'class' => 'entry-form h-adr')); ?>

ご希望連絡方法
<?php echo $form->input('contact_kind', array('type' => 'radio', 'class' => 'contact_method inquiryRadio', 'options' => $select_data['contact_kind'], 'label' => true,)); ?>

メールアドレス
<?php e($form->input('email', array('div' => false, 'label' => false, 'class' => 'input zen_han', 'placeholder' => '例 [e-mail]'))); ?>

電話番号
<?php e($form->input('phone', array('div' => false, 'label' => false, 'class' => 'input zen_han', 'placeholder' => '例 09012345678'))); ?>

<?php echo $form->end(); ?>

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

<?php
    class Contact extends AppModel {
        var $name = 'Contact';

        var $validate = array(
            'contact_kind' => array(
                'notempty' => array(
                    'rule' => array('notempty'),
                    'message' => '選択必須項目です',
                    'last' => true, // Stop validation after this rule
                ),
            ),
            'email' => array(
                'notempty' => array(
                    'rule' => array('notempty'),
                    'message' => '必須項目です',
                    'last' => true, // Stop validation after this rule
                ),
                'email' => array(
                    'rule' => 'email',
                    'message' => '正しいメールアドレス形式ではありません。',
                ),
            ),
            'phone' => array(
                'notempty' => array(
                    'rule' => array('notempty'),
                    'message' => '必須項目です',
                    'last' => true, // Stop validation after this rule
                ),
                'between' => array(
                    'rule' => array( 'custom', '/^(0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4})$/'), // ハイフンありとなし両方許容
                    'message' => '正しい電話番号形式ではありません。',
                    'last' => true, // Stop validation after this rule
                ),
            ),
        );
    }
?>

Comments

[yambejp]

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

[DaisukeMori]

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="例 [e-mail]" maxlength="200" id="ContactEmail" />

電話番号
<input name="data[Contact][phone]" type="text" class="input zen_han" placeholder="例 09012345678" maxlength="200" id="ContactPhone" />

```

Answer 1

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

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

		// モデルにデータをセット
		$this->Contact->set( $this->data );

		// ご希望連絡方法でのバリデーションの切り分け
		// データがpostされたかつ、ご希望連絡方法がメールの場合
		if ( !empty($this->data['Contact']) && $this->data['Contact']['contact_kind'] == '1' ) {
			// 電話のバリデートをunsetする
			unset($this->Contact->validate['phone']);
		}
		// データがpostされたかつ、ご希望連絡方法が電話の場合
		if ( !empty($this->data['Contact']) && $this->data['Contact']['contact_kind'] == '2' ) {
			// メールのバリデートをunsetする
			unset($this->Contact->validate['email']);
		}

Answer 2

参考

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

<script>
const s='[name="data[Contact][contact_kind]"]';
window.addEventListener('DOMContentLoaded', ()=>{
  if(document.querySelectorAll(`${s}:checked`).length==0){
    document.querySelector(`${s}`).checked=true;
  }
});
document.addEventListener('change',()=>{
  const idx=[...document.querySelectorAll(s)].indexOf(document.querySelector(`${s}:checked`));
  document.querySelectorAll('.zen_han').forEach((x,y)=>{
    x.disabled=idx!==y;
  });
});
</script>
<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"  />
<label for="ContactContactKind2">電話</label>

メールアドレス
<input name="data[Contact][email]" type="text" class="input zen_han" placeholder="例 [e-mail]" maxlength="200" id="ContactEmail" />

電話番号
<input name="data[Contact][phone]" type="text" class="input zen_han" placeholder="例 09012345678" maxlength="200" id="ContactPhone" />