Search code examples
yii2pjax

activeform client validation with pjax


When enableClientValidation is set to true, then yii2-pjax widget does not fire ajax. Only when enableClientValidation is set to false, pjax works here. Is there any way to have active form client side and ajax validations on each field ( by yii ) as well as pjax on submit button ( by pjax )

<?php Pjax::begin(['id'=> 'new-comment','enablePushState' => false]); ?>

  <?php $form = ActiveForm::begin([
     'id' => $model->formName(),
     'options' => ['data-pjax' => "1"] , 
     'action' => ['site/signup'],
     'enableClientValidation' => true,
     ]); 
  ?>   
<?= Html::submitButton('REGISTER', ['class' => 'btn btn-primary', 'name' => 'signup-button', 'id'=>'register-btn']) ?>                                         
 </div>
<?php ActiveForm::end(); ?>   
<?php Pjax::end(); ?

Solution

  • I had to remove Pjax calls in PHP around Active form since clientValidation would fail otherwise.

    <?php $form = ActiveForm::begin([
                    "id"=>"CreateForm",
                    'enableClientValidation' => true,
                    //'enableAjaxValidation' => true,
                    'validationUrl'=>['site/form-validate'],
                    "options" => ["enctype" =>"multipart/form-data"]
                    ]
    ); ?>
    

    enableAjaxValidation can be made true as well above

    Currently I have clientValidation as true without Pjax which is validating based on validationUrl. Submit button of form is handled externally in javascript that will firstly call same validationUrl and update error fields using updateMessages method of yii activeform. If no errors, then business logic is done in different action than validationUrl action

    $.ajax({
                            url         : encodeURI(baseUri + "site/form-validate"),
                            data        : $("#CreateForm").serialize(),
                            dataType    : 'json',
                            type        : 'POST',
                            beforeSend : function(xhr, settings) {
                                $this.attr("disabled","disabled");
                                Pace.stop();
                                Pace.bar.render();
                            },
                            success     : function(data) {  
                                $('#CreateForm').yiiActiveForm("updateMessages", data);
    
                                if($("form#CreateForm").find('.has-error').length == 0) {               
                                    $.ajax({
                                        url         : encodeURI(baseUri + "site/form"),
                                        data        : $("#CreateForm").serialize(),
                                        dataType    : 'json',
                                        type        : 'POST',
                                        beforeSend : function(xhr, settings) {
                                        },
                                        success     : function(data) {  
                                            console.log(data);
                                        },
                                        error       : function(data) {
                                        },
                                        complete    : function() {
                                            $this.removeAttr("disabled");
                                            Pace.stop();
                                        },
                                     });    
                                } else {
                                    $this.removeAttr("disabled");
                                    Pace.stop();
                                }                         
                            },
                            error       : function(data) {
                            },
                            complete    : function() {                          
                            },
                     });
    

    Controller -

    public function actionFormValidate() {
    
        $model = new CreateForm();
        if(Yii::$app->request->isAjax && $model->load($_POST))
        {
            Yii::$app->response->format = 'json';
            return \yii\widgets\ActiveForm::validate($model);
        }
    }