Can't Get Ajax Form Errors

franck · June 1, 2011, 1:54pm

Hi,

I have created a form that works with ajax. But I can’t get the error summary to display.

What am I missing?

I have following form:




<div class="form">


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

	'id'=>'event-form',

	'enableAjaxValidation'=>true,

)); ?>


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

    <?php

        $this->widget('zii.widgets.jui.CJuiTabs', array(

            'tabs' => array(

                'Location' => $this->renderPartial("_form_location", array('form' => $form, 'model'=>$model), true),

                'Time' => $this->renderPartial("_form_time", array('form' => $form, 'model'=>$model), true),

                'Parameter' => $this->renderPartial("_form_parameter", array('form' => $form, 'model'=>$model), true),

                'Comment' => $this->renderPartial("_form_comment", array('form' => $form, 'model'=>$model), true),

                'Publish' => $this->renderPartial("_form_publish", array('form' => $form, 'model'=>$model), true),

            ),

            'options' => array(

                'collapsible' => true,

            ),

        ));

        ?>

	<div class="row buttons">

        <?php 

            echo CHtml::ajaxButton($model->isNewRecord ? 'Create' : 'Save', 

                                   array('create'), 

                                   array('type'=>'POST',)); ?>

        </div>


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


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

and following controller code




public function actionCreate() {

        $model = new Event;


        $this->performAjaxValidation($model);


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

            $model->attributes = $_POST['Event'];


            if ($model->save()) {

                if (Yii::app()->request->isAjaxRequest) {

                    echo CJSON::encode(array('message' => 'Created event', 'id' => $model->id));

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

                }

            }

        }

        if (Yii::app()->request->isAjaxRequest) {

            echo CJSON::encode(array(

                'status' => 'failure',

                'form' => $this->renderPartial('_form', array('model' => $model), true)));

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

        } else {

            $this->render('create', array(

                'model' => $model,));

        }

    }

source after submit




