Yii ajax validation for blog demo - posts/contact form - ajax

Question

In the Yii blog demo, included in the framework download and here:
http://www.yiiframework.com/demos/blog/
ajax validation for form inputs work for the post comment and login forms...
demos\blog\protected\views\comment_form.php
and
demos\blog\protected\views\login.php
both include things like
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'comment-form',
'enableAjaxValidation'=>true,
)); ?>
or
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'login-form',
'enableAjaxValidation'=>true,
)); ?>
I tried adding similar things to views/site/contact.php and views/post/_form.php ('id'=>'contact-form', and 'post-form') but it isn't working (tabbing out of form fields doesn't result in red or green fields depending on if the input is valid or invalid and there are no ajax generated invalid messages either)

Answer 1

Ajax validation consists of 3 phases:
Send an ajax request to server with form fields' values to validate them.
Validate fields and return validation message from server.
Update form fields with the validation messages.
When you set enableAjaxValidation to true, you are taking care of the phase 1 & 3, so there is still phase 2 left.
Phase 2.
By default ajax validation triggers POST ajax calls, with an additional1 'ajax' post parameter, whose value is set to the id of the form being validated. In your case it should be something like: ajax --> contact-form, and ajax --> post-form.
So what you have to do is catch this POST request in your server-side, and send a response after validating the fields which were sent in the request.
The POST request is sent to the form's action url (by default), which in your case will be something like: http://foo/index.php/site/contact, which means you have to change your controllers/SiteController.php's actionContact function:
public function actionContact(){
$model = new ContactForm;
// checking if it is ajax validation request below
if(isset($_POST['ajax']) && $_POST['ajax']==='contact-form') {
echo CActiveForm::validate($model); // validate the form fields sent in POST, and return response
Yii::app()->end(); // end the application
}
// ... leave the rest of the code as is ...
}
In the blog demo's views/site/contact.php there are no error fields so you will not be able to see the messages just yet. To see them add the error fields to the form:
<div class="row">
<?php echo $form->labelEx($model,'name'); ?>
<?php echo $form->textField($model,'name'); ?>
<?php echo $form->error($model,'name'); // this line needs to be added ?>
</div>
Add the error fields similarly for the other inputs.
For the post/_form.php make similar adjustments (from 1st code snippet) to the controllers/PostController.php's actionCreate and actionUpdate methods. Just that your if check will change to:
if(isset($_POST['ajax']) && $_POST['ajax']==='post-form')
Extra Info.
The ajax POST parameter is called the ajaxVar, and it defaults to ajax. You can change a lot of these defaults, like the validation url (action or validationUrl of clientOptions), or the ajaxVar ($_POST['ajax']) of clientOptions. Read the documentation to see the options.
1 In addition to the form's fields.