Yii. How to add css "error" class to input on form submit?

Question

I have Yii form. Some fields are required. When form is submitted i need that CSS class "error" would be added to the text input. My Code:

          <?php $form=$this->beginWidget('CActiveForm', array(
                    'id'=>'contact-form',
                    'enableClientValidation'=>true,
                    'clientOptions'=>array(
                            'validateOnSubmit'=>true,
                    ),
            )); ?>
           <ul class="contact_form">
               <li class="row">
                   <?php echo $form->labelEx($model,'name'); ?>
                   <?php echo $form->textField($model,'name', array('class'=>'input')); ?>
                   <?php echo $form->error($model,'name'); ?>
               </li>
...

Now i just get div with error message:

<div class="errorMessage" id="ContactForm_name_em_" style="">Laukelis „Vardas, pavardė“ negali būti tuščias.</div>

How to add "error" class to input field?

Boris Belenski · Accepted Answer · 2012-08-09 12:55:07Z

6

<?php echo $form->textField($model,'name', array('class'=>'input' . ( $model->getError('name')  ? ' error' : ''))); ?>

answered Aug 9, 2012 at 12:55

Boris Belenski

1,41214 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ernie Over a year ago

This answer looks like it should work if you were using a regular form submit, but looks like you're using AJAX submit and client side validation. I don't think there's an easy way to do this, w/o writing your own AJAX function on submit or extending Yii's validation methods . . .

Roman M. Koss · Accepted Answer · 2014-06-14 21:46:47Z

To have AJAX validation also, you should add something more or less like this:

<?php $form=$this->beginWidget('CActiveForm', array(
          'id'=>'contact-form',
          'enableClientValidation'=>true,
          'clientOptions'=>array(
              'validateOnSubmit'=>true,
              'afterValidate' => 'js:function(form, data, hasError) { 
                  if(hasError) {
                      for(var i in data) $("#"+i).addClass("error_input");
                      return false;
                  }
                  else {
                      form.children().removeClass("error_input");
                      return true;
                  }
              }',
              'afterValidateAttribute' => 'js:function(form, attribute, data, hasError) {
                  if(hasError) $("#"+attribute.id).addClass("error_input");
                      else $("#"+attribute.id).removeClass("error_input"); 
              }'
          ),
        )); ?>

Collectives™ on Stack Overflow

Yii. How to add css "error" class to input on form submit?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related