Question

When we use CactiveForm Widget like this:

<?php echo $form->labelEx($model,'name'); ?>
<?php echo $form->textField($model,'name'); ?>
<?php echo $form->error($model,'name'); ?>

We get validation messages but, the input field himself our the textfield, don’t get any class.

I wish to, when Yii validates, a class appears on the input field so that it could render highlighted.

CHtml::activeTextField actually does this:

<?php echo CHtml::activeLabel($model,'name'); ?>
<?php echo CHtml::activeTextField($model,'name') ?>

Any way to do this using CActiveForm ?

Added:

$form=$this->beginWidget('CActiveForm', array(
    'id'=>'event-form',
        'enableClientValidation' => true,
        'clientOptions'=>

Answer 1

For the default error class to be attached you need to have the structure of your form as it is in the default auto generated forms, something like this:

<div class="form">
  <?php $form=$this->beginWidget('CActiveForm', array(
    ...
  )); ?>

    <div class="row">
        <?php echo $form->labelEx($model,'name'); ?>
        <?php echo $form->textField($model,'name'); ?>
        <?php echo $form->error($model,'name'); ?>
    </div>
    ...
</div>

Edit: Meaning you need an inputContainer for each input field, because that’s how the default css and default implementation of jquery.activeform.js is. To change this behavior we can simply add another css rule to the default form.css file, which by default adds errors only to divs inside div.form.

/*
 default css
*/
div.form div.error input,
div.form div.error textarea,
div.form div.error select,
div.form input.error,
div.form textarea.error,
div.form select.error
{
    background: #FEE;
    border-color: #C00;
}

So you can change that to your liking, but minimum required will be :

div.error input, div.error textarea, div.error select {/* styles */}

Incase the above doesn’t work and you want to assign error class to input elements individually then you can use the afterValidate and afterValidateAttribute callbacks of CActiveForm’s clientOptions, where you’ll need to add the error css class to the input, and also have a css rule to match such inputs:

input.error, textarea.error, select.error {/*styles*/}

Incase you use some form of client validation, like you have done in beforeValidate, you’ll need to addClass('error'); to your inputs, with the above css in place.