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.

Free Online Drag n Drop Bootstrap Form Designer

Bootstrap is a CSS framework which is widely used in most of the website designs. Inorder to create beautiful forms you need to follow the CSS structure of bootstrap which might be a little confusing if your not a expert in the designing domain. Bootstrap Form Desinger is not only for those guys but also for experts to created beautiful form with a few clicks and drags.

 

Bootstrap Form Designer is an online drag n drop form designer application which can be used to create Bootstrap forms within 5 mins. It provides most of the components, you just have to drag the components based on your requirements and configure the settings for each components. Finally when you are done you can get the rendered code for the form which you can copy and paste in your page. Thats it, you sexy bootstrap form is ready to go live.

Bootstrap Drag and Drop Form Components
Bootstrap Drag and Drop Form Components

Bootstrap Form Builder provides a set of components including the normal input fields but extending to prepanded text box, appended text box, button drop down etc. The configuration panel for each components allow user to configure each component to suit users needs.

Bootstrap Form Designer Options
Bootstrap Form Designer Options

Bootstrap Prepanded Text Box OptionsWhen you are done with the designing of the form just click the Rendered tab to get your code for the form you just designed. You can copy that and paste in your page which uses bootstrap style sheet to display the form.

Bootstrap Rendered Form  Code

 

Styling Yii CGridView with Bootstrap CSS

When you are working in the theme build with bootstrap css you will be having trouble with Yii widgets like CGridView, CDetailView. This is because Yii is having an independent CSS for these widgets. We have to disable those CSS files and apply the Bootstrap CSS to these widgets in order to render these widgets with the Bootstrap styling. You can easily configure your widgets to show CGridView with Bootstrap styling.

This can be done by defining the properties for the widget. But if you are using these widgets in several places, this task will hard to do, but we can do this very easily by configuring the widgets properties in the main.php config file itself.

Just place the following code in the main.php config file. The widgetFactory is the array containing the global properties of the widgets.

In the above code snippet I am altering the properties of CGridView and CLinkPager since pager will be also displayed along with CGridView.

Yii CGridView with Bootstrap Styling
Yii CGridView with Bootstrap Styling

After setting this, all your CGridViews will be working with this property and will be displayed with the Bootstrap styling.

This setting will tell the Yii to not load any default CSS file associated with this widget.