Thursday, December 2, 2010

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.

19 comments:

  1. Nice, very helpful. Thank you for posting.

    ReplyDelete
  2. Cool, clear and easy to follow. However I have a question, how do I hide another field based on the results from the AJAX validation response?

    ReplyDelete
  3. Exactly what I needed. Thank you very much!

    ReplyDelete
  4. Great to find this Yii learning resource.

    I have a suggestion to improve the blog articles code samples/examples please consider a different background to make it easier on the eyes.

    ReplyDelete
  5. we need step by step tutorial firstly...

    ReplyDelete
  6. Good post, but i have to remark about displaying the error messages after gets back a JSON, it will not plugs into error fields automatically, unhopefully Yii have not yet implemented it, but after a few hours of searching i found this extension, it is doing all the necessary work. http://www.yiiframework.com/extension/ajaxvalidationmessages/

    ReplyDelete
  7. Hi

    Can you tell me how can i start it on button click

    ReplyDelete
  8. Thanks for this great post, I tried exactly that and got about 80% to work, my only issue is when I save the model, it save it multiple times to the db (depending on how many fields I fill out), would you have any idea why? As if the ajax is posting multiple times.

    ReplyDelete
    Replies
    1. Add this code just before you check for the POST i.e. isset(POST)
      Had the same issue..THis sorted it out.

      $this->performAjaxValidation($model, 'form-name');

      Hope this helps.

      Cheers

      Delete
  9. there i any form free validation means in which i am not using form

    ReplyDelete
  10. Thanks, you save my day!! :)

    ReplyDelete
  11. IF YOU HAVE ANY VIDEO ABOUT THAT THAN PUT LINK .......

    ReplyDelete
  12. Expert code, really good job!

    ReplyDelete
  13. How I can change message error on validation ?

    ReplyDelete
  14. Here is the validation rules http://www.yiiframework.com/wiki/56/reference-model-rules-validation/

    ReplyDelete