Cactiveform Simple Client Side Validation(Required) Does Not Work

Yii 1.1 General Discussion
1

I am new to Yii.

I just want the client validation performed against some required fields:( user_name, password)

My view looks like this:

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


					'id' => 'owner-confirm-form',


					'enableAjaxValidation'=>true,


					        '[color="#8B0000"]enableClientValidation[/color]'=>true,


					'focus'=>array($user,'user_name'),


					'clientOptions' => array(


							'validateOnSubmit'=>true,


							'validateOnChange'=>true,


							'validateOnType'=>false,


					),

<p>

				&lt;span&gt;&lt;?php echo Yii::t(owners_lang,'Pick a Username:');?&gt;&lt;label


					style=&quot;color: red;&quot;&gt;*&lt;/label&gt; &lt;/span&gt;


				&lt;?php 	echo &#036;form-&gt;textField(&#036;user,'user_name',array('size'=&gt;25));?&gt;


				


			    &lt;?php echo &#036;form-&gt;error(&#036;user, 'user_name'); ?&gt;





			&lt;/p&gt;


			&lt;p&gt;


				&lt;span&gt;&lt;?php echo Yii::t(owners_lang,'Enter your password:');?&gt;&lt;label


					style=&quot;color: red;&quot;&gt;*&lt;/label&gt; &lt;/span&gt;


				&lt;?php 	echo &#036;form-&gt;passwordField(&#036;user,'password',array('size'=&gt;25));?&gt;


				   &lt;?php echo &#036;form-&gt;error(&#036;user, 'password'); ?&gt;





			&lt;/p&gt;


&lt;?php &#036;this-&gt;endWidget(); ?&gt;

In Users model,

just simple rules like this:

{


	// NOTE: you should only define rules for those attributes that


	// will receive user inputs.


	return array(


		array('user_name,password,repeat_password,name', 'required'),

)

I didnt put controller code as its irrelevant for client side validation.

I want the client validation to be performed when user finish typing and press tab to shift focus.

I can see yiiactiveform.js is loaded,and the client validation javascript is injected into the source code

However,when I debug into yiiactiveform,

		&#036;.each(settings.attributes, function(i, attribute) {


			if (attribute.validateOnChange) {


				&#036;('#'+attribute.inputID, &#036;form).change(function(){


					var inputType = &#036;('#'+attribute.inputID).attr('type');


					validate(attribute, inputType=='checkbox' || inputType=='radio');


				}).blur(function(){


				[color=&quot;#8B0000&quot;]	if(attribute.status&#33;=2 &amp;&amp; attribute.status&#33;=3)[/color]


						validate(attribute, &#33;attribute.status);


				});


			}


			if (attribute.validateOnType) {


				&#036;('#'+attribute.inputID, &#036;form).keyup(function(){


					if (attribute.value &#33;= &#036;('#'+attribute.inputID, &#036;form).val())


						validate(attribute, false);


				});


			}


		});

the attribute.status = 1, thus when call into validate: the forcevalidate is false, and since

this.value == $(’#’+this.inputID, $form).val() (I didnt type anything, and just press tab, hoping the required validation should work showing this field is required), it will never go to the real validation work.

what I am still missing here?

var validate = function(attribute, forceValidate) {


			if (forceValidate)


				attribute.status = 2;


			&#036;.each(settings.attributes, function(){


				if (this.value &#33;= &#036;('#'+this.inputID, &#036;form).val()) {


					this.status = 2;


					forceValidate = true;


				}


			});


			if (&#33;forceValidate)


				return;





			if(settings.timer&#33;=undefined) {


				clearTimeout(settings.timer);


			}

Thanks much!

2

Currently Yii working in same way as you specify below.

Client validation fire after Unfocus element.

[/size]

3

I was talking about ‘required’ validation does not take effect:

Meaning, if I put the cursor on, then press tab to unfocus, the expected behavior is that the required rule should be executed, and “the username/password cannot be empty” error message should be displayed. But in fact, the required rule wasn’t executed, and I am trying to figure out why. All other rules can be evaluated correctly.

4

You can check default Contact page functionality Site/Contact the functionality built there default.

[/size]