Cactiveform Makes Duplicated Html Ids If Multiple Forms

Yii 1.1 General Discussion
1

Hi All,

I have a problem regarding [font="Courier New"]CActiveForm[/font] and elements which it generates.

Let’s say I have very simple [font=“Courier New”]User[/font] model with [font=“Courier New”]username[/font] and [font=“Courier New”]password[/font] fields with some validation rules.

I display HTML form as follows:


 // $model = new User();

$form = $this->beginWidget(

    'CActiveForm',

    array(

        'id' => 'registration-form',

        'action' => $this->createUrl('user/register'),

    )

);


echo $form->label($model, 'username');

echo $form->textField($model, 'username');

echo $form->error($model, 'username');


echo $form->label($model, 'password');

echo $form->textField($model, 'password');

echo $form->error($model, 'password');


$this->endWidget();

Let’s say that I have in my HTML hidden registration form which slides down after clicking ‘Register’ link. Also, if unregistered user clicks e.g. ‘Add comment’, they get registration form opened in overlay, requested by Ajax call from the server. According to DRY rule, it’s obviously the same form. (It’s just an example. The same result can be reached by registration and login forms next to each other, using the same [font=“Courier New”]User[/font] model)

After clicking on ‘Add comment’ as unregistered user, the result is as follows:

  1. In HTML there are 2 elements [font="Courier New"]<input id="User_username" … />[/font] (+ the same for password)

  2. In HTML there are 2 elements [font="Courier New"]<div style="display:none" id="User_username_em_" class="errorMessage"></div>[/font] (+ the same for password)

  3. Validation messages are not always placed into right element, because jQuery returns only first element if queried by ID

  4. If there are [font=“Courier New”]<select />[/font] element styled with e.g. chosen in form, they won’t work for second element with the same ID

Currently there is only one resolution I know about. You need to create two models - RegistrationForm and PopupRegistrationForm used accordingly, but it complicates more things, like e.g. controllers. And it doesn’t really make sense for me.

What I imagine would work excellent in such situations would be new property of [font="Courier New"]CActiveForm[/font] called e.g. [font="Courier New"]fieldsPrefix (string)[/font] which would be added to ID of each element where ID is auto generated based on class name and property name.

What do you think about his? Or maybe I missed something and there is simpler thus better resolution of this problem?

Thanks,

sowiq

2

I believe adding a new property (convention), that you need to be aware of complicates it even more. Creating another model is much more elegant and opens the way for any future customization you may need.

Another property would clutter the Model class.




class UserNavBarLogin extends UserLogin

{

}

Go OOP, Drop "PHP".

3

@alinmircea,

thank you for your response.

I’m sure you very well know DRY principle. I try to use it everywhere I can. Thus I don’t create two separate views with login form which does exactly the same, but I use single, common one.

In example scenario which I described, one login form is included inline to page’s HTML, another one is loaded to overlay via Ajax. These two forms look different because of CSS, but it’s exactly the same view file.

IMO, creating new class ONLY because you need to generate different HTML for frontend is not OOP. It’s rather dirty PHP fix.