jQuery Tooltip Validation Using Twitter Bootstrap

Generally, we use a jQuery unobtrusive validation plugin in ASP.NET MVC Applications.

We are going to discuss the following topics in this article:

Disadvantages of jQuery unobtrusive validation in MVC.
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.

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

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.

Create Application with MVC template.
Add the following files.
Create HomeController.cs.

Right click->Controllers folder->Add->Controller->name it as HomeController.cs.
Add Index Method to the Controller.
Add View to Index Action method.

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

Index view is created.
Now, replace the Index.cshtml code with the code given below:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Bootstrap tooltip Example</title>
6. 
7. <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
8. <script src="~/Scripts/jquery-1.9.1.min.js"></script>
9. <script src="~/Scripts/bootstrap.min.js"></script>
10. <script src="~/Scripts/jquery.validate.min.js"></script>
11. <script src="~/Scripts/jquery-validate.bootstrap-tooltip.min.js"></script>
12. <script src="~/Scripts/myscript.js"></script>
14. </head>
15. <body>
16. <div id="main">
17. @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { name = "RegistrationForm", id = "RegistrationForm" }))
18. {
19. <fieldset style="padding-left: 100px; box-shadow: 2px 2px 2px 2px #000;margin-top:30px;height:500px;">
20. <legend style="font-size:larger;font-weight:bold;">Registration page</legend>
21. <div id="left-part" align="left" style="float:left;margin-left:20px;">
22. @Html.Label("FirstName", new { required = "required" })<br />
23. @Html.TextBox("FirstName")<br /><br />
24. @Html.Label("LastName")<br />
25. @Html.TextBox("LastName")<br /><br />
26. @Html.Label("UserName")<br />
27. @Html.TextBox("UserName")<br /><br />
28. @Html.Label("Gender")<br />
29. @Html.RadioButton("Gender", "Male", false, new { id = "rbnMale", name = "rbnMale" })Male
30. @Html.RadioButton("Gender", "Female", false, new { id = "rbnFemale", name = "rbnFemale" })Female
31. <br /><br />
32. @Html.Label("Email Id:") <br />
33. @Html.TextBox("Email", null, new { type = "email" })<br /><br />
34. </div>
35. <div id="right-side" style="margin-left:400px;">
36. @Html.Label("Password")<br />
37. @Html.Password("Password")<br /><br />
38. @Html.Label("ConfirmPassword")<br />
39. @Html.Password("ConfirmPassword")<br /><br />
40. @Html.Label("MobileNo")<br />
41. @Html.TextBox("MobileNo", null, new { type = "number" })<br /><br />
42. @Html.Label("State")<br />
43. @Html.TextBox("State")<br /><br />
44. @Html.Label("Country")<br />
45. @Html.DropDownList("CountryDropdownlst", new List<SelectListItem>()
46. {
47. new SelectListItem(){Text="India",Value="0"},
48. new SelectListItem(){Text="China",Value="1"},
49. new SelectListItem(){Text="USA",Value="2"},
50. new SelectListItem(){Text="Russia",Value="3"}
51. }, "--select--", new { id = "CountryDropdownlst" })
52. <br /><br />
53. <input type="submit" value="Register" id="btnSubmit" name="btnSubmit" class="btn btn-primary"/>
54. </div>
55. </fieldset>
56. }
57. <br />
58. </div>
59. </body>
60. </html>

Step 2

Add the script for the validation,

Add myscript.js to the script folder.

myscript.js
1. //if no errors form will be submited
2. $.validator.setDefaults({
3. submitHandler: function () {
4. alert("form submited!");
5. }
6. });
7. debugger;
8. $(document).ready(function () {
9. $("#RegistrationForm").validate({
10. rules: {
11. FirstName: {
12. required: true,
13. minlength: 4,
14. maxlength: 15
15. },
16. LastName: {
17. required: true,
18. minlength: 4,
19. maxlength: 15
20. },
21. UserName: {
22. required: true,
23. minlength: 5
24. },
25. Gender: { required: true },
26. Email: {
27. required: true,
28. email: true
29. },
30. Password: {
31. required: true,
32. minlength: 5,
33. maxlength: 20
34. },
35. ConfirmPassword:{
36. required: true,
37. equalTo:"#Password"
38. },
39. MobileNo: {
40. required: true,
41. number: true,
42. minlength: 10,
43. maxlength:12
44. },
45. State: { required: true ,minlength:5},
46. CountryDropdownlst: {
47. required:true
48. }
49. },
50. messages: {
51. Gender: "Pls Select the Gender!",
52. FirstName: {
53. required: "Firstname required Firstname required Firstname required Firstname required ",
54. minlength: "pls enter min 4 chars",
55. maxlength:"only 15 chars are allowed"
56. },
57. LastName: {
58. required: "Lastname required",
59. minlength: "pls enter min 4 chars",
60. maxlength: "only 15 chars are allowed"
61. },
62. UserName: {
63. required: "Username is mandatory",
64. minlength:"pls enter min 5 chars"
65. },
66. Password: {
67. required: "Password is mandatory",
68. minlength:"pls enter min 5 chars"
69. },
70. ConfirmPassword: {
71. required: "Pls confirm password",
72. equalTo:"password does not match"
73. },
74. MobileNo: {
75. required: "pls enter mobile no",
76. minlength: "pls enter valid mobile no"
77. },
78. State:"Pls enter valid state",
79. CountryDropdownlst:"pls select your country"
81. },
82. //tooltip options to change position of tooltip..
83. tooltip_options: {
84. FirstName: { trigger: 'focus' },
85. Gender: { placement: 'top', html: true } //placement:'bottom'for bottom
86. },
87. //submitHandler: function (form) {
88. // $("#validity_label").html('
90. No errors. Like a boss.
91. ');
92. //},
93. invalidHandler: function (form, validator) {
94. $("#validity_label").html('
96. There be ' + validator.numberOfInvalids() + ' error' + (validator.numberOfInvalids() > 1 ? 's' : '') + ' here. OH NOES!!!!!
97. ');
98. }
99. });
100. });

Step 3

Add styles for the error display.

.tooltip{
margin-left:100px;
}
.tooltip-inner {
background: #ff3333; /*tooltip text background color*/
border-radius: 0px;
font-weight: bolder;
box-shadow: 1px 1px 1px 1px black;
}
.tooltip.top .tooltip-arrow {
border-top-color: red;
margin-left: -55px;
}
input[type="text"],input[type="password"],input[type="number"],input[type="email"], #CountryDropdownlst {
box-shadow: 1px 1px 1px 1px grey;
width: 200px;
}
#CountryDropdownlst{
height:27px;
}
/*.tooltip-inner tooltip-arrow {
margin-left: 200px;
}*/

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

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

In the above screen shot, if I increase the length of the error message, the layout does not change.for reference click here

Related Articles:

1.Jquery validation using Data Annotations.

2.Jquery validations plugin in mvc5.

3.Remote validation in asp.net mvc.

4.Validating form in real time using jquery.

Conclusion

I hope this article is understandable for every reader. It is also helpful in the real time projects. If you have any suggestion to improve this article, I am always grateful. See this article in my blog and download source code from here Tooltip validation using Twitter bootstrap.