Canarys | IT Services

Blogs

Using Bootstrap Validation in Asp.net Applications

Share

Bootstrap is a powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript.

Bootstrap is built on responsive 12-column grids, layouts and components. Whether you need a fixed grid or a responsive, Bootstrap’s responsive CSS adjusts to Desktops,Tablets and Mobiles.

Advantages of Bootstrap:

  • Since Bootstrap 3, the framework consists of Mobile first styles throughout the entire library instead of in separate files.
  •  It is supported by all popular browsers.
  •  With just the knowledge of HTML and CSS anyone can get started with Bootstrap.
  •  Bootstrap’s responsive CSS adjusts to Desktops,Tablets and Mobiles.

responsive

  • Provides a clean and uniform solution for building an interface for developers.
  • It contains beautiful and functional built-in components which are easy to customize.
  • It also provides web based customization.
  • And best of all it is an open source.

You can download the latest version of Bootstrap .And also you can download the jquery Bootstrap validator plugin to validate form fields.
BootstrapValidator comes with various built-in validators.

There are three levels of settings which are form, field, and validators.

The BootstrapValidator plugin can be called as following:

$(formSelector).bootstrapValidator({
 ... Form settings go here ...
 fields: {
 specificFieldName: {
 ... Field settings go here ...

 validators: {
 specificValidatorName: {
 ... common validator settings go here ...

 ... specific validator settings ...
 }
 }
 }
 }
});



Since the BootstrapValidator plugin requires jQuery and Bootstrap 3, we have to include the required CSS and JS files to our page:

bootstrap include

The below html content shows the css and js files required

references

Example:

The following form requires the password and confirmation one to be the same using identical validator.

HTML Code :


       

 

   

               

                    

   

 

Design looks like this

Controls

JS Code:



 The validation looks like this

Control validators

For more information on Bootstrap validators please refer the below link

http://bootstrapvalidator.com/validators/

Leave a Reply

Your email address will not be published. Required fields are marked *

Reach Us

With Canarys,
Let’s Plan. Grow. Strive. Succeed.