Question

I use Yii client validation to validate some inputs and when there is an error in the user input, Yii client Validation does not prevent submit and does not prevent ajax request.
I use grid widget “carvw-grid” and when user click submit button its make ajax request to update “carvw-grid” content with results. I want to prevent submit and ajax request when there is a client validation error.

here is my script code:

Yii::app()->clientScript->registerScript('search', "
$('.search-button').click(function(){
$('.myloading').show();
$('.myshow').hide();
$('.myresult').slideUp().delay(3000).queue(function() {
    $(this).show();
    $('.myloading').hide();
    $('.myloading').addClass('myshow');
    });
    });

$('.search-form form').submit(function(){
    $.fn.yiiGridView.update('carvw-grid', {
        data: $(this).serialize()
    });
    return false;
});
");

and here is my form

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'carvw-form',
    'action'=>Yii::app()->createUrl($this->route),
    'method'=>'get',
    'enableAjaxValidation'=>false,
    'enableClientValidation'=>true,
    'focus'=>array($model,'OWNER_ID'),
    'clientOptions' => array('validateOnSubmit'=>true, 'validateOnType'=>true),

)); ?>

and here is my submit button

<div class="row buttons">
    <?php echo CHtml::submitButton('search',array('class'=>'search-button')); ?>
</div>

and here is my grid

<?php 
    $this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'carvw-grid',
    'dataProvider'=>$model->search(),

    'columns'=>array('CAR_COMPANY_NAME','MODEL_YEAR',
        'CAR_COLOR_NAME',
        'USING_TYPE_NAME',array(
            'class'=>'CButtonColumn',
        ),
    ),
));

 ?>

How can i prevent submit and ajax request on client validation errors?

Answer 1

Maybe you need to use afterValidate function instead of binding submit event. Into CActiveForm.clientOptions array add following element:

'afterValidate' => 'js:afterValidate',

In your javascript file:

function afterValidate(form, data, hasError) {
    if (!hasError) {    
        $.fn.yiiGridView.update('carvw-grid', {
            data: $(this).serialize()
        });
    }
    return false;
}