{"status":"failure","form":"<div class=\"form\">\n\n<form id=\"event-form\" action=\"\/erfassungswerkzeug\/index.php?r=event\/create\" method=\"post\">\n\t<p class=\"note\">Fields with <span class=\"required\">*<\/span> are required.<\/p>\n\n\t<div id=\"event-form_es_\" class=\"errorSummary\"><p>Please fix the following input errors:<\/p>\n<ul>\n<li>Quote cannot be blank.<\/li>\n<\/ul><\/div>    <div id=\"yw0\">\n<ul>\n<li><a href=\"#yw0_tab_0\">Location<\/a><\/li>\n<li><a href=\"#yw0_tab_1\">Time<\/a><\/li>\n<li><a href=\"#yw0_tab_2\">Parameter<\/a><\/li>\n<li><a href=\"#yw0_tab_3\">Comment<\/a><\/li>\n<li><a href=\"#yw0_tab_4\">Publish<\/a><\/li>\n<\/ul>\n<div id=\"yw0_tab_0\"><p class=\"note\">Fields with <span class=\"required\">*<\/span> are required.<\/p>\n\n<div class=\"row\">\n    <label for=\"Event_location_name_id\">Location Name<\/label>    <input name=\"Event[location_name_id]\" id=\"Event_location_name_id\" type=\"text\" value=\"\" \/>    <div id=\"Event_location_name_id_em_\" class=\"errorMessage\" style=\"display:none\"><\/div><\/div>\n<\/div>\n<div id=\"yw0_tab_1\"><p class=\"note\">Fields with <span class=\"required\">*<\/span> are required.<\/p>\n\n<div class=\"row\">\n\n    <label for=\"Event_year_id_begin\">Year begin<\/label>    <input name=\"Event[year_id_begin]\" id=\"Event_year_id_begin\" type=\"text\" value=\"\" \/>    <div id=\"Event_year_id_begin_em_\" class=\"errorMessage\" style=\"display:none\"><\/div>\n    <label for=\"Event_month_id_begin\">Month begin<\/label>    <select name=\"Event[month_id_begin]\" id=\"Event_month_id_begin\">\n<option value=\"1\" selected=\"selected\">Januar                                            <\/option>\n<option value=\"2\">Februar                                           <\/option>\n<option value=\"3\">M\u00e4rz                                              <\/option>\n<option value=\"4\">April                                             <\/option>\n<option value=\"5\">Mai                                               <\/option>\n<option value=\"6\">Juni                                              <\/option>\n<option value=\"7\">Juli                                              <\/option>\n<option value=\"8\">August                                            <\/option>\n<option value=\"9\">September                                         <\/option>\n<option value=\"10\">Oktober                                           <\/option>\n<option value=\"11\">November                                          <\/option>\n<option value=\"12\">Dezember                                          <\/option>\n<option value=\"13\">Winter                                            <\/option>\n<option value=\"14\">Fr\u00fchjahr                                          <\/option>\n<option value=\"15\">Sommer                                            <\/option>\n<option value=\"16\">Herbst                                            <\/option>\n<\/select>    <div id=\"Event_month_id_begin_em_\" class=\"errorMessage\" style=\"display:none\"><\/div>\n    <label for=\"Event_day_id_begin\">Day begin<\/label>    <select name=\"Event[day_id_begin]\" id=\"Event_day_id_begin\">\n<option value=\"1\" selected=\"selected\">1                                                 <\/option>\n<option value=\"2\">2                                                 <\/option>\n<option value=\"3\">3                                                 <\/option>\n<option value=\"4\">4                                                 <\/option>\n<option value=\"5\">5                                                 <\/option>\n<option value=\"6\">6                                                 <\/option>\n<option value=\"7\">7                                                 <\/option>\n<option value=\"8\">8                                                 <\/option>\n<option value=\"9\">9                                                 <\/option>\n<option value=\"10\">10                                                <\/option>\n<option value=\"11\">11                                                <\/option>\n<option value=\"12\">12                                                <\/option>\n<option value=\"13\">13                                                <\/option>\n<option value=\"14\">14                                                <\/option>\n<option value=\"15\">15                                                <\/option>\n<option value=\"16\">16                                                <\/option>\n<option value=\"17\">17                                                <\/option>\n<option value=\"18\">18                                                <\/option>\n<option value=\"19\">19                                                <\/option>\n<option value=\"20\">20                                                <\/option>\n<option value=\"21\">21                                                <\/option>\n<option value=\"22\">22                                                <\/option>\n<option value=\"23\">23                                                <\/option>\n<option value=\"24\">24                                                <\/option>\n<option value=\"25\">25                                                <\/option>\n<option value=\"26\">26                                                <\/option>\n<option value=\"27\">27                                                <\/option>\n<option value=\"28\">28                                                <\/option>\n<option value=\"29\">29                                                <\/option>\n<option value=\"30\">30                                                <\/option>\n<option value=\"31\">31                                                <\/option>\n<option value=\"32\">1. Pentade                                        <\/option>\n<option value=\"33\">2. Pentade                                        <\/option>\n<option value=\"34\">3. Pentade                                        <\/option>\n<option value=\"35\">4. Pentade                                        <\/option>\n<option value=\"36\">5. Pentade                                        <\/option>\n<option value=\"37\">6. Pentade                                        <\/option>\n<option value=\"38\">1. Dekade                                         <\/option>\n<option value=\"39\">2. Dekade                                         <\/option>\n<option value=\"40\">3. Dekade                                         <\/option>\n<option value=\"41\">Anfang                                            <\/option>\n<option value=\"42\">Mitte                                             <\/option>\n<option value=\"43\">Ende                                              <\/option>\n<\/select>    <div id=\"Event_day_id_begin_em_\" class=\"errorMessage\" style=\"display:none\"><\/div>\n    <label for=\"Event_hour_id_begin\">Hour begin<\/label>    <select name=\"Event[hour_id_begin]\" id=\"Event_hour_id_begin\">\n<option value=\"1\" selected=\"selected\">0 Uhr                                             <\/option>\n<option value=\"2\">1 Uhr                                             <\/option>\n<option value=\"3\">2 Uhr                                             <\/option>\n<option value=\"4\">3 Uhr                                             <\/option>\n<option value=\"5\">4 Uhr                                             <\/option>\n<option value=\"6\">5 Uhr                                             <\/option>\n<option value=\"7\">6 Uhr                                             <\/option>\n<option value=\"8\">7 Uhr                                             <\/option>\n<option value=\"9\">8 Uhr                                             <\/option>\n<option value=\"10\">9 Uhr                                             <\/option>\n<option value=\"11\">10 Uhr                                            <\/option>\n<option value=\"12\">11 Uhr                                            <\/option>\n<option value=\"13\">12 Uhr                                            <\/option>\n<option value=\"14\">13 Uhr                                            <\/option>\n<option value=\"15\">14 Uhr                                            <\/option>\n<option value=\"16\">15 Uhr                                            <\/option>\n<option value=\"17\">16 Uhr                                            <\/option>\n<option value=\"18\">17 Uhr                                            <\/option>\n<option value=\"19\">18 Uhr                                            <\/option>\n<option value=\"20\">18 Uhr                                            <\/option>\n<option value=\"21\">20 Uhr                                            <\/option>\n<option value=\"22\">21 Uhr                                            <\/option>\n<option value=\"23\">22 Uhr                                            <\/option>\n<option value=\"24\">23 Uhr                                            <\/option>\n<option value=\"25\">wie 0 Uhr, noch aendern                           <\/option>\n<option value=\"26\">morgens                                           <\/option>\n<option value=\"27\">vormittags                                        <\/option>\n<option value=\"28\">mittags                                           <\/option>\n<option value=\"29\">nachmittags                                       <\/option>\n<option value=\"30\">abends                                            <\/option>\n<option value=\"31\">nachts                                            <\/option>\n<\/select>    <div id=\"Event_hour_id_begin_em_\" class=\"errorMessage\" style=\"display:none\"><\/div>\n<\/div>\n\n<div class=\"row\">\n\n    <label for=\"Event_year_id_end\">Year end<\/label>    <input name=\"Event[year_id_end]\" id=\"Event_year_id_end\" type=\"text\" value=\"\" \/>    <div id=\"Event_year_id_end_em_\" class=\"errorMessage\" style=\"display:none\"><\/div>\n\n    <label for=\"Event_month_id_end\">Month end<\/label>    <select name=\"Event[month_id_end]\" id=\"Event_month_id_end\">\n<option value=\"1\" selected=\"selected\">Januar                                            <\/option>\n<option value=\"2\">Februar                                           <\/option>\n<option value=\"3\">M\u00e4rz                                              <\/option>\n<option value=\"4\">April                                             <\/option>\n<option value=\"5\">Mai                                               <\/option>\n<option value=\"6\">Juni                                              <\/option>\n<option value=\"7\">Juli                                              <\/option>\n<option value=\"8\">August                                            <\/option>\n<option value=\"9\">September                                         <\/option>\n<option value=\"10\">Oktober                                           <\/option>\n<option value=\"11\">November                                          <\/option>\n<option value=\"12\">Dezember                                          <\/option>\n<option value=\"13\">Winter                                            <\/option>\n<option value=\"14\">Fr\u00fchjahr                                          <\/option>\n<option value=\"15\">Sommer                                            <\/option>\n<option value=\"16\">Herbst                                            <\/option>\n<\/select>    <div id=\"Event_month_id_end_em_\" class=\"errorMessage\" style=\"display:none\"><\/div>\n    <label for=\"Event_day_id_end\">Day end<\/label>    <select name=\"Event[day_id_end]\" id=\"Event_day_id_end\">\n<option value=\"1\" selected=\"selected\">1                                                 <\/option>\n<option value=\"2\">2                                                 <\/option>\n<option value=\"3\">3                                                 <\/option>\n<option value=\"4\">4                                                 <\/option>\n<option value=\"5\">5                                                 <\/option>\n<option value=\"6\">6                                                 <\/option>\n<option value=\"7\">7                                                 <\/option>\n<option value=\"8\">8                                                 <\/option>\n<option value=\"9\">9                                                 <\/option>\n<option value=\"10\">10                                                <\/option>\n<option value=\"11\">11                                                <\/option>\n<option value=\"12\">12                                                <\/option>\n<option value=\"13\">13                                                <\/option>\n<option value=\"14\">14                                                <\/option>\n<option value=\"15\">15                                                <\/option>\n<option value=\"16\">16                                                <\/option>\n<option value=\"17\">17                                                <\/option>\n<option value=\"18\">18                                                <\/option>\n<option value=\"19\">19                                                <\/option>\n<option value=\"20\">20                                                <\/option>\n<option value=\"21\">21                                                <\/option>\n<option value=\"22\">22                                                <\/option>\n<option value=\"23\">23                                                <\/option>\n<option value=\"24\">24                                                <\/option>\n<option value=\"25\">25                                                <\/option>\n<option value=\"26\">26                                                <\/option>\n<option value=\"27\">27                                                <\/option>\n<option value=\"28\">28                                                <\/option>\n<option value=\"29\">29                                                <\/option>\n<option value=\"30\">30                                                <\/option>\n<option value=\"31\">31                                                <\/option>\n<option value=\"32\">1. Pentade                                        <\/option>\n<option value=\"33\">2. Pentade                                        <\/option>\n<option value=\"34\">3. Pentade                                        <\/option>\n<option value=\"35\">4. Pentade                                        <\/option>\n<option value=\"36\">5. Pentade                                        <\/option>\n<option value=\"37\">6. Pentade                                        <\/option>\n<option value=\"38\">1. Dekade                                         <\/option>\n<option value=\"39\">2. Dekade                                         <\/option>\n<option value=\"40\">3. Dekade                                         <\/option>\n<option value=\"41\">Anfang                                            <\/option>\n<option value=\"42\">Mitte                                             <\/option>\n<option value=\"43\">Ende                                              <\/option>\n<\/select>    <div id=\"Event_day_id_end_em_\" class=\"errorMessage\" style=\"display:none\"><\/div>\n    <label for=\"Event_hour_id_end\">Hour end<\/label>    <select name=\"Event[hour_id_end]\" id=\"Event_hour_id_end\">\n<option value=\"1\" selected=\"selected\">0 Uhr                                             <\/option>\n<option value=\"2\">1 Uhr                                             <\/option>\n<option value=\"3\">2 Uhr                                             <\/option>\n<option value=\"4\">3 Uhr                                             <\/option>\n<option value=\"5\">4 Uhr                                             <\/option>\n<option value=\"6\">5 Uhr                                             <\/option>\n<option value=\"7\">6 Uhr                                             <\/option>\n<option value=\"8\">7 Uhr                                             <\/option>\n<option value=\"9\">8 Uhr                                             <\/option>\n<option value=\"10\">9 Uhr                                             <\/option>\n<option value=\"11\">10 Uhr                                            <\/option>\n<option value=\"12\">11 Uhr                                            <\/option>\n<option value=\"13\">12 Uhr                                            <\/option>\n<option value=\"14\">13 Uhr                                            <\/option>\n<option value=\"15\">14 Uhr                                            <\/option>\n<option value=\"16\">15 Uhr                                            <\/option>\n<option value=\"17\">16 Uhr                                            <\/option>\n<option value=\"18\">17 Uhr                                            <\/option>\n<option value=\"19\">18 Uhr                                            <\/option>\n<option value=\"20\">18 Uhr                                            <\/option>\n<option value=\"21\">20 Uhr                                            <\/option>\n<option value=\"22\">21 Uhr                                            <\/option>\n<option value=\"23\">22 Uhr                                            <\/option>\n<option value=\"24\">23 Uhr                                            <\/option>\n<option value=\"25\">wie 0 Uhr, noch aendern                           <\/option>\n<option value=\"26\">morgens                                           <\/option>\n<option value=\"27\">vormittags                                        <\/option>\n<option value=\"28\">mittags                                           <\/option>\n<option value=\"29\">nachmittags                                       <\/option>\n<option value=\"30\">abends                                            <\/option>\n<option value=\"31\">nachts                                            <\/option>\n<\/select>    <div id=\"Event_hour_id_end_em_\" class=\"errorMessage\" style=\"display:none\"><\/div>\n\n<\/div>\n\n<div class=\"row\">\n\n    <label for=\"Event_time_begin\">Time Begin<\/label>    <input name=\"Event[time_begin]\" id=\"Event_time_begin\" type=\"text\" value=\"\" \/>    <div id=\"Event_time_begin_em_\" class=\"errorMessage\" style=\"display:none\"><\/div>\n    <label for=\"Event_time_end\">Time End<\/label>    <input name=\"Event[time_end]\" id=\"Event_time_end\" type=\"text\" value=\"\" \/>    <div id=\"Event_time_end_em_\" class=\"errorMessage\" style=\"display:none\"><\/div>\n<\/div>\n\n<div class=\"row\">\n\n    <label for=\"Event_time_certain\">Time Certain<\/label>    <input id=\"ytEvent_time_certain\" type=\"hidden\" value=\"0\" name=\"Event[time_certain]\" \/><input name=\"Event[time_certain]\" id=\"Event_time_certain\" value=\"1\" type=\"checkbox\" \/>    <div id=\"Event_time_certain_em_\" class=\"errorMessage\" style=\"display:none\"><\/div>    <label for=\"Event_time_description\">Time Description<\/label>    <textarea rows=\"2\" cols=\"30\" name=\"Event[time_description]\" id=\"Event_time_description\"><\/textarea>    <div id=\"Event_time_description_em_\" class=\"errorMessage\" style=\"display:none\"><\/div>\n<\/div>\n\n\n<\/div>\n<div id=\"yw0_tab_2\"><p class=\"note\">Fields with <span class=\"required\">*<\/span> are required.<\/p>\n\n<div class=\"row\">\n    \n    <label for=\"Event_code_id\">Code<\/label>    \n    <select name=\"type\" id=\"type\">\n<option value=\"\">Select a type value<\/option>\n<option value=\"temp\">temp<\/option>\n<option value=\"price\">price<\/option>\n<option value=\"temp_spec\">temp_spec<\/option>\n<option value=\"wind_force\">wind_force<\/option>\n<option value=\"precip\">precip<\/option>\n<option value=\"cloud_cover\">cloud_cover<\/option>\n<option value=\"phenol_objekt\">phenol_objekt<\/option>\n<option value=\"phenol_phase\">phenol_phase<\/option>\n<option value=\"precip_spec\">precip_spec<\/option>\n<option value=\"wind_direction\">wind_direction<\/option>\n<option value=\"impact\">impact<\/option>\n<option value=\"natural_event\">natural_event<\/option>\n<option value=\"phenomena\">phenomena<\/option>\n<\/select><select name=\"code_value\" id=\"code_value\">\n<option value=\"prompt\">Select a code value<\/option>\n<\/select>    <div id=\"Event_code_id_em_\" class=\"errorMessage\" style=\"display:none\"><\/div>\n<\/div>\n\n<\/div>\n<div id=\"yw0_tab_3\"><p class=\"note\">Fields with <span class=\"required\">*<\/span> are required.<\/p>\n\n<div class=\"row\">\n    <label for=\"Event_comment\">Comment<\/label>    <textarea rows=\"6\" cols=\"30\" name=\"Event[comment]\" id=\"Event_comment\"><\/textarea>    <div id=\"Event_comment_em_\" class=\"errorMessage\" style=\"display:none\"><\/div><\/div>\n\n\n<\/div>\n<div id=\"yw0_tab_4\"><p class=\"note\">Fields with <span class=\"required\">*<\/span> are required.<\/p>\n<div class=\"row\">\n    <label for=\"Event_published\">Published<\/label>    <input id=\"ytEvent_published\" type=\"hidden\" value=\"0\" name=\"Event[published]\" \/><input name=\"Event[published]\" id=\"Event_published\" value=\"1\" type=\"checkbox\" \/>    <div id=\"Event_published_em_\" class=\"errorMessage\" style=\"display:none\"><\/div><\/div>\n\n<\/div>\n<\/div>\n    \n    \n\t<div class=\"row buttons\">\n        <input name=\"yt0\" type=\"button\" value=\"Create\" id=\"yt0\" \/>        \n\t\t\t<\/div>\n\n<\/form>\n<\/div><!-- form -->"}

Any Idea?

Have a nice day!

– Franck

mukeshsoni · September 14, 2011, 12:45pm

Yes, this is a problem with Yii. You cannot use CActiveform ajaxvalidation along with an ajaxsubmit button. When the submit button is clicked, what should happen is this -

first the ajax validation is fired off
if errors, show them.
If no errors, now fire off the ajax submit action.

But that would create unnecessary complications in CActiveForm code. So, in your case, only ajaxSubmit is fired. AjaxValidation never happens. The only way around is to call CActiveForm::validate() in your submit action itself.

franck · September 29, 2011, 10:25am

Hi Mukesh,

thank you very much for your answer.

– Franck