Native Form Validation with Yii in Bootstrap Style

When you are working with Yii and Bootstrap you will see many hurdles in doing several things in Yii in the native way. One of the main such issue is the form validation. Bootstrap is having a different HTML markup from that of the default Yii form. But as always Yii can be customized to match Bootstrap’s structure. So I thought I will write up an article explaining how to easily work with native form validation in Yii with Bootstrap form.

Yii Form Validation in Bootstrap Style
Yii Form Validation in Bootstrap Style

First of all lets see the difference in the form markup of Yii and Bootsrap. Here is the Yii style.

Here is the Bootstap style

This change can be easily achieved by changing the view file of the form itself to match the Bootstrap markup structure.

But when the form is submitted and there are some validation error or success, the structure of the markup is a bit altered by Yii with its pre configured settings. Lets look at a field with a validation error.

You can see a CSS class error is attached to the label and the input field. If the validation is success then the class is success. And a new div with class errorMessage is displayed after the input field with the details of error.

Lets look at how a Bootstrap form field will look with a validation error message.

Here you can see a CSS class has-error is attached to the wrapper div with class form-group. If the validation is success then the class should be has-success. And the error message block is having CSS class help-block which is different from the native Yii class errorMessage. How can we generate such markup after the validation in Yii? Its very easy, just follow the instructions below.

The only thing we need to worry is about attaching a CSS class has-error to the wrapper div of the field. For this we just have add a one line of PHP code in the view file of the form.

You may have noticed the php code appended to the div class=”form-group” line,

This piece of code will check whether that particular field is having any validation error. If there is any error it will attach the has-error CSS class to that div. This piece of code should be given for all the fields in the form with the correct attribute name password to the hasErrors() function of the model instance. So the first part is done. Next is the error message section.

The CSS class attached with the error message section is a property of the CActiveForm widget. Inorder to change that we have to specify that property along with the CActiveForm widget. The name of the property associated with this is errorMessageCssClass. By specifying that property as help-block in the widget configuration will do the magic.

That’s all, your Bootstrap friendly Yii form validation is completed. Stay tuned for more Yii tips. Meanwhile I am writing about how to handle AJAX validation with Yii in Bootstrap style.