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:

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.

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:

&lt;!DOCTYPE html&gt;  
&lt;html&gt;  
&lt;head&gt;  
    &lt;title&gt;Bootstrap tooltip Example&lt;/title&gt;  
  
    &lt;!-----------------resource files-------------&gt;  
    &lt;link href="~/Content/bootstrap.min.css" rel="stylesheet" /&gt;  
    &lt;script src="~/Scripts/jquery-1.9.1.min.js"&gt;&lt;/script&gt;  
    &lt;script src="~/Scripts/bootstrap.min.js"&gt;&lt;/script&gt;  
    &lt;script src="~/Scripts/jquery.validate.min.js"&gt;&lt;/script&gt;  
    &lt;script src="~/Scripts/jquery-validate.bootstrap-tooltip.min.js"&gt;&lt;/script&gt;  
    &lt;script src="~/Scripts/myscript.js"&gt;&lt;/script&gt;  
  
&lt;/head&gt;  
&lt;body&gt;  
&lt;div id="main"&gt;  
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { name = "RegistrationForm", id = "RegistrationForm" }))  
    {  
        &lt;fieldset style="padding-left: 100px; box-shadow: 2px 2px 2px 2px #000;margin-top:30px;height:500px;"&gt;  
            &lt;legend style="font-size:larger;font-weight:bold;"&gt;Registration page&lt;/legend&gt;  
            &lt;div id="left-part" align="left" style="float:left;margin-left:20px;"&gt;  
                @Html.Label("FirstName", new { required = "required" })&lt;br /&gt;  
                @Html.TextBox("FirstName")&lt;br /&gt;&lt;br /&gt;  
                @Html.Label("LastName")&lt;br /&gt;  
                @Html.TextBox("LastName")&lt;br /&gt;&lt;br /&gt;  
                @Html.Label("UserName")&lt;br /&gt;  
                @Html.TextBox("UserName")&lt;br /&gt;&lt;br /&gt;  
                @Html.Label("Gender")&lt;br /&gt;  
                @Html.RadioButton("Gender", "Male", false, new { id = "rbnMale", name = "rbnMale" })Male  
                @Html.RadioButton("Gender", "Female", false, new { id = "rbnFemale", name = "rbnFemale" })Female  
                &lt;br /&gt;&lt;br /&gt;  
                @Html.Label("Email Id:")  &lt;br /&gt;  
                @Html.TextBox("Email", null, new { type = "email" })&lt;br /&gt;&lt;br /&gt;  
            &lt;/div&gt;  
            &lt;div id="right-side" style="margin-left:400px;"&gt;  
                @Html.Label("Password")&lt;br /&gt;  
                @Html.Password("Password")&lt;br /&gt;&lt;br /&gt;  
                @Html.Label("ConfirmPassword")&lt;br /&gt;  
                @Html.Password("ConfirmPassword")&lt;br /&gt;&lt;br /&gt;  
                @Html.Label("MobileNo")&lt;br /&gt;  
                @Html.TextBox("MobileNo", null, new { type = "number" })&lt;br /&gt;&lt;br /&gt;  
                @Html.Label("State")&lt;br /&gt;  
                @Html.TextBox("State")&lt;br /&gt;&lt;br /&gt;  
                @Html.Label("Country")&lt;br /&gt;  
                @Html.DropDownList("CountryDropdownlst", new List&lt;SelectListItem&gt;()  
                         {  
                            new SelectListItem(){Text="India",Value="0"},  
                            new SelectListItem(){Text="China",Value="1"},  
                            new SelectListItem(){Text="USA",Value="2"},  
                            new SelectListItem(){Text="Russia",Value="3"}  
                         }, "--select--", new { id = "CountryDropdownlst" })  
                &lt;br /&gt;&lt;br /&gt;  
                &lt;input type="submit" value="Register" id="btnSubmit" name="btnSubmit" class="btn btn-primary"/&gt;  
            &lt;/div&gt;  
        &lt;/fieldset&gt;  
    }  
    &lt;br /&gt;  
&lt;/div&gt;  
&lt;/body&gt;  
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap tooltip Example</title>

</head>

<body>

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { name = "RegistrationForm", id = "RegistrationForm" }))

