Error highlighting of Zii widget inputs in tabular input not working for me

Hi Guys and Gals,

I’ve just noticed that all of the Zii widgets I have used on my tabular input forms (CJuiAutoComplete, CJuiDatePicker) aren’t getting the error class applied to them when the form is validated.

See the picture below of a datepicker field that has an invalid date but the input isn’t highlighted like the one above it.

2435

Untitled-1.jpg

The code for the widget within the form is as follows. It’s used in a tabular input form hence the [$i] in the attributes.




<tr>

	<td class="label-cell-1"><?php echo $form->labelEx($model, "[$i]email_address"); ?></td>

	<td class="input-cell-1"><?php echo $form->textField($model, "[$i]email_address", array('size'=>50, 'maxlength'=>100)); ?>

		<?php echo $form->error($model, "[$i]email_address"); ?></td>

</tr>


<tr>

	<td class="label-cell-1"><?php echo $form->labelEx($model, "[$i]date_of_birth"); ?></td>

	<td class="input-cell-1"><?php

		$form->widget('zii.widgets.jui.CJuiDatePicker', array(

			'themeUrl'=>Yii::app()->theme->baseUrl.'/jquery/jui/css',

			'model'=>$model,

			'attribute'=>"[$i]date_of_birth",

			'options'=>array(

				'defaultDate'=>'-30y',

			),

		));

		?>

		<?php echo $form->error($model, "[$i]date_of_birth"); ?></td>

</tr>



Now here’s the strange thing - if I take out the [$i] bit of the attribute, the validation highlighting works (but the data never saves because there’s no tabular index number). Also, all of the forms where I don’t have tabular input are fine (e.g. registration form, contact form etc). Those other forms are using exactly the same widget code, with the exception of the attribute not having the [$i] bit.

Now, I’m not sure if this validation highlighting has ever worked on my site with tabular input (I don’t remember checking it when I was first implementing the widgets).

FYI I am using the following versions:

  • Yii 1.1.9

  • jQuery UI 1.8.16 (bundled with Yii 1.1.9)

Also, here’s the generated HTML code from an unvalidated form…




<tr>

	<td class="label-cell-1"><label for="Member_0_email_address">Email Address</label></td>

	<td class="input-cell-1"><input size="50" maxlength="100" name="Member[0][email_address]" id="Member_0_email_address" type="text" value="mike.walen@xxxxxxxx.com" /></td>

</tr>


<tr>

	<td class="label-cell-1"><label for="Member_0_date_of_birth" class="required">Date Of Birth <span class="required">*</span></label></td>

	<td class="input-cell-1"><input id="Member_0_date_of_birth" name="Member[0][date_of_birth]" type="text" value="1977-09-12" /></td>

</tr>



…and the generated jQuery code at the bottom of the page…




jQuery('#Member_0_date_of_birth').datepicker({'showButtonPanel':true,'changeYear':true,'dateFormat':'yy-mm-dd','yearRange':'c-70:c+30','defaultDate':'-30y'});

So I’m hoping some of you can help me out. For those of you using tabular forms with widgets, could I pretty-please ask you to take a quick look at your own sites and see if you’re getting the validation highlighting on your Zii widgets?

Many thanks.

I just need to know if validation error highlighting is working for everyone else who is using tabular input with Zii widgets.

Anyone?

First of all try with the latest version on Yii as there where some fixes regarding the activeform… for this use the Nightly Snapshot on the Yii download page.

If it’s still not working try to make a simple test application that you can send me so I can test this to see what is the problem.

Many thanks for the response mdomba.

I’ll try the nightly snapshot and/or a test app and see what happens :)

Hi again mdomba,

I can now confirm some inconsistencies with error highlighting when using [some] Zii widgets on a CActiveForm. These results are based on a fresh Yii application, built using 1.1.9, with testing using 1.1.8, 1.1.9 and 1.1-dev all with the same results.

CJuiDatePicker




$form->widget('zii.widgets.jui.CJuiDatePicker', array(

 	//'model'=>$model,

 	//'attribute'=>'dateOfBirth',

 	'id'=>get_class($model).'_dateOfBirth',

 	'name'=>get_class($model).'[dateOfBirth]',

	'value'=>$model->dateOfBirth,

 ));



CJuiDatePicker will not perform input error highlighting when using ‘id’ and ‘name’ options as shown above, no matter what ‘name’ or ‘id’ is used. Highlighting does work however when using ‘model’ and attribute’ (and not the ‘id’ and ‘name’) options.

On a tabular input form, neither the ‘id’ and ‘name’, or the ‘model’ and attribute’ options work and highlighting won’t work at all.

CJuiAutoComplete




$form->widget('zii.widgets.jui.CJuiAutoComplete', array(

 	//'model'=>$model,

 	//'attribute'=>'name',

 	'id'=>get_class($model).'_name',

 	'name'=>get_class($model).'[name]',

	'value'=>$model->name,

	'source'=>$this->createUrl('//request/suggestName'),

 ));



Just like CJuiDatePicker, CJuiAutoComplete will not perform input error highlighting when using ‘id’ and ‘name’ properties as shown above, no matter what ‘name’ or ‘id’ is used. Highlighting does work however (on both standard and tabular forms) when using ‘model’ and attribute’ (and not the ‘id’ and ‘name’) properties.

So it looks like some sort of name resolution problem when using the ‘name’ property (and also the ‘model’ and ‘attribute’ properties in the case of CJuiDatePicker on a tabular input form).

How do I go about getting this test app to you to have a look for yourself mdomba?

