jQuery Tooltip Validation Using Twitter Bootstrap

jQuery Tooltip Validation Using Twitter Bootstrap

CheapASPNETHostingReview.com | Generally, we use a jQuery unobtrusive validation plugin in ASP.NET MVC Applications.We are going to discuss the following topics in this article:

  1. Disadvantages of jQuery unobtrusive validation in MVC.
  2. jQuery tooltip validation

There are some disadvantages of using this plugin. When using the jQuery unobtrusive validation plugin, it creates a span tag to display error messages. If you have, for example, a horizontal form on top of the other controls, then this behavior might not be working for you, since they will break the page layout. It was the case for me and as such, I decided to change the default behavior of the jQuery unobtrusive validation library and instead of using a span to show the error message, I decided to use a tooltip. I am going to show you how I achieved this, using a tooltip with the help of a bootstrap.

Before going to the tooltip validation, first look at the traditional jQuery unobtrusive example.

The following is an example of an application of unobtrusive validation.

validation

When I click the Register button, the error message comes, as shown below:

click on Register button

If I increase the length of the error message, the layout will be broken like this. In the same way, when I place the same length error message below, the Textbox controls come as shown in the screenshot. The same layout-change problem occurs. Hence, this is a bad idea of using a default behavior of the  jQuery Unobtrusive validation plugin. I replaced the error type with a tooltip. It won’t change the layout structure.

Now the jQuery tooltip validation article begins from here,

jQuery tooltip validation using Twitter Bootstrap

Step 1

Create ASP.NET MVC Application.

  1. Create Application with MVC template.

Create a application

2. Add the following files.

add files

3. Create HomeController.cs.

Right click->Controllers folder->Add->Controller->name it as HomeController.cs.

add controller

4. Add Index Method to the Controller.

5. Add View to Index Action method.

Right click->Index Method->Add View->click OK.

Add view

Index view is created.

6. Now, replace the Index.cshtml code with the code given below:

Step 2

Add the script for the validation,

  1. Add myscript.js to the script folder.

    myscript.js

Step 3

Add styles for the error display.

Now run the Application and you will get the Window as shown below:

Enter details

Without entering anything into the fields, just click on the Register button and see what happens.

Register