KayaMemo

またもやバリデーションネタ。
ラジオボタンにたいして未選択のチェックを入れる方法。

モデルのバリデーションルールに、'required' => trueとかを入れればよいだけかとおもいきや、なかなか一筋縄ではいかなった。

‘required’ => true

'required' => trueを設定しただけではバリデーションルールが適用されないよう。
ルールを同時に設定する必要があるとか。
このオプションの意味は、指定のキーデータがない場合にチェックされるよう。(たぶん)

ルールには空だとエラー、ということで、notEmptyを追加。
これで必須のチェックのみは完了。

required属性

モデルでバリデーションを指定すると、自動的にinputタグの属性に、requiredが追加されてしまう。
このまま送信しようとすると、Chrome限定だと思うが、エラーが出た送信出来ない。

An invalid form control with name=‘xxx’ is not focusable.

Chromeではrequired属性が入ったinputでデータがなかった場合は、吹き出しのようなものを出すような仕様になっているが、
radioボタンの場合はその吹き出しを出す場所がなくてエラーになってしまうみたい。

回避方法

回避方法はいくつかあるよう。

１）
なのでradioボタンの場合はこの属性を入れてはいけない。
cakeの場合、オプションに'required' => falseを指定してやることで出さないように出来た。

２）
formタグの生成時にnovalidateをtrueでセットしてやればその中のinputタグには、required属性がつかなくなるよう。
全部にセット出来るという意味ではこれが一番お手軽かも。

ソース

最終的なソースの抜粋は以下。

モデル

1
2
3
4
5
6

'radio_data' => array(
    array(
        'rule' => 'notEmpty',
        'message' => '選択して下さい'
    ),
)

ビュー

1
2
3
4
5

<?php echo $this->Form->input('radio_data', array(
  'type' => 'radio',
  'options' => array('OK', 'NG'),
  'required' => false
));?>

もしくは、

1
2
3
4
5
6

<?php echo $this->Form->create('Model', array('novalidate' => true));  ?>
~~~中略~~~
<?php echo $this->Form->input('radio_data', array(
  'type' => 'radio',
  'options' => array('OK', 'NG'),
));?>

参考

html – "Invalid form control" only in Google Chrome – Stack Overflow
CakePHP2.3からinputタグにhtml5のrequired属性がつくようになった – cakephperの日記(CakePHP, Laravel, PHP)