Validation on tabbed form

[jdotk (Jatin Magneto)]

Hi Guys,

Can you please help me out with this issue for which I cannot find any suitable topic yet.

I have a model with many fields,and I have used CJuiTabs for displaying the form in 4 different tabs.

The submit button is common for all the tabs.

The problem is with validation. If I am on 1st tab and click on submit and there is a validation error on 4th tab user will never come to know this as view will stick on tab one only. Can you please help me changing the tabs with validation error populate.

for example if error is on different tab then the tab should be changed to tab with error on click of submit.

here is my view file for more clarification.

<?php

/* @var $this OwnerController */

/* @var $model Owner */

/* @var $form CActiveForm */

?>


<div class="form">


<?php $form=$this->beginWidget('CActiveForm', array(

	'id'=>'owner-form',

	// Please note: When you enable ajax validation, make sure the corresponding

	// controller action is handling ajax validation correctly.

	// There is a call to performAjaxValidation() commented in generated controller code.

	// See class documentation of CActiveForm for details on this.

	'enableAjaxValidation'=>true,

	'enableClientValidation'=>true,

	'clientOptions'=> array(

	'validateOnSubmit'=>true,

	'afterValidate'=>'js:function(form, data, hasError) {if (!hasError){ $.blockUI(); return true; }}',

	),

)); ?>


<?php

	$tabs = array();


	$tabs['User'] = array(

	'id'=>'userTab',

	'content'=>$this->renderPartial('_formUser', array(

	'form' => $form,

	'model'=>$model,

	),

	true),

	);

	

	$tabs['User Details'] = array(

	'id'=>'userDetailsTab',

	'content'=>$this->renderPartial('_formUserDetails', array(

	'form' => $form,

	'model'=>$model,

	),

	true),

	);

	

	$tabs['Contact'] = array(

	'id'=>'userContactTab',

	'content'=>$this->renderPartial('_formContact', array(

	'form' => $form,

	'model'=>$model,

	),

	true),

	);

	

	$tabs['Other'] = array(

	'id'=>'userOtherTab',

	'content'=>$this->renderPartial('_formOther', array(

	'form' => $form,

	'model'=>$model,

	),

	true),

	);

	

	$this->widget('zii.widgets.jui.CJuiTabs', array(

	'tabs' => $tabs,

	'options' => array(

	'collapsible' => false,

	),

	));

?>

	

	

	<div class="row buttons">

		<?php echo CHtml::submitButton('Submit',array('class' => 'btn btn-success', 'id'=> "btnsubmit", 'name' => 'btnsubmit')); ?>

		<?php if(Yii::app()->user->usertype == 1){ ?>		

		<?php echo CHtml::button('Cancel', array('class'=>'btn btn-default','onclick' => 'js:document.location.href="'.Yii::app()->baseUrl.'/'.$this->uniqueid.'/admin"')); ?>

		<?php } ?>

	</div>


<?php $this->endWidget(); ?>

Thanks in advance

[muet84 (Jawwad Software)]

Bro,

Its very easy if you know Jquery to play with, just get the tab object $(’#yw0’) and change the active tab as required.

Yii have two different options, either use ajax submit button or use submitButton but go with JS validation.

$p = ‘?id=’.$model->id;

echo CHtml::ajaxSubmitButton(‘Save Changes’,CHtml::normalizeUrl(array(’/listing/’.Yii::app()->controller->action->id.$p)),

array(

‘dataType’=>‘json’,

‘type’=>‘post’,

‘success’=>'function(data) {

jdata = data;


$(".error").removeClass("error");


$(".errorMessage").hide();


                      //$("#spec_validation").hide();


                      //$("#btn_specs").removeAttr("disabled","disabled"); 





if(data.status=="success"){

// window.location.href="/auction/auction/review/id/"+jdata.item_id;

                        //console.log(data.item_id);


 $("input#item_id").val(data.item_id);

}

else{

$.each(data, function(key, val) {


  $("#'.$form->id. ' #"+key+"_em_").text(val);                                                    


  $("#'.$form->id. ' #"+key+"_em_").show();


  $("#'.$form->id. ' #"+key).addClass("error");


                       // $("#yw0").accordion( "option", "active", 5 );


  $("#ajaxLoader").hide();


});

}

}’,

‘beforeSend’=>'function(){

if(!$("#__selectedListing").find("input[type=checkbox]").length >0){

alert("Please selecte listing to preceed.");

$("#yw0").accordion( "option", "active", 1 );

return false;}

                  //$("#btn_specs").attr("disabled","disabled"); 

$("#spec_validation").show();

}’

),array(‘id’=>‘btn_timeAuction2’,‘class’=>‘btn btn-primary hide’)

);

the $(’#yw0’).accordion( “option”, “active”); is for accordion same or little bit different

// Getter

var active = $( ".selector" ).tabs( "option", "active" );

// Setter

$( ".selector" ).tabs( "option", "active", 1 );

full doc of jquery tabs http://api.jqueryui.com/tabs/#option-active

One more thing may bother you that which tab to be activated, ajax validation response will return you the fields that are not validated, so you have to activate the parent tab of that field usually we know which field resides in what tab.

let me know if you get confused of anything, I have done this with both tabs and accordion using ajax button and submit buttons,

[jdotk (Jatin Magneto)]

Thanks for the reply Bro,

But I found it a bit confusing. I am using Yii’s client side validation (jQuery).

'enableClientValidation'=>true,

        'clientOptions'=> array(

        'validateOnSubmit'=>true,

Currently found a solution to resolve this issue like this :

if ($.trim($('#Supplier_username').val()) == '' || $.trim($('#Supplier_locale_id').val())== '' || ($('#Supplier_isactive_0').is(':checked') && $('#Supplier_isactive_1').is(':checked'))) {

    $('#ui-id-1').trigger('click');

}else if ($.trim($('#Supplier_first_name').val()) == '' || $.trim($('#Supplier_last_name').val())== '' || $.trim($('#Supplier_addr_title').val())== '') {

    $('#ui-id-2').trigger('click');

}

This activates the tab based on id. May be helpful to someone else too.

Thanks.

[muet84 (Jawwad Software)]

Thanks for the reply Bro,

But I found it a bit confusing. I am using Yii’s client side validation (jQuery).

'enableClientValidation'=>true,

        'clientOptions'=> array(

        'validateOnSubmit'=>true,

Currently found a solution to resolve this issue like this :

$('#ui-id-3').trigger('click');

This activates the tab based on id. May be helpful to someone else too.

Thanks.

Trigger is not bad but better to do it with

// Getter

var active = $( ".selector" ).tabs( "option", "active" );

// Setter

$( ".selector" ).tabs( "option", "active", 1 );

full doc of jquery tabs http://api.jqueryui…/#option-active

And if you are validating on submit than either client side of ajaxvalidation both results same, but a ajax is more powerful and secure. after all its up to you.