Bsasper is a jQuery plugin that converts the output of all ASP.NET WebForms dynamic validation errors from inline text to Bootstrap 3 popovers. See: http://getbootstrap.com/javascript/#popovers

Both client-side error messages and messages that result from a post-back are rendered as popovers.

Usage

$(selector).bsasper(options);

Simply select the input controls you want to override:

$("input[type=text], textarea").bsasper();

All errors contained in validation controls with a Display setting of Dynamic will be converted to popovers that will be displayed, by default, to the right of the control. If more than one error is active for a control, they will all be displayed separated by a new line.

Options

Option	Type	Default	Details
animation	bool	true	See: http://getbootstrap.com/javascript/#popovers
beforeShowFirst	function	null	If specified, the function is called before the first error is displayed
container	string/false	'body'	See: http://getbootstrap.com/javascript/#popovers
createContent	function	(see details)	The function receives just one parameter which is an array containing one or more error messages. By default, all control errors are displayed, separated by a new line. See below for an example of how to render the message differently.
placement	string	'right'	See: http://getbootstrap.com/javascript/#popovers
title	string/function	''	See: http://getbootstrap.com/javascript/#popovers

This example shows how to display just the first error in red:

 $("input[type=text], textarea").bsasper({
      createContent: function (errors) {
          return '<span style="color:red;">' + errors[0] + '</span>';
      }
 }); 

To scroll to the top of the page before displaying the errors, use the beforeShowFirst() callback:

$("input[type=text], textarea").bsasper({
    beforeShowFirst: function () {
        $('html,body').scrollTop(0);
    }
});

All option defaults can be overridden at the global level via: $.fn.bsasper.defaults

 $.fn.bsasper.defaults.container = false;
 $.fn.bsasper.defaults.createContent = function (errors) {
     return '<span style="color:red;">' + errors[0] + '</span>';
 };

Implementation

Two functions from the Microsoft WebUIValidation.js library are overriden:

Function	Description
ValidatorUpdateDisplay	This function takes a single validation control and either displays or hides the error message depending on its state. If the Display style of the validation control is not set to Dynamic or the control is not related to an input control that has been selected for popover, the original function is called.
ValidatorUpdateIsValid	This function is called from multiple sources to set whether the whole page is valid. The override always calls the original function and then calls a function to display the messages as popovers.

Install

https://www.nuget.org/packages/bsasper.js/