Yii Framework Forum: Help test the new widget CActiveForm - Yii Framework Forum

Jump to content

  • (3 Pages)
  • +
  • 1
  • 2
  • 3
  • You cannot start a new topic
  • You cannot reply to this topic

Help test the new widget CActiveForm Widget for performing client-side validation Rate Topic: ***** 4 Votes

#1 User is offline   qiang 

  • Yii Project Lead
  • Yii
  • Group: Yii Dev Team
  • Posts: 5,898
  • Joined: 04-October 08
  • Location:DC, USA

Posted 15 January 2010 - 11:05 AM

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();
    }
}

3

#2 User is offline   Mike 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 3,016
  • Joined: 06-October 08
  • Location:Upper Palatinate

Posted 16 January 2010 - 06:30 AM

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(); ?>

0

#3 User is offline   qiang 

  • Yii Project Lead
  • Yii
  • Group: Yii Dev Team
  • Posts: 5,898
  • Joined: 04-October 08
  • Location:DC, USA

Posted 16 January 2010 - 07:22 AM

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

#4 User is offline   afterMidnight 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 12
  • Joined: 06-January 10

Posted 17 January 2010 - 06:32 PM

View Postqiang, on 15 January 2010 - 11:05 AM, said:

...
For more details, please refer to the API documentation of CActiveForm.
...


where can i find the API doc for CActiveForm?
0

#5 User is offline   qiang 

  • Yii Project Lead
  • Yii
  • Group: Yii Dev Team
  • Posts: 5,898
  • Joined: 04-October 08
  • Location:DC, USA

Posted 17 January 2010 - 07:04 PM

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.
0

#6 User is offline   thyseus 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 300
  • Joined: 18-April 09
  • Location:Leipzig, Germany

  Posted 18 January 2010 - 09:57 AM

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 ;)
0

#7 User is offline   qiang 

  • Yii Project Lead
  • Yii
  • Group: Yii Dev Team
  • Posts: 5,898
  • Joined: 04-October 08
  • Location:DC, USA

Posted 18 January 2010 - 10:09 AM

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?
0

#8 User is offline   thyseus 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 300
  • Joined: 18-April 09
  • Location:Leipzig, Germany

Posted 18 January 2010 - 11:19 AM

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 [removed] 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? :)
0

#9 User is offline   thyseus 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 300
  • Joined: 18-April 09
  • Location:Leipzig, Germany

Posted 18 January 2010 - 11:38 AM

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

#10 User is offline   qiang 

  • Yii Project Lead
  • Yii
  • Group: Yii Dev Team
  • Posts: 5,898
  • Joined: 04-October 08
  • Location:DC, USA

Posted 18 January 2010 - 11:44 AM

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.
0

#11 User is offline   qiang 

  • Yii Project Lead
  • Yii
  • Group: Yii Dev Team
  • Posts: 5,898
  • Joined: 04-October 08
  • Location:DC, USA

Posted 18 January 2010 - 10:16 PM

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.
0

#12 User is offline   thyseus 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 300
  • Joined: 18-April 09
  • Location:Leipzig, Germany

Posted 19 January 2010 - 05:21 AM

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

#13 User is offline   Egorka 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 96
  • Joined: 15-September 09
  • Location:Kaluga, Russia

Posted 23 January 2010 - 03:34 AM

   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.  
0

#14 User is offline   thyseus 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 300
  • Joined: 18-April 09
  • Location:Leipzig, Germany

Posted 02 February 2010 - 07:32 AM

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...
0

#15 User is offline   thyseus 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 300
  • Joined: 18-April 09
  • Location:Leipzig, Germany

Posted 02 February 2010 - 07:35 AM

of course

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


solved THIS problem but now CActiveForm complains because the Validator 'file' is not recognized !
1

#16 User is offline   jayrulez 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 348
  • Joined: 29-July 09

Posted 02 February 2010 - 01:32 PM

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.
php:
foreach(array('cat', 'dog', 'cow') as $animal) echo $animal."\n";

python:
[(animal, print(animal)) for animal in ['cat', 'dog', 'cow']]

ruby:
['cat', 'dog', 'cow'].each {|animal| puts animal}


You say Tomato, I say Tomato.
0

#17 User is offline   qiang 

  • Yii Project Lead
  • Yii
  • Group: Yii Dev Team
  • Posts: 5,898
  • Joined: 04-October 08
  • Location:DC, USA

Posted 02 February 2010 - 01:35 PM

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).
0

#18 User is offline   jayrulez 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 348
  • Joined: 29-July 09

Posted 02 February 2010 - 02:02 PM

View Postqiang, on 02 February 2010 - 01:35 PM, said:

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.
php:
foreach(array('cat', 'dog', 'cow') as $animal) echo $animal."\n";

python:
[(animal, print(animal)) for animal in ['cat', 'dog', 'cow']]

ruby:
['cat', 'dog', 'cow'].each {|animal| puts animal}


You say Tomato, I say Tomato.
0

#19 User is offline   notzippy 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 201
  • Joined: 06-October 08

Posted 03 February 2010 - 01:14 PM

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

nz
0

#20 User is offline   qiang 

  • Yii Project Lead
  • Yii
  • Group: Yii Dev Team
  • Posts: 5,898
  • Joined: 04-October 08
  • Location:DC, USA

Posted 03 February 2010 - 01:27 PM

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

Share this topic:


  • (3 Pages)
  • +
  • 1
  • 2
  • 3
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users