CActiveForm with ajax submit

Is it possible to use CActiveForm in conjunction with an Ajax submit functionality, for example:

  • The form is validated via AJAX (validateOnSubmit)

  • The form is then submitted via AJAX if the validation is successful

  • A JSON response (i.e. a flash message) is passed back to the form and captured by a ‘success’ handler

How can this be achieved?

In addition to setting both enableAjaxValidation and validateOnSubmit to true, you can use CActiveForm’s afterValidate property if you really want to do something in JavaScript (e.g. alert). All is described in CActiveForm doc.

Example:


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

    'id'=>'some-form',

    'enableClientValidation'=>false,

    'enableAjaxValidation'=>true,

    'clientOptions'=>array(

        'validateOnSubmit'=>true,

        'validateOnChange'=>false,

        'afterValidate'=>"js:function(form, data, hasError) {

            if (hasError) {

                alert('There were errors. Please correct them before submitting again.');

                return false; //<- normally not needed

            }

        }",

    )

)); ?>

And I guess you can use an ajaxSubmitButton in order to submit the form via Ajax. Instead of a Yii flash message, it’s easier (better?) just to echo your flash-success div from your controller and display it in the Ajax success scenario.


<?php echo CHtml::ajaxSubmitButton('Submit',

                                      $this->createUrl(…),

                                      array('success' => 'js: function(result) {

                                            if(result != "") {

                                                if (result.indexOf("{") != 0) {

                                                // means the servers-side validation did not return any errors

                                                // useful for some validators where Ajax validation does not cover everything

                                                    $("#someTargetDiv").html(result); // or use .replaceWith()

                                                }

                                            }

                                        }'),

                                    ); ?>

And in your controller, you would do:


if ($model->save) { // or your own test

    echo '<div class="flash-success">Congratulations!</div>';

}

Hi :) For me afterValidate is never getting fired(I mean no alerts nothing, even if the form is still empty.) with same setup :(

But I see the script under my page which has registered with my form ID correctly like this:


$('#my-form')..yiiactiveform({'validateOnSubmit':false,'afterValidate':function(form, data, hasError) {

                                if (hasError) {

                                    alert('There were errors. Please correct them before submitting again.');

                                    return false; //<- normally not needed

                                }

                            },'attributes':[{'id': ........

Any Idea Whats wrong ???