{

<legend style="font-size:larger;font-weight:bold;">Registration page</legend>

@Html.Label("FirstName", new { required = "required" })<br />

@Html.TextBox("FirstName")<br /><br />

@Html.Label("LastName")<br />

@Html.TextBox("LastName")<br /><br />

@Html.Label("UserName")<br />

@Html.TextBox("UserName")<br /><br />

@Html.Label("Gender")<br />

@Html.RadioButton("Gender", "Male", false, new { id = "rbnMale", name = "rbnMale" })Male

@Html.RadioButton("Gender", "Female", false, new { id = "rbnFemale", name = "rbnFemale" })Female

@Html.Label("Email Id:") <br />

@Html.TextBox("Email", null, new { type = "email" })<br /><br />

</div>

@Html.Label("Password")<br />

@Html.Password("Password")<br /><br />

@Html.Label("ConfirmPassword")<br />

@Html.Password("ConfirmPassword")<br /><br />

@Html.Label("MobileNo")<br />

@Html.TextBox("MobileNo", null, new { type = "number" })<br /><br />

@Html.Label("State")<br />

@Html.TextBox("State")<br /><br />

@Html.Label("Country")<br />

@Html.DropDownList("CountryDropdownlst", new List<SelectListItem>()

{

new SelectListItem(){Text="India",Value="0"},

new SelectListItem(){Text="China",Value="1"},

new SelectListItem(){Text="USA",Value="2"},

new SelectListItem(){Text="Russia",Value="3"}

}, "--select--", new { id = "CountryDropdownlst" })

</div>

</fieldset>

}

<br />

</div>

</body>

</html>

Step 2

Add the script for the validation,

Add myscript.js to the script folder.
myscript.js

