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.

bsasperv2.png

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/

Last edited Nov 24, 2014 at 9:21 PM by JayTeeAitch, version 13