Yiistrap - Tooltip Error Message In Tbactiveform


(I1111991) #1

I would like to display all Cactiveform error message as a tooltip. So I add afterValidateAttribute to show tooltip if there is error message.

Here is my code:




<?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(

	'id'=>'form-id',

	'enableAjaxValidation'=>false,

	'enableClientValidation'=>true,

	'layout' => TbHtml::FORM_LAYOUT_HORIZONTAL,

	'clientOptions'=>array(

		'validateOnSubmit'=>true,

                'validateOnChange' =>true,

		'hideErrorMessage'=>true,

		'afterValidateAttribute'=>"js:function(form, attribute, data, hasError){

			if(hasError){

				alert('error');

				$('#'+attribute.inputID).attr('data-original-title',$('#'+attribute.errorID).text()).tooltip('fixTitle');

			}

			else{

				alert('succes');

				$('#'+attribute.inputID).tooltip('destroy');

			}

		}"

	)

)); ?>



It work fine for input element but not not working for select. Somehow Select element fire afterValidateAttribute event twice and the last one is success while it’s actually error so my tooltip got destroyed.

What do you think about? Any Idea how to get this working?


(I1111991) #2

Anyone?


(I1111991) #3

I solve this problem myself. look like there no one interest in this topic (or maybe there are answer somewhere in this forum already but I couldn’t find it, so this topic got ignored.).

The solution pretty simple, just don’t use hasError variable but check if the container of this input has errorCssClass.

Here is the sample code:




<?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(

'id'=>'form-id',

	'enableAjaxValidation'=>false,

	'enableClientValidation'=>true,

	'layout' => TbHtml::FORM_LAYOUT_HORIZONTAL,

	'clientOptions'=>array(

  		'validateOnSubmit'=>true,

                'validateOnChange' =>true,

		'hideErrorMessage'=>true,

	 	'afterValidate'=>"js:function(form, data, hasError){

			 if(hasError){

				 var erel = form.find('.has-error');

 				for(i=0;i<erel.length;i++){

					 inp = $(erel[i]).find('.form-control');

					 em = $(erel[i]).find('[id$=\\'_em_\\']').text();

					 inp.attr('data-original-title',em).tooltip('fixTitle');

				}

			}

		}",

		'afterValidateAttribute'=>"js:function(form, attribute, data, hasError){

			console.log(attribute.inputID+' - '+hasError);

			cont = $.fn.yiiactiveform.getInputContainer(attribute, form);


                        // This one is the key. just check if input has errorCssClass.

			if($(cont).is('.has-error')){


                                // note this one is for if input which already has a default tooltip. I use class hasTooltip for all input that has tooltip by default.

				if($('#'+attribute.inputID).is('.hasTooltip')){

					ori = $('#'+attribute.inputID).attr('data-original-title');

					if(ori){

						$('#'+attribute.inputID).attr('p-data-original-title',ori);

					}

				}

				$('#'+attribute.inputID).attr('data-original-title',$('#'+attribute.errorID).text()).tooltip('fixTitle');

			}

			else{

				if($('#'+attribute.inputID).is('.hasTooltip')){

					ori = $('#'+attribute.inputID).attr('p-data-original-title');

					if(ori)

						$('#'+attribute.inputID).attr('data-original-title',ori).tooltip('fixTitle');

				}

				else{

					$('#'+attribute.inputID).tooltip('destroy');

				}

			}

		}"

	)

)); ?>



Hope this usefull :D.


(zeno12) #4

can you provide more information upon this? I want to change error message and display errors on tooltip.