Making Twitter Bootstrap, jQuery.validate and ASP MVC play well together

I never liked the default error highlighting around input elements of my form and after playing around with Twitter Bootstrap for a few months, I wanted to change this. My first thought was to use this the built-in popovers that are in this library to add a bit of pseudo-elegant nuance to my pages.
I started with a dumb class in ASP MVC 4, adding bootstrap to my project and created a form:

public class User
    {        
        public string Name { get; set; }
    }

@using (Html.BeginForm("Post", "Home", FormMethod.Post, new { id = "myform" }))
    {       
        
        @Html.TextBoxFor(x => x.Name, 
         new { data_content = "Name is required", 
               data_original_title = "Name" })
                        
        
    }

The data_content and data_original_title helpers are there to configure the popover's title and content to display whatever notifications I would show to my users. These are transformed at runtime into data-content and data-original-title HTML5 attributes by ASP MVC / Razor and then are captured by twitter bootstrap javascript component.

How is this done? Basically, I need to instruct jQuery Validate to do its job and in case of an error, I showed the popover near the 'invalid' input. For this to work, I should create validation rules (in JavaScript), pass them to jQuery Validate and set a callback function to display validations:

$(document).ready(function () {

        var allValidationRules = {
            Name: "required"           
        };
        $("#myform").validate({
            rules: allValidationRules,
            showErrors: function (element, errorClass, validClass) {
                for (var i in errorClass) {
                    $(errorClass[i].element).popover('show');
                }
            }
        });
    });

What is going on here?
Setting up validations like this means that I should specify the rules in JavaScript and that is why allValidationRules is there and it's passed to jQuery validate. Name should match the name of the input that is validated; in this case I used .TextBoxFor(....) in the form. Another thing that I should mention - although might seem obvious - is that the validation rules are Case Sensitive. In this case if you change 'Name' to 'name', the validation won't work.

When showErrors callback gets invoked, I grab the input elements that are supposed to be invalid and show the popover right next to them. Like this:

Doesn't look that bad, right?
Cheers.