Ajax / Client Side Validation Without Refreshing Page

Yii 1.1 General Discussion
1

Hi Friends,

I’m new here, currently i start using Yii framework to do some of my project, i got some problem when i want to perform ajax / client side validation without any refreshing page (If anyone used MVC 4 from ASP.net, there are immediate client side validation without refreshing page before submitting).

Here is how i do the testing, i’m using Default demo page from yii package (yiiframework/demos/blog/index.php/site/login)

In View:




<?php

$this->pageTitle=Yii::app()->name . ' - Login';

$this->breadcrumbs=array(

	'Login',

);

?>


<h1>Login</h1>


<p>Please fill out the following form with your login credentials:</p>


<div class="form">

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

	'id'=>'login-form',

	'enableAjaxValidation'=>true,

    'enableClientValidation'=>true,

)); ?>


	<p class="note">Fields with <span class="required">*</span> are required.</p>


	<div class="row">

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

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

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

	</div>


	<div class="row">

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

		<?php echo $form->passwordField($model,'password'); ?>

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

		<p class="hint">

			Hint: You may login with <tt>demo/demo</tt>.

		</p>

	</div>


	<div class="row rememberMe">

		<?php echo $form->checkBox($model,'rememberMe'); ?>

		<?php echo $form->label($model,'rememberMe'); ?>

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

	</div>


	<div class="row submit">

		<?php echo CHtml::submitButton('Login'); ?>

	</div>


<?php $this->endWidget(); ?>

</div><!-- form -->

so i set both

‘enableAjaxValidation’=>true,

‘enableClientValidation’=>true,

But when i try to click on login button, the validation is work but with refreshing page, I just wonder whether the feature that i looking for is available in Yii Framework or not, or maybe i missed some configuration JS script?

Thanks

Andi

2

Hi

you can try the code


  <?php

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

                    'id' => 'venue-liquor-form',

                    'action' => 'addliquor?vid=' . $vid,

                    'enableAjaxValidation' => false,

                    'enableClientValidation' => true,

                    'clientOptions' => array(

                            'validateOnSubmit' => true,

                    ),




            ));

            ?>

please refer this

http://www.waytoblogger.com/2012/09/13/yii-client-side-validation/

Hope this help

3

Hi

if u are submitting with ajax u can call a js function checkErrors after validateOnSubmit




<?php

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

                    'id' => 'venue-liquor-form',

                    'action' => 'addliquor?vid=' . $vid,

                    'enableAjaxValidation' => false,

                    'enableClientValidation' => true,

                    'clientOptions' => array(

                            'validateOnSubmit' => true,

                            'afterValidate' => 'js:checkErrors'

                    ),

                    'stateful' => false,

                    'htmlOptions' => array('enctype' => 'multipart/form-data'),

            ));

            ?>

and write the script


 <script>

                function checkErrors(form, data, hasError) {

                    alert(hasError);

                    if(hasError!=true){

                        $.ajax({

                            type: 'POST',

                            url: '<?php echo Yii::app()->createAbsoluteUrl("vendor/liquor/addliquor?vid=" . $_GET['vid']); ?>',

                            data:data,

                            asyc:false,

                            success:function(data){

                                var res = data.split("|");

                                if(res[0]=="true"){

                                    $.fn.yiiGridView.update("liquor-grid")

                                    $('#msg1_li').html('<div class=\"flash-success margin_r15\">'+res[1]+'.</div>').fadeIn();

                                    setTimeout('$("#msg1_li").fadeOut();',2000);

                                    if(jQuery.fancybox){

                                        setTimeout( '$.fancybox.close();',3000);

                                    }

                                }else{

                                    $('#msg1_li').html('<div class=\"flash-error margin_r15\">'+res[1]+'.</div>').fadeIn();

                                }


                            }


                        });

                    }

                }


            </script>

Hope it’s helpful

4

Hi Ankit Modi,

Wogh, it works! :D

Many thanks :D