How To Have Ajax Validation On A Part Of The Form Showed With An Ajax Event And A Renderpartial?

Yii 1.1 General Discussion
1

Hi everybody :)

My title is maybe not really clear…

so let me explain my problem :

I have a form (widget active form) in my main page. on this form the ajax validation works fine.

but, depending of certain option of this form, (for exemple check a radioButton), an additionnal part of the form appears.

my code :




//start of the form

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

	'id'=>'evenement-form',

	'enableAjaxValidation'=>true,

	'clientOptions'=>array('validateOnSubmit'=>true)

				)); ?>


// some input

...

// my radioButton with my ajax event.

<?php 

echo $form->radioButton($eventForm, 'comboGestionnaireValue', array(

	'value'=>'2',

        'uncheckValue'=>null,

        'onChange'=>CHtml::ajax(array(

             'type'=>'POST',

	     'url'=>@Yii::app()->createUrl('admin/UpdateAjaxFormGestionnaire'),

	     'data' => array('form'=>serialize($form)),

	     'update'=>'#gestionnaireCell')) )); ?>


//the rest of my form.

...

So when I check the combobox, it will called the action in my controller.

this is the action :




public function actionUpdateAjaxFormGestionnaire()

    { 

    	$eventForm = new eventForm;

    	$form = $_POST['form'];

    	if(isset($_POST['ajax']) && $_POST['ajax']==='evenement-form')

    	{

    		echo $form::validate($eventForm);

    		Yii::app()->end();

    	}


    	$this->renderPartial('_ajaxContentFormGestionnaire', array(

		'form'=>$form,

	        ), false, true);        

    }

And finnaly my partial view rendered :




<?php

$form = preg_replace('!s:(\d+):"(.*?)";!e', "'s:'.strlen('$2').':\"$2\";'", $form);

$form = unserialize($form);


$eventForm = new EventForm;

?>

<div class="row">

	<?php echo $form->labelEx($eventForm,"Nom"); ?>

	<?php echo $form->textField($eventForm,"Nom",array('size'=>50,'maxlength'=>50)); ?>

	<?php echo $form->error($eventForm,'Nom'); ?>

</div>

				

<div class="row">

	<?php echo $form->labelEx($eventForm,'Prenom'); ?>

	<?php echo $form->textField($eventForm,'Prenom',array('size'=>50,'maxlength'=>50)); ?>

	<?php echo $form->error($eventForm,'Prenom'); ?>

</div>


...

and I want to have an ajax validation on this rendered part…

and a validation when I press the submit button before to store data in the DB to keep the input field filled if there is an error.

there is a lot of post about this, but I didn’t find any solution.

do you have any idea? thanks.

2 



<script type="text/javascript">


var check = $('radioButton').val();


if(check == 'value not valid') $('.inputField').addClass('error');


</script>

This might be the html part.


<input type="radio" class="inputField" value="A">

Just check errors right before starting ajax form. Of course, you gonna need Jquery for this.

Or you can use beforeSend:


             

             'type'=>'POST',

             'url'=>@Yii::app()->createUrl('admin/UpdateAjaxFormGestionnaire'),

             'data' => array('form'=>serialize($form)),

             'update'=>'#gestionnaireCell',

             'beforeSend' => 'function(){Put your validation code here}'
3

thx for your quick answer :)

the beforeSend option is used only when I press submit button? or in real time & client side too? and can you give me and exemple of validation in JS, like to say that my eventForm->nom is required? (fields wich is in my partial view)

and about the script, I have to put that in my main view then? and put the rule for each field? (the rule in my eventForm model is useless then? ) (I try to understand how it works :P )

4

I’m sorry that I still don’t really get your concern.

That you just want to check the fields are required or not, or you want to validate with various types of data?

If you have forms with many different field ids, you have to point out which field you wanna validate by listing manually or using a loop.

If your field ids are ruled, you can use some piece of code to get the dynamic ids.

The rules in models just work on server side. It means that they will implement after receiving data from clients. Server-side Validation is often used for preventing web attacks. On the other hand, client-side is need for checking appropriate data (date, numeric, text,etc.)

beforeSend process function after submit and before the data was sent to server.

5

ok, we will take the problem from the scratch.

I guess you understood that I have a form which is growing depending of certains options.

I want that these additionnal fields have a validation to see if they are correctly filled during the user is completing the form, before he sent the form and after (before insert in db)

actually I try to fix the first one, so, during the completion of the form.

for the first part of my form I don’t have any problem. when I click on a required field and then I go on an other, this field becomes red and an error message appear under it. ( same if its a numeric field and some char are lost in it :) )

but for the additionnal part I don’t have any verification, when I click on a field and then I go away, any post action (in firebug) is send… and so, any ajax verification is done… :(

all my rules are define in my eventForm model… and I call the ajax validate in my action if there is a Post event…


    	if(isset($_POST['ajax']) && $_POST['ajax']==='evenement-form')

    	{

    		echo $form::validate($eventForm);

    		Yii::app()->end();

    	}

the problem is that there are any post action send when I "leave" the field.

other question which maybe help on this problem.

It is possible to make a redifinition of my form?

So in my main view I have :




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

	'id'=>'evenement-form',

	'enableAjaxValidation'=>true,

	'clientOptions'=>array('validateOnSubmit'=>true)

				)); ?>


//the form


//and the endWidget.

and in my partial view is it possible to make something like :


			$form=$this->ContinueWidget('CActiveForm', array(

				'id'=>'evenement-form',

				'enableAjaxValidation'=>true,

				'clientOptions'=>array('validateOnSubmit'=>true)

				)); ?>

to keep the same form, but remind to him that ajax validation is needed?

6

I really don’t know how to solve this problem…

plz someone can help me? :s