X
19Sep

Using Bootstrap Validation in Asp.net Applications

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/

 

 

Related

what's new features are coming in Bootstrap4

What is Bootstrap?Bootstrap is a collection of tools for creating responsive websites...

Read More >

Twitter Bootstrap – An UI Framework for Web Applications

Twitter Bootstrap is an open source front end framework for HTML, CSS and JS, using which we can cre...

Read More >

Share

Post a Comment

  • Recent
  • Popular
  • Tag
Monthly Archive
Subscribe
Name

Text/HTML
Contact Us
  • *
  • *