Bootstrap popover client side validation using Yii model

I am trying to create a popover which definitely pops over on the click of a button. The pop over contains form elements which is tied to the Yii model. Now I just want to perform an ajax validation on press of the submit button Below is the code that I have written:

Controller:





public function actionEmailverification() {

    $email = new Email();

    $this->performAjaxValidation($email);


    if (isset($_POST['Email'])) {

        // do womething with POST data here

        print_r($_POST['Email']);

        die();

    }


    $this->renderPartial('email_refund_verification', array('email' => $email), false, true);

}


protected function performAjaxValidation($model) {

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

        echo CActiveForm::validate($model);

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

    }

}



View Code:




<a href="#" id="popover" class="button blue">Create</a>

<div id="popover-head" class="hide"><h4>Create Email</h4></div>

<div id="popover-content" class="hide">

<div class="form">

    <?php

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

        'id' => 'email-form',

        'enableAjaxValidation' => true,

        'clientOptions' => array(

            'validateOnSubmit' => true,

        )

    ));

    ?>

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

    <?php echo $form->errorSummary($email); ?>

    <div class="row">

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

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

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

    </div>


    <div class="row">

        <?php echo $form->labelEx($email, 'amt'); ?>

        <?php echo $form->textField($email, 'amt'); ?>

        <?php echo $form->error($email, 'amt'); ?>

    </div>


    <div class="row buttons">

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

    </div>


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

</div>


<script>

$('#popover').popover({

    html: true,

    placement: 'left',

    title: function () {

        return $("#popover-head").html();

    },

    content: function () {

        return $("#popover-content").html();

    }

});



I have worked with similar code here and works definitely fine for bootstrap modals.

Thanks.