CActiveForm fields - hint, error and success div

Ideally I want to have my form fields as follows:

On initial page load the hint div is shown

If there is an input error the hint div is replaced by error div

If there is no input error the hint div is replaced by a ‘success’ div

Is it possible to configure the form fields in this way?




<?php if ($model->hasErrors):?>

<div class="error">[..]</div>

<?php elseif ($saveSuccessfully):?>

<div class="success">[..]</div>

<?php else: ?>

<div class="hint">[..]</div>

<?php endif;?>




in your controller you have to set the $saveSuccessfully.

Thanks mate. Sorry I should have mentioned, I want to use AJAX Validation with validateOnChange - will this still work?

of corse no, it will be more difficoult.

You can create like that:





<div id="error" style="display:none">[..]</div>

<div id="success" style="display:none">[..]</div>

<div id="hint" style="display:dynamic">[..]</div>



then you can configure your CActiveForm->clientOption->afterValidate with something that will change the visibility of the divs

something like that:




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

        [  ...  ]

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

	if (hasError)

	{

		$('#error').show();

		$('#hint').hide();

		$('#success').hide();

	} else

	{

		$('#error').hide();

		$('#hint').hide();

		$('#success').show();

	}

	}")

)); ?>

<div id="error" style="display:none">ERROR</div>

<div id="success" style="display:none">SUCCESS</div>

<div id="hint" style="display:dynamic">HINT</div>




Thank you bro.