Postpone Clientvalidation Until After Initial Submit

I not yet been able to find what I am hoping is a simple solution to my question. Here is the desired behavior.

• No validation is performed until user clicks submit

• Once user clicks submit, the form is validated and errors are displayed

• After validation, errors are removed from fields as user enters data

I have been able to get each piece of this, but not all at once.

If I set enableClientValidation set to false, no errors are shown until the user clicks submit (which is what I want) but once the errors are shown they do not disappear until submit is clicked again.

If I set enableClientValidation set to true, errors are shown for invalid data as soon as the user leaves the field (which is what I want to avoid), but after submit the errors disappear for fields as soon as they are valid.

My theory is that when completing a form, the user may bounce between fields before submitted. They may return to a field after skipping it and I don’t want to show errors at that point. Once they click submit, then I would like to show any errors that they have not corrected and have those errors disappear as soon as the data is corrected.

Is this possible or is it best just to stick with enableClientValidation set to true and let errors display even though the user isn’t done filling out the form?

Dear Justin

I hope the following serves the purpose.

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

	'id'=>'comment-form',

	'enableClientValidation'=>$model->hasErrors()?true:false,

	'clientOptions'=>array(

		'validateOnSubmit'=>true,

	),

)); ?>

So we are going to show validation errors, only after the the model has filled with error(s).

This is going to happen only after the form submission.

It has acheived almost 90% percent of our requirement.

The only aberrent is label looks red even validation succeeds.

To circumvent this, I have done the following.

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

	'id'=>'comment-form',

	//'enableAjaxValidation'=>$model->hasErrors()?true:false,

	'enableClientValidation'=>$model->hasErrors()?true:false,

	'clientOptions'=>array(

		'validateOnSubmit'=>true,

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

		{   var id=attribute.id;

		    if(!hasError)

			$("label[for="+id+"]").removeClass("error required");

		}'

	),

)); ?>

It works well even if we enable ajaxValidation.

Regards.