CActiveForm: validateOnSubmit fails when changing field id

[qiangxue]

When using CActiveForm with validateOnSubmit option enabled and custom input/field id, validation fails.

How to reproduce the problem:

1. Create new CActiveForm with validateOnSubmit option enabled
2. Change default input id, i.e.:
   <?php echo $form->textField($model,'username', array('id'=>'username')); ?>
3. Try to submit the form. In my case the error was "Username cannot be blank", even though the input field wasn't empty.
4. Set validateOnSubmit option to false => everything works as expected.

This happens because yiiactiveform plugin doesn't recognize custom field ids. It uses default field id (something like LoginForm_username) that in the case above doesn't exist.

Migrated from http://code.google.com/p/yii/issues/detail?id=2742

---

earlier comments

mdomba said, at 2011-08-16T09:51:59.000Z:

Cannot reproduce... the error... server validation works perfectly... but

ajax validation fails in this case as activeform does not get the custom ID

To solve this inputID in the call to error() should be set to the id of the textfield... like:

$this->error($model, 'username', array('inputID'=>'username'));

This should be documented in the API

farhat.aminov said, at 2011-08-16T10:47:43.000Z:

Server validation works as expected, but validateOnSubmit is a client-side validation, no server contact needed. By the way, specifing inputID doesn't solve the problem... Removing custom id solves it.

Here is my form:

beginWidget('CActiveForm', array( 'id'=>'login-form', 'enableClientValidation'=>true, 'clientOptions'=>array( 'validateOnSubmit'=>true, ), )); ?>

<div class="form-element">
    <?php echo $form->labelEx($model,'username'); ?>
    <?php echo $form->textField($model,'username', array('id'=>'login-username', 'inputID'=>'login-username')); ?>
    <?php echo $form->error($model,'username'); ?>
</div>

<div class="form-element">
    <?php echo $form->labelEx($model,'password'); ?>
    <?php echo $form->passwordField($model,'password', array('id'=>'login-password', 'inputID'=>'login-password')); ?>
    <?php echo $form->error($model,'password'); ?>
</div>

<div class="form-element buttons">
    <?php echo CHtml::submitButton('Login', array('class'=>'form-button')); ?>
</div>

endWidget(); ?>

And this is html output:

    <div style="display:none"><input type="hidden" value="74ad87cd670ba5a5f6896ce6a75ab289b0248f20" name="YII_CSRF_TOKEN" /></div>

    <div class="form-element">
        <label for="LoginForm_username" class="required">Username <span class="required">*</span></label>
        <input id="login-username" inputID="login-username" name="LoginForm[username]" type="text" />
        <div class="errorMessage" id="LoginForm_username_em_" style="display:none"></div>
    </div>

    <div class="form-element">
        <label for="LoginForm_password" class="required">Password <span class="required">*</span></label>
        <input id="login-password" inputID="login-password" name="LoginForm[password]" type="password" />
        <div class="errorMessage" id="LoginForm_password_em_" style="display:none"></div>
    </div>

    <div class="form-element buttons">
        <input class="form-button" type="submit" name="yt0" value="Login" />
    </div>
</form>

And js validation:

<script type="text/javascript"> /*

mdomba said, at 2011-08-17T07:37:26.000Z:

Check again my answer... inputID should be set in the call to the error() method not in the same call to textfield or passwordfield In your case, for the username you need to have:

labelEx($model,'username'); ?> textField($model,'username', array('id'=>'login-username')); ?> error($model,'username',array('inputID'=>'login-username')); ?>

farhat.aminov said, at 2011-08-17T08:20:58.000Z:

Oh, sorry for my inadvertence. Yes, now everything works perfectly. Definitely should be documented in the API. Thank you!

mdomba said, at 2011-08-17T08:39:39.000Z:

I cannot find a good explanation to document this... Qiang, Jeff... any idea how and where to document this?

qiang.xue said, at 2012-01-01T03:37:10.000Z:

set for 1.1.10 milestone

qiang.xue said, at 2012-01-01T03:37:36.000Z:

set for 1.1.10 milestone

maschingan said, at 2012-01-04T16:22:01.000Z:

Seems like my issue related to this one. After upgrade to 1.1.9 I get javascript error if there are inputs with custom id: o[0] is undefined in if(o[0].tagName.toLowerCase()=='span') { on 22nd line of jquery.activeform.js It was working in 1.1.8 even without inputID for CActiveForm::error.

mdomba said, at 2012-01-04T20:50:42.000Z:

Problem is that the activeform JS code stores the inputIDs internaly and uses it for validation and for proper assignement of validation classes (validating,error,success)... so even if this worked before for some input types like text fields (as was using this.val() in your case)... some other cases would not work (like checkboxes, radiobuttons)... and there could be some problems with assigning the validating classes (error/success)... Now the code is fixed to check for proper value on different input types...but you need to give proper inputID to the error() call as this call is the one that configures the validation for the input field... so if you set a custom ID to the input field, you need to set the same inputID to it's error() call.

maschingan said, at 2012-01-04T21:14:03.000Z:

How would I did that if it was not mentioned anywhere? Aslo, I think it shouldn't cause javascript error anyway, else it needs to be mentioned in "Upgrading Instructions".

mdomba said, at 2012-01-04T22:38:29.000Z:

This issue needs proper documentation, that's why it's still open... There are no upgrade instructions because as i explained you before, even if some parts worked before... other did not work at all... Anyway I will try to see if we can make it fallback to previous functionality at least... Can you post your code so I can test with it?

goncalo.p.esteves said, at 2012-01-04T22:42:23.000Z:

There are a Javascript error after revision 3502. in jquery.yiiactiveform.js, line 59: this.value = getAFValue($form.find('#' + this.inputID)); smarty view, with clientValidation: {$wform->labelEx($newsletter,'datesend')} {$this->widget('ext.timepicker.CJuiDateTimePicker', [ 'model'=>$newsletter, 'attribute'=>'datesendtext', 'options'=>['dateFormat'=>'dd/mm/yy','timeFormat'=>'hh:mm'], 'htmlOptions'=>['class'=>'text','style'=>'width:160px;']], true)} {$wform->error($newsletter,'datesend')} in my case $form.find('#' + this.inputID) return [] for this input, and firebug trow error in function getAFValue(): o[0] is undefined if(o[0].tagName.toLowerCase()=='span') {

mdomba said, at 2012-01-05T14:04:49.000Z:

@goncalo you get this error because you call error() with 'datesend' attribute, but your datepicker creates input for the 'datesendtext' attribute. Is this on purpose?

maschingan said, at 2012-01-05T15:06:30.000Z:

@mdomba Just create yii bootstrap and for example in protected/view/site/contact.php change $form->textField($model,'email') to $form->textField($model,'email', array('id' => 'customId')) then refresh and check firebug.

mdomba said, at 2012-01-06T00:43:43.000Z:

The JS error is fixed with r3529 But still if you don't set the inputID on the error() call the ajax validation will not work.

maschingan said, at 2012-01-06T11:15:35.000Z:

Thanks!

[darasion]

i have this problem too.

[cebe]

@darasion see #2108 for a solution