Check this issue - code.google.com/p/yii/issues/detail?id=2742

Could be that the reason…

If it’s that… than the “problem” is not only with widgets but with any input …

In short… if you set a custom ID… in the call to error() you need to set the "inputID" to the same value…

Try with that if it works for you… if not you can send it to my email (go to my profile page)…

Hi mdomba,

Unfortunately setting the ‘inputID’ had no effect. Error highlighting refuses to work on the input when Zii widgets and custom ids are used.

I have emailed you some files and some testing instructions so you can have a look for yourself at your nearest convenience :)

I checked the files you sent… and got out what is the problem…

If you read the various CHtml methods… you will understand that only those that are prefixed with "active" are the one that can get appended with the error class… when they are appended with the error class the input gets a red background (CSS rule)…

for all those methods you need to use a model and an attribute…

That’s exactly why on any JUI widget… when you use a model and an attribute this error highlighting works… but when you use a name and a manual ID it does not work.

Thanks for taking the time to check this out mdomba. What you’ve said makes sense, however…

[list=1]

[*]CJuiDatePicker will still not highlight on a tabular input form even when using ‘model’ and ‘attribute’;

[*]In the case where you need to use a custom id and name for a Zii widget (such as when you have an AutoComplete field and a separate hidden field to submit a FK id) specifying the ‘inputID’ you mentioned in a previous post should that care of it. Also, documentation shows that in the CActiveForm::error() method there is an ‘inputContainer’ property of htmlOptions to specify the input container to highlight (see the clientOptions doc). After a lot of playing around, I cannot get this and/or the ‘inputID’ option to have any effect.

[/list]

Please note:

  • The problem is only when tabular forms are used, non-tabular forms are working great.
  • To test #2 above I have set ‘enableClientValidation’=>true on the active form, and have also experimented with specifying ‘div’ in the ‘inputContainer’ value (even though this is the default) as the doc says: “inputContainer: string, the jQuery selector for the HTML element containing the input field. During the validation process, CActiveForm will set different CSS class for the container element to indicate the state change. If not set, it means the closest ‘div’ element that contains the input field.”

The CJuiDatePicker problem was a "known" bug but seems it was forgoten until now - http://code.google.com/p/yii/source/detail?r=2674

I ust commited the code that fixes this issue… to try it you need to use the latest trunk version.

As for the second problem, if I understood you right… you want to use the name/id pairs and get the background red like when you use model/attribute pairs…

I will try to explain you a bit what happens here and what is inputID…

To mark an input that it has a validation error a CSS class is used that by default is "error".

There are 2 different ways of setting the error class… both are documented…

A classic row example for the view is:




        <div class="row">

                <?php echo $form->labelEx($model,'name'); ?>

                <?php echo $form->textField($model,'name'); ?>

                <?php echo $form->error($model,'name'); ?>

        </div>

when the form is rendered… if there is a validation error the "error" class is added to the labelEx - documented here - http://www.yiiframework.com/doc/api/1.1/CHtml#activeLabelEx-detail

In case 1 the error class is added to the label but not to the container.

In case 2 the error class is added to the container but not to the label.

So the inputContainer is used only by the ajax validation and this one sets the "error" class to the row of the field (gives more possibility like giving red background to the entire row.

For your case if you want to set a red background to the input field you need to do it manually… that is done automaticaly if you use the model/attribute pairs…

So the code would be:




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

			'id'=>get_class($model).'_name',

			'name'=>get_class($model).'[name]',

			'value'=>$model->name,

			'source'=>$this->createUrl('//request/suggestName'),

			'htmlOptions' => array(

				'class'=>$model->hasErrors('name') ? CHtml::$errorCss : ''

			)

		));



I appreciate you spending time on what really is a low-priority issue mdomba, so many thanks.

CJuiDatePicker is working perfectly with the new 1.1-dev version so thanks for fixing that.




	'htmlOptions' => array(

		'class'=>$model->hasErrors("[$i]name") ? CHtml::$errorCss : '',

	),



This code you’ve suggested looks really good, but after trying it out, I still can’t get it to work on tabular input forms.

After experimenting with different variables and debugging it all to death, It seems $model->hasErrors just doesn’t want recognise or find an attribute with [$i] in the name. It has to be a name resolution problem.

  • $model->hasErrors(‘name’) // returns 1 when validating an empty ‘required’ input, but

  • $model->hasErrors("[$i]name") // returns null

I guess what it really boils down to is it’s somehow related to the known ‘Ajax validation does not support tabular input’ limitation.

Would you agree with that?

Yes the ajax validation does not support tabular input (yet)…

But the code I gave you works for normal tabular validation… you just need to disable ajax and client validation… and use the code as I posted (without the [$i])… and it will work.

So the code is




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

  	'id'=>get_class($model).'_'.$i.'_name',

  	'name'=>get_class($model)."[$i][name]",

  	'value'=>$model->name,

  	'source'=>$this->createUrl('//request/suggestName'),

  	'htmlOptions'=>array(

  		'class'=>$model->hasErrors('name') ? CHtml::$errorCss : ''

  	)

   ));



For the clientvalidation there was an issue about this - http://code.google.com/p/yii/issues/detail?id=2284

I just commited some new fixes that should fix client and ajax validation for tabular input…

mdomba, your work is amazing.

Using the magic code of…




        'htmlOptions'=>array(

                'class'=>$model->hasErrors('name') ? CHtml::$errorCss : ''

        )



…combined with the new trunk version, I now have error highlighting on tabular input forms working beautifully well with my Zii widgets. Whatever changes you have made have certainly done the trick!