Hi,
I was transforming my login form into one using CActiveForm and AjaxValidation, my understanding is that whenever I press the submit key this will trigger the ajax validation instead of actually reloading the page … well at least this is what it should do otherwise there is no use of ajax. Actually I was expecting that it was being able to do run the validation while typing … but since it’s not working in either way I don’t bother worrying about it now.
So I have my login form view which is like this:
<?php
$form = $this->beginWidget('CActiveForm', array(
'id'=>'login-form',
'enableAjaxValidation'=>true,
'stateful'=>true,
));?>
<fieldset>
<p>
<?php
echo $form->labelEx($model,'username');
echo $form->textField($model,'username');
echo $form->error($model,'username');
?>
</p>
<div class="clear"></div>
<p>
<?php
echo $form->labelEx($model,'password');
echo $form->textField($model,'password');
echo $form->error($model,'password');
?>
</p>
<div class="clear"></div>
<p>
<?php echo CHtml::submitButton(UserModule::t("Sign In"),array('class'=>'button')); ?>
</p>
</fieldset>
<?php $this->endWidget(); ?>
the code above will render in this HTML:
<form id="login-form" action="/myApp/index.php/user/login" method="post">
<div style="display:none"><input type="hidden" name="YII_PAGE_STATE" value="" /></div> <fieldset>
<p>
<label for="UserLogin_username" class="required">Username <span class="required">*</span></label>
<input name="UserLogin[username]" id="UserLogin_username" type="text" value="" />
<div id="UserLogin_username_em_" class="errorMessage" style="display:none"></div>
</p>
<div class="clear"></div>
<p>
<label for="UserLogin_password" class="required">Password <span class="required">*</span></label>
<input name="UserLogin[password]" id="UserLogin_password" type="text" value="" />
<div id="UserLogin_password_em_" class="errorMessage" style="display:none"></div>
</p>
<div class="clear"></div>
<p>
<input class="button" type="submit" name="yt0" value="Sign In" />
</p>
</fieldset>
</form>
in the page header I can also see that a new javascript file has been added to the resources:
<script type="text/javascript" src="/myApp/assets/9130d7b5/jquery.yiiactiveform.js"></script>
I guess this is added whenever I use the class CActiveForm.
Now my LoginController looks like this:
<?php
class LoginController extends Controller
{
public $defaultAction = 'login';
/**
* Displays the login page
*/
public function actionLogin()
{
if (Yii::app()->user->isGuest) {
$model=new UserLogin;
$this->performAjaxValidation($model);
// collect user input data
if(isset($_POST['UserLogin']))
{
$model->attributes=$_POST['UserLogin'];
// validate user input and redirect to previous page if valid
if($model->validate()) {
$this->lastViset();
$this->redirect(Yii::app()->controller->module->returnUrl);
}
}
// display the login form
$this->render('/user/login',array('model'=>$model,));
} else
$this->redirect(Yii::app()->controller->module->returnUrl);
}
private function lastViset() {
$lastVisit = User::model()->notsafe()->findByPk(Yii::app()->user->id);
$lastVisit->lastvisit = time();
$lastVisit->save();
}
protected function performAjaxValidation($model)
{
if(isset($_POST['ajax']) && $_POST['ajax']==='login-form')
{
echo CActiveForm::validate($model);
Yii::app()->end();
}
}
}
The validation rules set in the UserLogin model are as follow:
/**
* Declares the validation rules.
* The rules state that username and password are required,
* and password needs to be authenticated.
*/
public function rules()
{
return array(
// username and password are required
array('username, password', 'required'),
// username must be minimum 5 characters long
array('username', 'length','min'=>5),
// password needs to be authenticated
array('password', 'authenticate'),
);
}
So from a coding and workflow point of view, I went by the book following the guide here
However whenever I put something in the input fields, nothing happen. If I use the submit button it will reload the page displaying the correct errors, but that’s not Ajax … that’s a normal POST action. I’ve monitored the GET/POST calls via FireBug and found nothing that was initiated by any HttpObject method from JS.
Does anybody have any good explanation on how to implement effectively an Ajax Validation workflow within any form in YII?
