How to put client side validation in TbActiveForm in Yii bootstrap? - php

Question

I have created a form using widget -bootstrap.widgets.TbActiveForm with form elements like textFieldRow, TbTypeahead, CJuiDatePicker and TbButton. I have implemented ajax form submission and it works fine. And I have included a simple client side validation,the rules are defined in the EmployeeRegister model. Its a simple validation for empty fields only. The problem is that when I submit the form with required fields empty, the form get submitted. That is, no validation is performed. But it displays error message "Name cannot be blank." or "Address cannot be blank.". Can anyone help me to fix this issue??
I am attaching my code below.
// MOdel- EmployeeRegister
class EmployeeRegister extends CActiveRecord{
public $name;
public $address;
public $position;
public $joinDate;
public $age;
public $phone;
public $search;
public $id;
private $_identity;
public function rules(){
return array(
array('name,address,position,phone','required'),
array('joinDate,age,search,id','safe'),
);
}
public static function model($className=__CLASS__)
{
return parent::model($className);
}
public function tableName()
{
return 'emp_registration';
}
//View- edit.php
$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
'id'=>'employeeregister-form',
//'enableAjaxValidation'=>true,
'enableClientValidation'=>true,
'clientOptions'=>array('validateOnSubmit'=>true),
'htmlOptions'=>array('class'=>'well',),
)); ?>
<?php echo $form->textFieldRow($model, 'name',array('class'=>'span3','style'=>'height:30px','id'=>'emp_name')); ?>
<?php echo $form->textFieldRow($model, 'address', array('class'=>'span3','style'=>'height:30px','id'=>'emp_address')); ?>
<?php // echo $form->textFieldRow($model, 'position', array('class'=>'span3','value'=>$result['position'],'style'=>'height:30px')); ?>
<?php echo "<br/> Position <br/>";?>
<?php $this->widget('bootstrap.widgets.TbTypeahead', array(
'model'=>$model,
'htmlOptions'=>array('style'=>'height:30px','id'=>'emp_position'),
'attribute'=>'position',
'options'=>array(
'source'=>array(
'Junior Software Engineer','Software Engineer','Designer'),
'items'=>4,
'matcher'=>"js:function(item) {
return ~item.toLowerCase().indexOf(this.query.toLowerCase());
}",
)));
?>
<?php //echo $form->textFieldRow($model, 'joinDate', array('class'=>'span3','value'=>$result['joinDate'],'id'=>'datepicker')); ?>
<?php echo "<br/> Join Date <br/>";?>
<?php $this->widget('zii.widgets.jui.CJuiDatePicker',array(
'model'=>$model,
'attribute'=>'joinDate',
//'value'=>$result['joinDate'] ? $result['joinDate'] : "",
// additional javascript options for the date picker plugin
'options'=>array(
'showAnim'=>'fold',
'dateFormat'=>'yy-mm-dd',
),
'htmlOptions'=>array(
'style'=>'height:30px;','id'=>'emp_date'
)
)); ?>
<?php echo $form->textFieldRow($model, 'age', array('class'=>'span3','style'=>'height:30px','id'=>'emp_age')); ?>
<?php echo $form->textFieldRow($model, 'phone', array('class'=>'span3','style'=>'height:30px','id'=>'emp_phone')); ?>
<?php echo $form->textFieldRow($model, 'id', array('class'=>'span3','style'=>'height:30px; display:none;','id'=>'emp_id')); ?>
<?php echo "<br/>";?>
<?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'ajaxSubmit', 'label'=>'Update','type'=>'primary','htmlOptions'=>array('name'=>'update_button',),
'url'=>CController::createUrl('site/update'),
'ajaxOptions'=>array(
'type'=>'POST',
'dataType'=>'json',
'data'=>'js:$("#employeeregister-form").serialize()',
'success'=>'js:function(data){
//$("#update_err").html(data);
alert(data);
}',
'async' => true,
)); ?>
<?php //echo $form->error($model,'name,address,position,phone'); ?>
<?php $this->endWidget(); ?>
<div id="update_err"></div>
<?php echo CHtml::link('Back to List',array('site/index')); ?>
//Controller
$model= new EmployeeRegister();
$model->attributes = $_POST['EmployeeRegister'];
if(Yii::app()->getRequest()->getIsAjaxRequest()) {
echo CActiveForm::validate( array( $model));
Yii::app()->end();
}
$update_id= $model->id;
$name = $model->name;
$address = $model->address;
$position = $model->position;
$joinDate = $model->joinDate;
$age = $model->age;
$phone = $model->phone;
if(EmployeeRegister::model()->updateByPk($update_id, array('id'=>$update_id,'name'=>$name,'address'=>$address,'position'=>$position,'joinDate'=>$joinDate,'age'=>$age,'phone'=>$phone)))
echo $name."'s details updated successfully";
else
echo "Update failed";

Answer 1

use Latest version of yii framework that may solve your problem you may refer to this page