Help test the new widget CActiveForm

CActiveForm aims to provide a simple way of performing client-side model validation via AJAX. Using this widget, you can exploit your validation rules defined in the model class without writing any js validation code. Its usage is very simple, mostly similar to CHtml.

Would you please help me to test this widget in various settings? Your feedback and suggestions are welcome!

Note, CActiveForm will be available in 1.1.1 release.

Below are some code snippets. For more details, please refer to the API documentation of CActiveForm.




// view code:

<?php $form = $this->beginWidget('CActiveForm', array('id'=>'user-form')); ?>


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


<div class="row">

    <?php echo CHtml::activeLabelEx($model,'firstName'); ?>

    <?php echo CHtml::activeTextField($model,'firstName'); ?>

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

</div>

<div class="row">

    <?php echo CHtml::activeLabelEx($model,'lastName'); ?>

    <?php echo CHtml::activeTextField($model,'lastName'); ?>

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

</div>


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


// controller code:

public function actionCreate()

{

    $model=new User;

    $this->performAjaxValidation($model);

    if(isset($_POST['User']))

    {

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

        if($model->save())

            $this->redirect('index');

    }

    $this->render('create',array('model'=>$model));

}


protected function performAjaxValidation($model)

{

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

    {

        echo CActiveForm::validate($model);

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

    }

}



Is there a special submit button required? I tried to modify the standard contact form from a generated webapp. It always submits the form as usual, no ajax request is made.


<div class="form">


<?php $form=$this->beginWidget('CActiveForm', array('id'=>'contact-form')); ?>


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


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


    <div class="row">

        <?php echo CHtml::activeLabelEx($model,'name'); ?>

        <?php echo CHtml::activeTextField($model,'name'); ?>

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

...


    <div class="row submit">

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

    </div>


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



No need special submit button. Try deleting all published assets.

where can i find the API doc for CActiveForm?

You need to open the file framework/web/widgets/CActiveForm.php to read the API doc for the moment since it is not released yet.

Hi qiang,

i just tested your new CActiveForm widget. It works pretty nice, but i have two flaws so far:

1.) I often use a CActiveDropDownList for referencening to foreign keys like this:




  <?php echo CHtml::activeDropDownList($model, 'foreign_id', CHtml::listData(Foreign::model()->findAll(), 'id', 'foreigncolumn'));  ?>



Sadly, the CActiveForm does not validate a selectbox yet.

2.) After entering some value into an TextField the Ajax Request already gets performed. This is annoying, cause after every <TAB> or click he moves the textfield down and opens the error-div. Maybe one should configure an (optional) success-div that occurs when something is done right. (Like "Thank you, this E-Mail is valid")

Ah, and last but not least:

3.) Will you include the CActiveForm as the default way forms get generated by CRUD? I would vote for yes - and let the CActiveForm automatically fall back to Server-Side validation if Javascript is deactivated.

Thank you so far for this widget ;)

Thank you for your feedback!

  1. This should work. Could you describe the procedure you take that this doesn’t work?

  2. Not quite sure if I fully understand you, but you can set ‘successMessage’ in the options of error().

  3. I’m not sure if we should do this by default. As you see, CActiveForm does have some limitations. I’m afraid if we do this by default in crud code, some generated code may not be working out of box. Anyway, I assume you know how to customize crud templates, do you?

Ok, sorry for my English and thanks for your quick reply ;)

1.) Yes, you are right! It works now, it was my mistake.

2.) The successMessage was exactly what i meant, but this awkward behavior is still there without an successMessage. To reproduce the problem, please take a quick look at and enter something (change fields by tab or by click). It’s just a demo site anyway.

After every row he does a Ajax respond with the Value i’ve just entered. This looks awkward without an correct successMessage i think.

I used the exact code from the API example to build this form. Or is this behavior intentionally?

3.) hmm, ok that’s your wise decision. At least we should use the CActiveForm-Widget in the blog demo, so it gets widespread, don’t you think so? :)

Oh, and 4.) Please update the API-Code Snippet to contain a actionUpdate()-Section :)

2). This is caused by CSS. Please modify your main.css about ".success" rule (it is already fixed in yii SVN).

3). yes, will consider using it in the blog demo.

Just refactored and improved this widget.

Now it supports triggering validation by key press events.

It also adds a validationDelay option so that multiple validations can be grouped together to reduce the impact on the server.

Removed successMessage option.

Different CSS classes will now be assigned to the input container element (validating, error, success). This should allow easier CSS manipulation.

Wow, thank you! Nice. It’s so damn easy now to create client-side Validation ;)

Good widget. Can you make a submit button which will inactive until the whole form will not be valid? P.S Testing the widget, found that in this function is not necessary.

Is it possible to add ‘enctype’ => ‘multipart/form-data’ to the CActiveForm so $form->fileField works?

If yes: How? And how about the other possible <form> attributes?

p.s. the API Documentation is still lacking CActiveForm so far…

of course




  'htmlOptions'=>array('enctype' => 'multipart/form-data'),



solved THIS problem but now CActiveForm complains because the Validator ‘file’ is not recognized !

It appears that the form attepmts to submit two times when ajax validation is used, thus duplicating the record. I try to insert a record in an empty table and got this result


CDbException

Description


CDbCommand failed to execute the SQL statement: SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry 'dfxvdstgvvd' for key 'username'INSERT INTO `tbl_user` (`username`, `password`, `status`, `create_time`, `create_ip`) VALUES (:yp0, :yp1, :yp2, :yp3, :yp4)

It works as expected when ajax validation is not used.

The form submits multiple times in fact to perform validation. You should only do validation for these requests instead of changing server-side states (including inserting records).

I see. Thank you for the clarification.

Will there be a CHTML::statefulForm() version of this form ?

nz

Thanks for the reminder. Just added this support with CActiveForm::stateful.