This is a tutorial to work with radioButtonList which will handle enum datatype. Form design and validation both are detailed here.
Try this and let me know if here is any issue or any other better way to do this.
Scenario: ¶
Let we have enum for table field menuType as shown below.
menuType : enum('Page','PhpPage','External')
pageId: int (If menuType is 'Page')
phpPageId: int (If menuType is 'PhpPage')
externalLink: varchar (If menuType is 'External')
Form elements: ¶
Now in form, based on menu type selection i want to show or hide other 3 fields. The below code will take care of it. I have called 'menuTypeChange' function on change of any radio selection. This function will show/hide respected elements.
<script language="javascript">
function menuTypeChange(menyType)
{
$('.menuType').hide();
if(menyType!="")
$('#'+menyType+'Div').show();
}
</script>
<div class="row">
<?php echo $form->labelEx($model,'menuType'); ?>
<?php echo $form->radioButtonList($model,'menuType',array('Page'=>'Page','PhpPage'=>'PHP Page', 'External'=>'External'), array('onchange' => 'menuTypeChange(this.value);')); ?>
<?php echo $form->error($model,'menuType'); ?>
</div>
<div id="PageDiv" class="row menuType">
<?php echo $form->labelEx($model,'pageId'); ?>
<?php echo $form->dropDownList($model, 'pageId', CHtml::listData(Page::model()->findAll(array('condition'=>'isDeleted=:isDeleted', 'params'=>array(':isDeleted'=>0))), 'pageId', 'pageName'), array('empty'=>'- - Select - -')); ?>
<?php echo $form->error($model,'pageId'); ?>
</div>
<div id="PhpPageDiv" class="row menuType">
<?php echo $form->labelEx($model,'phpPageId'); ?>
<?php echo $form->dropDownList($model, 'phpPageId', CHtml::listData(PhpPage::model()->findAll(), 'phpPageId', 'phpPageName'), array('empty'=>'- - Select - -')); ?>
<?php echo $form->error($model,'phpPageId'); ?>
</div>
<div id="ExternalDiv" class="row menuType">
<?php echo $form->labelEx($model,'externalLink'); ?>
<?php echo $form->textField($model,'externalLink',array('size'=>60,'maxlength'=>255)); ?>
<?php echo $form->error($model,'externalLink'); ?>
</div>
<script language="javascript">
menuTypeChange('<?php echo $model->menuType;?>');
</script>
I have done with form. Now the problem is validation.
How validation works? ¶
With default rules when i submit form it is asking me all 3 fields validation even i have selected only one menu type. For this let me create one new custom validation function as shown below.
public function rules()
return array(
....
....
array('menuType', 'required'),
array('pageId','radioValidate','menuType','Page'),
array('phpPageId','radioValidate','menuType','PhpPage'),
array('externalLink','radioValidate','menuType','External'),
array('externalLink', 'url'),
....
);
}
public function radioValidate($attribute,$params)
{
$field = $params[0];
$value = $params[1];
if($this->$field == $value && $this->$attribute == '')
{
$this->addError($attribute,$this->getAttributeLabel($attribute).' cannot be blank.');
}
}
Let me explain more on this rule:
array('pageId','radioValidate','menuType','Page'),
Above rule means: If menuType's value is Page then only pageId is compulsory.
Same goes with other too,
array('phpPageId','radioValidate','menuType','PhpPage'),
array('externalLink','radioValidate','menuType','External'),
Validation
Hi,
Great wiki , but validation is not working for me, same i copy paste it
Advise plz
Client side validation
client side validation is not working..
validation
To solve the validation problem I did the following:
defined a jquery function:
$.fn.menuTypeChange = function() {
};
and called this way:
array('onchange' => '$(this).menuTypeChange();')
instead of:
array('onchange' => 'menuTypeChange(this.value);')
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.