[Yii] AjaxValidationを有効にしたままフォームをTableタグでデザインする方法

Tweet

まず、WEBページの文字コードが UTF-8 以外で、かつ、日本語のエラーメッセージを表示しようとしている場合、エラーメッセージの取り扱いにバグがある様で、AjaxValidation が期待通りに動かないことがあります。この場合は文字コードを UTF-8 にしてください。

環境

yii: 1.1.10

CActiveForm の設定

CActiveForm の設定で特に clientOptions の inputContainer がキーポイントになります。 デフォルトでは div が指定されているため、input タグを含むもっとも内側の div タグの class で success と error が切り替わります。 これに tr や td を指定することで、行毎やセル毎に input タグがある様なケースに対応できます。

:php:
<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'user-form',
    'enableAjaxValidation'=>true,
    'clientOptions'=>array(
        'inputContainer'=>'tr',
    ),
)); ?>

form.css の修正

デフォルトの form.css は inputContainer が div であることを想定しています。 次の様に修正することで inputContainer の設定によらずに AjaxValidation の動作が表示に反映されるようになります。

div.error

の部分をすべて次の様に書き換えればいいです。

.error