Click here to Skip to main content
Click here to Skip to main content

Using the jQuery unobtrusive validator with Twitter Bootstrap tooltips

, 21 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
jQuery unobtrusive validation plugin with Twitter Bootstrap 3 showing error messages as tooltips.

Introduction

When using JQuery unobtrusive validation the error message is shown by creating a span which displaces the position of the existing controls. If you have, for example, a horizontal form on top of other controls then this behavior might not be working for you since the 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 was also using Twitter Bootstrap so integrating with it was the next step.

Background

I started looking for a library which is doing that, but while there are libraries which do something similar, I haven’t find one doing exactly what I wanted. My starting point was the nugget package library with id jquery.validate.unobtrusive.bootstrap which is an extension of jQuery Validate Unobtrusive for Bootstrap 3. There are a few articles describing how to show a Bootstrap tooltip as the validation message, but I have found none which also changes the style of the tooltip to something more appropriate for an error message. So I decided to write one of my own - jquery.validate.unobtrusive.bootstrap.tooltip.js.

Using the code

Besides adding this library as a reference you also have to add jQuery, jQuery validate and jQuery unobtrusive validation. I have registered the following script bundle:

bundles.Add(new ScriptBundle("~/bundles/validate").Include(
    "~/Scripts/jquery.validate.js",
    "~/Scripts/jquery.validate.unobtrusive.js",
    "~/Scripts/own/jquery.validate.unobtrusive.bootstrap.tooltip.js")); 

The page must also include bootstrap.css and boostrap.js. In addition, a stylesheet containing the tooltip customization classes which are included later on in this article has to be referenced.

The first required step was to change the showErrors function. This is the last method on the validatior before the methods which create the span are called. It is done on the document load:

$(function () {
    $('form').each(function () {
        var validator = $(this).data('validator');
        validator.settings.showErrors = onValidated;
    });
}); 

 

The onValidated function is iterating through all the controls with errors and it shows the error message as a tooltip. In the case a control is no longer in error state it is added to success collection. The method iterates over the controls with no errors and it destroys the tooltips for them, as it can be seen below. The listing contains the whole JavaScript library:

(function ($) {
    var classes = { groupIdentifier: ".form-group", error: 'has-error', success: null };//success: 'has-success' 
    function updateClasses(inputElement, toAdd, toRemove) {
        var group = inputElement.closest(classes.groupIdentifier);
        if (group.length > 0) {
            group.addClass(toAdd).removeClass(toRemove);
        }
    }
    function onError(inputElement, message) {
        updateClasses(inputElement, classes.error, classes.success);

        var options = { html: true, title: '<div class="tooltip-alert alert-danger">' + message + '</div>' };
        inputElement.tooltip("destroy")
            .addClass("error")
            .tooltip(options);
    }
    function onSuccess(inputElement) {
        updateClasses(inputElement, classes.success, classes.error);
        inputElement.tooltip("destroy");
    }

    function onValidated(errorMap, errorList) {
        $.each(errorList, function () {
            onError($(this.element), this.message);
        });

        if (this.settings.success) {
            $.each(this.successList, function () {
                onSuccess($(this));
            });
        }
    }

    $(function () {
        $('form').each(function () {
            var validator = $(this).data('validator');
            validator.settings.showErrors = onValidated;
        });
    });
}(jQuery)); 

While initially I considered setting the form-group as successfully validated, I decided that the normal appearance is more appropriate. If one wants to show it as successfully validated, though, this can be done by assigning to the success class the has-success bootstrap class.

To make the tooltip look appropriate as an error validation message I had to make the content of the tooltip html and to include in it a div with class class="tooltip-alert alert-danger" containing the error message. The classes added to change the tooltip look are:

.tooltip-inner {
    max-width: 300px;
    padding: 0;
}
.tooltip-alert{
    padding: 8px 10px;
    font-weight: bolder;
    color: #A94442;
} 

The ASP.NET MVC view has a form which contains no validation message:

<form class="form-horizontal" role="form" onsubmit="return false;">
    <div class="form-group col-sm-3">
        @Html.LabelFor(model => model.From, new { @class = "control-label col-sm-2" })
        <div class="col-sm-10">
            @Html.TextBoxFor(m => m.From, new { type = "date", @class = "form-control" })
        </div>
    </div>
    
    <div class="form-group col-sm-3">
        @Html.LabelFor(model => model.To, new { @class = "control-label col-sm-1" })
        <div class="col-sm-10">
            @Html.TextBoxFor(m => m.To, new { type = "date", @class = "form-control" })
        </div>
    </div>
    <div class="form-group col-sm-5">
        @Html.LabelFor(model => model.Accounts, new { @class = "control-label col-sm-3" })
        <div class="col-sm-9">
            @Html.DropDownList("Accounts", Model.Accounts, new { @class = "form-control" })
        </div>
    </div>
    <div class="col-sm-1">
        <button type="submit" class="btn btn-default">Show</button>
    </div>
</form> 

The end result is the one from the image below:

form

Points of Interest

The interesting part of this code was not changing the jQuery unobtrusive validation library itself but extending it. Having a background in c# and server side development this proved to be more easy to do than I was expecting.

History

Keep a running update of any changes or improvements you've made here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Cristian Moldovan
Software Developer (Senior)
Romania Romania
No Biography provided

Comments and Discussions

 
Questioncustom Validation Summary [modified] PinmemberdevWebChristian27-Oct-14 15:04 
QuestionSource code PinmemberMember 1097133725-Jul-14 5:06 
AnswerRe: Source code PinmemberCristian Moldovan25-Jul-14 7:49 
QuestionSo cool! PinmemberKiem_Phong25-Jun-14 23:49 
AnswerRe: So cool! PinmemberCristian Moldovan14-Jul-14 11:52 
QuestionDemo Pinmemberneuron115-Jun-14 5:55 
AnswerRe: Demo PinmemberCristian Moldovan14-Jul-14 11:52 
QuestionGood one Pinmembercodeproject_anupam8-May-14 11:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 21 Jul 2014
Article Copyright 2014 by Cristian Moldovan
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid