YII » How to use AJAX form validation

Yii supports AJAX form validation, which essentially posts the form values to the server, validates them, and sends back the validation errors, all without leaving the page. It does this every time you tab out of a (changed) field.

As of 1.1.7, Yii supports regular Javascript validation in addition to AJAX validation, but I'll talk about that in another post.

Here's how Yii's AJAX validation works:

1. in your yii form declaration, put:
   

   <php $form = $this->beginWidget('CActiveForm', array(

   'id'=>'lowercasemodelname-form', //not technically required but works w gii generated controllers

   'enableAjaxValidation'=>true //turn on ajax validation on the client side
   ));
   

   And have at least one form element with a matching error function:
   

   <?php echo $form->textField($model, 'my_attribute'); ?>

   <?php echo $form->error($model, 'my_attribute'); ?>
   

   This makes Yii include the JQuery javascript library, as well as a Yii javascript file called jquery.yiiactiveform.js
   
2. In your controller, in create or update, after you load the model, but before you load it from POST, call this
   

   if(Yii::app()->getRequest()->getIsAjaxRequest()) {

   echo CActiveForm::validate( array( $model)); 

   Yii::app()->end(); 

   }
   

   Which is sligtly different than how Gii generates it, but no big diff. CActiveForm::validate() can take an array of models, which is not clear the way Gii does it.
   
3. Also make sure that your model has at lease one validation rule for the insert or update scenario. After you tab out of a changed field, Yii sends a standard AJAX POST to the server, and gets back a JSON response like this:
   

   {"Field_id":["Validation error a"],"Another_field_id":["Validation error B"]}
   

   which yii then plugs into the error field below your field.
   
4. When you use the $form->error() function, Yii adds a hidden div after your form element:
   

   <div id="Model_attributename_em_" class="errorMessage" style="display:none"></div>

   If that field has a validation error, then Yii sets the display to block, writes the validation error message to its innerHtml, and then you see the error. If it later validates, yii hides it again.
5. Yii will also add class names to the parent container of the field that it's validating. In most cases, this is a <div class="row">. When a form field is valid, it adds "success" class to the div - which makes it green. When it's invalid, it adds "error" class, which makes it red. It also quickly adds a "validating" class, which does nothing, but you can supply it yourself and change the look of a field while it's validating.