//if no errors form will be submited  
$.validator.setDefaults({  
    submitHandler: function () {  
        alert("form submited!");  
    }  
});  
debugger;  
$(document).ready(function () {  
    $("#RegistrationForm").validate({  
        rules: {  
            FirstName: {  
                required: true,  
                minlength: 4,  
                maxlength: 15  
            },  
            LastName: {  
                required: true,  
                minlength: 4,  
                maxlength: 15  
            },  
            UserName: {  
                required: true,  
                minlength: 5  
            },  
            Gender: { required: true },  
            Email: {  
                required: true,  
                email: true  
            },  
            Password: {  
                required: true,  
                minlength: 5,  
                maxlength: 20  
            },  
            ConfirmPassword:{  
                required: true,  
                equalTo:"#Password"  
            },  
            MobileNo: {  
                required: true,  
                number: true,  
                minlength: 10,  
                maxlength:12  
            },  
            State: { required: true ,minlength:5},  
            CountryDropdownlst: {  
                required:true  
            }  
        },  
        messages: {  
            Gender: "Pls Select the Gender!",  
            FirstName: {  
                required: "Firstname required Firstname required Firstname required Firstname required ",  
                minlength: "pls enter min 4 chars",  
                maxlength:"only 15 chars are allowed"  
            },  
            LastName: {  
                required: "Lastname required",  
                minlength: "pls enter min 4 chars",  
                maxlength: "only 15 chars are allowed"  
            },  
            UserName: {  
                required: "Username is mandatory",  
                minlength:"pls enter min 5 chars"  
            },  
            Password: {  
                required: "Password is mandatory",  
                minlength:"pls enter min 5 chars"  
            },  
            ConfirmPassword: {  
                required: "Pls confirm password",  
                equalTo:"password does not match"  
            },  
            MobileNo: {  
                required: "pls enter mobile no",  
                minlength: "pls enter valid mobile no"  
            },  
            State:"Pls enter valid state",  
            CountryDropdownlst:"pls select your country"  
  
        },  
        //tooltip options to change position of tooltip..  
        tooltip_options: {  
            FirstName: { trigger: 'focus' },  
            Gender: { placement: 'top', html: true }    //placement:'bottom'for bottom  
        },  
        //submitHandler: function (form) {  
        //    $("#validity_label").html('  
  
No errors.  Like a boss.  
');  
        //},  
        invalidHandler: function (form, validator) {  
            $("#validity_label").html('  
  
There be ' + validator.numberOfInvalids() + ' error' + (validator.numberOfInvalids() &gt; 1 ? 's' : '') + ' here.  OH NOES!!!!!  
');  
        }  
    });  
});

100

//if no errors form will be submited

$.validator.setDefaults({

submitHandler: function () {

alert("form submited!");

}

});

debugger;

$(document).ready(function () {

$("#RegistrationForm").validate({

rules: {

FirstName: {

required: true,

minlength: 4,

maxlength: 15

LastName: {

required: true,

minlength: 4,

maxlength: 15

UserName: {

required: true,

minlength: 5

Gender: { required: true },

Email: {

required: true,

email: true

Password: {

required: true,

minlength: 5,

maxlength: 20

ConfirmPassword:{

required: true,

equalTo:"#Password"

MobileNo: {

required: true,

number: true,

minlength: 10,

maxlength:12

State: { required: true ,minlength:5},

CountryDropdownlst: {

required:true

}

messages: {

Gender: "Pls Select the Gender!",

FirstName: {

required: "Firstname required Firstname required Firstname required Firstname required ",

minlength: "pls enter min 4 chars",

maxlength:"only 15 chars are allowed"

LastName: {

required: "Lastname required",

minlength: "pls enter min 4 chars",

maxlength: "only 15 chars are allowed"

UserName: {

required: "Username is mandatory",

minlength:"pls enter min 5 chars"

Password: {

required: "Password is mandatory",

minlength:"pls enter min 5 chars"

ConfirmPassword: {

required: "Pls confirm password",

equalTo:"password does not match"

MobileNo: {

required: "pls enter mobile no",

minlength: "pls enter valid mobile no"

State:"Pls enter valid state",

CountryDropdownlst:"pls select your country"

//tooltip options to change position of tooltip..

tooltip_options: {

FirstName: { trigger: 'focus' },

Gender: { placement: 'top', html: true } //placement:'bottom'for bottom

//submitHandler: function (form) {

// $("#validity_label").html('

No errors. Like a boss.

');

//},

invalidHandler: function (form, validator) {

$("#validity_label").html('

There be ' + validator.numberOfInvalids() + ' error' + (validator.numberOfInvalids() > 1 ? 's' : '') + ' here. OH NOES!!!!!

');

}

});

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;

. 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.

Using manually the ASP.NET MVC’s client side validation infrastructure

CheapASPNETHostingReview.com | Best and cheap ASP.NET MVC hosting. ASP.NET MVC client side validation is based on the jQuery validation plugin. It can be said that MVC’s client-side validation is an opinionated version of how jQuery validation should work in an ASP.NET MVC project. Despite this, the underlying implementation is fully based on jQuery’s. In this blog post I’ll show you how you can take advantage of this.

ASP.NET MVC Client Side validation requirements

First, here’s the list of things you need to do to enable client-side validation in an ASP.NET MVC project Make sure your client side code is loading both:

jquery.validate.js
jquery.validate.unobtrusive.js

Make sure your web.config has the following keys in appSettings with the follwoing values:

&lt;appSettings&gt;
    ...
    &lt;add key="ClientValidationEnabled" value="true" /&gt;
    &lt;add key="UnobtrusiveJavaScriptEnabled" value="true" /&gt;
  &lt;/appSettings&gt;

...

</appSettings>

These settings can be overridden in a controller, make sure that is not happening. For example this would turn off client side validation if executed inside a controller’s action:

public ActionResult Index()
{
    HtmlHelper.ClientValidationEnabled = false;    
    return View();
}

public ActionResult Index()

{

HtmlHelper.ClientValidationEnabled = false;

return View();

}

The next requirement is that you use attributes from System.ComponentModel.DataAnnotations in the Model class that is used in view where you want client-side validation enabled.

For example, if we want the Email field to be a valid email, and make the password and email fields required we would create a model like this:

using System.ComponentModel.DataAnnotations; 

public class LoginViewModel
{
    [Required]        
    [EmailAddress]
    public string Email { get; set; }

    [Required]                
    public string Password { get; set; }            
}

using System.ComponentModel.DataAnnotations;

public class LoginViewModel

{

[Required]

[EmailAddress]

public string Email { get; set; }

[Required]

public string Password { get; set; }

}

Finally, we have to use the HtmlHelpers that generate the correct markup for all of this to work, and they have to be inside a form, for example

@model LoginViewModel

&lt;form&gt;
    @Html.LabelFor(m =&gt; m.Email)
    @Html.TextBoxFor(m =&gt; m.Email)
    @Html.ValidationMessageFor(m =&gt; m.Email)

    @Html.LabelFor(m =&gt; m.Password)
    @Html.PasswordFor(m =&gt; m.Password)
    @Html.ValidationMessageFor(m =&gt; m.Password)
&lt;/form&gt;

@model LoginViewModel

<form>

@Html.LabelFor(m => m.Email)

@Html.TextBoxFor(m => m.Email)

@Html.ValidationMessageFor(m => m.Email)

@Html.LabelFor(m => m.Password)

@Html.PasswordFor(m => m.Password)

@Html.ValidationMessageFor(m => m.Password)

</form>

Getting away with using Client Side validation without a model

The last two requirements are actually optional. It is possible to take advantage of client side validation without having to create a model class and annotate it, which can be useful if you only use a couple of parameters (such as in the Login example).

If you inspect the markup that the helpers generate you’ll see that it’s actually pretty simple:

&lt;input type="text" name="email" data-val="true" data-val-required="The email is required"/&gt;
&lt;span class="field-validation-valid" data-valmsg-for="email" data-valmsg-replace="true"&gt;&lt;/span&gt;

1 2	<input type="text" name="email" data-val="true" data-val-required="The email is required"/> <span class="field-validation-valid" data-valmsg-for="email" data-valmsg-replace="true"></span>

It turns out that to enable client side validation without using the HtmlHelpers and a model you just have to add an input with data-val="true" and then data-val- followed by validation method that you want to apply (e.g. data-val-required), the value of which will be the error message presented to the user (e.g. data-val-required="This is the error message"). This works because the MVC’s “unobtrusive validation” works by looking for inputs that are annotated with data-val attributes.

The data-valmsg-for‘s value is the name (not the id) of the input it refers to, and data-valmsg-replace="true" just means that the default message should be replaced, for example you could have a default message for the email field:

&lt;span class="field-validation-valid" data-valmsg-for="email" data-valmsg-replace="true"&gt;The email must be unique&lt;/span&gt;

1	<span class="field-validation-valid" data-valmsg-for="email" data-valmsg-replace="true">The email must be unique</span>

This message would then be replaced by any validation error that occurs in the email field, for example “The email is required”. If data-valmsg-replace="false" then the original message will never be replaced. The only consequence of an error is that the span’s class is changed from field-validation-valid to field-validation-error (this happens irrespectively of the value of data-valmsg-replace="false").

Some validation methods have parameters, for example RegularExpression. The way these work is very similar, they just need additional data-val- for their parameters. If you want to validate a text field using a regular expression for 5 to 8 digits, it would look like this:

&lt;input type="text" name="number" id="number" data-val="true" data-val-regex="Valid input is 5 to 8 digits" data-val-regex-pattern="^\d{5,8}$"/&gt;

1	<input type="text" name="number" id="number" data-val="true" data-val-regex="Valid input is 5 to 8 digits" data-val-regex-pattern="^\d{5,8}$"/>

If you create the markup yourself you can get away without having to create a model for your view. Using the login example from above, your controller action for handling the user logging in could simply be:

public ActionResult Login(string email, string password)
    {           
        ...
    }

public ActionResult Login(string email, string password)

{

...

}

You’d have to make any server-side checks on the parameters yourself though.

Here is the list of the System.ComponentModel.DataAnnotation attributes you can use, and their data-val counterparts:

Compare
- data-val-equalto="Error message"
- data-val-equalto-other="The name of the other field"
CreditCard
- data-val-creditcard="Error message"
EmailAddress
- data-val-email="Error message"
MaxLength
- data-val-maxlength="Error message"
- data-val-maxlength-max="Maximum length (e.g. 5)"
MinLength
- data-val-minlength="Error message"
- data-val-minlength-min="Minimum length (e.g. 2)"
Range
- data-val-range="Error message"
- data-val-range-max="Max value"
- data-val-range-min="Min value"
RegularExpression
- data-val-regex="Error message"
- data-val-regex-pattern="The regular expression (e.g. ^[a-z]+$)"
Required
- data-val-required="Error message"
StringLength
- data-val-length="Error message"
- data-val-length-max="Maximum number of characters"

There are also a few validation methods you can use that don’t seem to have a counterpart in System.ComponentModel.DataAnnotation. In fact you get a list of all the available client side validation methods by typing (for example in chrome) dev tools console: $.validator.unobtrusive.adapters. Here’s the list of the ones that don’t have a matching attribute: date, digits, number, url, length, remote, password.