ASP.NET

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:

  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.



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.

  1. Create Application with MVC template.



  2. Add the following files.



  3. Create HomeController.cs.

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



  4. Add Index Method to the Controller.

  5. Add View to Index Action method.

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



    Index view is created.

  6. Now, replace the Index.cshtml code with the code given below:
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <title>Bootstrap tooltip Example</title>  
    5.   
    6.     <!-----------------resource files------------->  
    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>  
    13.   
    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,

  1. 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"  
    80.   
    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('  
    89.   
    90. No errors.  Like a boss.  
    91. ');  
    92.         //},  
    93.         invalidHandler: function (form, validator) {  
    94.             $("#validity_label").html('  
    95.   
    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.

  1. .tooltip{  
  2.        margin-left:100px;             
  3.    }  
  4.    .tooltip-inner {  
  5.        background: #ff3333; /*tooltip text background color*/  
  6.        border-radius: 0px;  
  7.        font-weight: bolder;  
  8.        box-shadow: 1px 1px 1px 1px black;  
  9.    }  
  10.    .tooltip.top .tooltip-arrow {  
  11.        border-top-color: red;  
  12.        margin-left: -55px;             
  13.    }  
  14.    input[type="text"],input[type="password"],input[type="number"],input[type="email"], #CountryDropdownlst {  
  15.        box-shadow: 1px 1px 1px 1px grey;  
  16.        width: 200px;  
  17.    }  
  18.    #CountryDropdownlst{  
  19.        height:27px;  
  20.    }  
  21.    /*.tooltip-inner tooltip-arrow { 
  22.        margin-left: 200px; 
  23.    }*/  
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:
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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs