validateOnSubmit not showing the error message

Hi there,

I’ve got a form which is submitted with an ajax button. It works well when there is no error, the data is saved and the content is updated asynchronously.

My problem is with the validation, for example if a field is blank. I can see that the error is triggered but the error message is not displayed on the form. Here is my code:


<div id="service_user">


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

                'id' => 'serviceUser-form',

                'enableAjaxValidation' => true,

                'clientOptions' => array('validateOnSubmit' => true),



    echo CHtml::ajaxSubmitButton('Save', CHtml::normalizeUrl(array('maintainClient/saveUser)), array(

        'beforeSend' => 'function() { }',

        'success' => 'function(data) {

                    if (data.indexOf("{")==0) {

                          //data contains  {"ServiceUser_first_name":["First name cannot be blank."]}

                          alert("validation error");




                    else {


                          //alert("validation successful");








        'error' => 'function(data) {



            ), array('class' => 'rc-button', 'id' => 'save')



 public function actionSaveUser() {

        if (!empty($_POST['ServiceUser'])) {

            $serviceUser = new ServiceUser();

            $serviceUser->attributes = $_POST['ServiceUser'];

            if (!$serviceUser->save()) {

                $errorMessage = CActiveForm::validate($serviceUser);

                echo $errorMessage;

            } else {

                $output = $this->renderPartial('_service_user', array(

                            'serviceUser' => $serviceUser,

                                ), true);

                echo $output;



My problem is that the returned error message (e.g {"ServiceUser_first_name":["First name cannot be blank."]} is not plugged to the error field.

Any idea ?



I believe when there’s an error, the data returned by CActiveForm::validate() is in JSON format.

So, so you should deal with it in your Ajax request:

'success' => 'function(data) {

    if (data.indexOf("{")==0) {

        var json = $.parseJSON(data);

        $.each(json, function(key, value) {

            $("#" + key).addClass("clsError");

            $("#" + key + "_em_").show().html(value.toString());

            $("label[for=" + key + "]").addClass("clsError");




Thank you so much Bennouna, it did the trick !