jQuery (ASP.NET) Validator Callout Plugin
This plugin enhances the presentation of ASP.NET validator controls, by displaying the validation error message inside a (popup) callout box, like this:
This plugin is similar to the ValidatorCallout extender in the ASP.NET AJAX Control Toolkit.
Download
Download the latest release from http://plugins.jquery.com/project/updnValidatorCallout
Usage
Simply call jQuery.updnValidatorCallout.attachAll() to attach the plugin to all validators on your page.
For example:
jQuery(document).ready(function($) {
$.updnValidatorCallout.attachAll();
});
You can style the callout box and pointer by specifying the ”calloutCssClass” and “pointerCssClass” options:
jQuery(document).ready(function($) {
$.updnWatermark.attachAll({
calloutCssClass: "myValidatorCallout",
pointerCssClass: "myValidatorCalloutPointer",
);
});
You can also style the input element and all associated labels that are in error state by specifying the “errorInputCssClass” and “errorLabelCssClass” options:
jQuery(document).ready(function($) {
$.updnWatermark.attachAll({
calloutCssClass: "myValidatorCallout",
pointerCssClass: "myValidatorCalloutPointer",
errorInputCssClass: "myValidationErrorInput",
errorLabelCssClass: "myValidationErrorLabel" }
);
});
Alternatively, you can simply style the default CSS classes provided by the plugin:
.updnValidatorCallout
{
background-color: #fcc;
color: #900;
padding: 5px;
margin: -5px 0 0 10px;
position: relative;
}
.updnValidatorCalloutPointer
{
position: absolute;
left: 0;
top: 7px;
margin: 0 0 0 -10px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 10px solid #fcc;
border-left: 0;
}
.updnValidationErrorInput
{
background-color: #fcc;
}
.updnValidationErrorLabel
{
color: #900;
}
N.B. For the triangular pointer, I used a pure CSS solution as detailed in this article.
Really like this plugin, have started to leave the ajaxtoolkit behind and moving to jquery solutions.
Have one question, if this is version 0.1.0 how reliable is it and what is it lacking to become a stable 1.0.0 version.
Great job! Cheers.
David
April 29, 2009 at 10:28 pm
I am currently updating this plugin to work in more scenarios, plus getting together better examples. A few more days, and I will upload the final version.
tzkuei
April 29, 2009 at 11:21 pm
Looking forward to it. =)
David
April 30, 2009 at 10:17 pm
Hi again!
Have a request for a feature.
The ValidatorCalloutExtender has a HighlightCssClass property thats very useful for styling the input elements on error. Is this something that could be added?
David
May 2, 2009 at 11:40 am
I have uploaded a new version of the plugin!
tzkuei
May 6, 2009 at 9:44 am
Hello, can you post a live sample? I dont see callout box at my page
Leonid
May 6, 2009 at 12:53 pm
And doesnt work properly with dropdown
got error in jquery file
offsetParent: function() {
var offsetParent = this[0].offsetParent || document.body;
this[0].offsetParent – is undefined
Leonid
May 6, 2009 at 3:35 pm
I’m a jQuery newbie and was wondering if you could you also post an example project/page?
Darren
May 6, 2009 at 9:08 pm
Forget my previous post, I managed to get it working. Looks great!
Darren
May 6, 2009 at 9:25 pm
I have uploaded a new release with an example project that you can open in Visual Studio 2008.
tzkuei
May 6, 2009 at 9:54 pm
Great job. Bye, bye ValidatorCallouts.
David
May 6, 2009 at 10:10 pm
I’ve add it a close button for the callout.
The code can find in the follwing Url:
http://plugins.jquery.com/node/8308
Satri
May 27, 2009 at 3:07 am
I need a way to position the call-outs individually – eg to the left, pointing right OR above, pointing down OR to the right, pointing left.
I’m currently moving away from AJAX Validator Callouts because they don’t facilitate this. Is there any way I can do that with this plug-in? It seems as though in assigns the same CSS to each call-out… I might be able to use CSS selectors to pick out the individual call-outs, but I’d like a better way to achieve this – eg each call-out can have it’s CSS class set individually.
Hit me back with your thoughts:
alundgren04@gmail.com
Andrew
June 2, 2009 at 3:53 pm
Personally, I’d aim for consistency, but I know in some cases, it would be more appropriate for the callouts to open in other orientations. I’ll post an update this weekend.
tzkuei
June 2, 2009 at 10:14 pm
It would be nice to have the ability to only apply the callouts to certain areas of the page…i.e. only to elements contained within a certain panel. I imagine the code would look something like this:
$(document).ready(function() {
$(“#myPanel”).attachValidatorCallouts();
});
Kevin
June 5, 2009 at 12:37 am
Awesome! That’d be greatly appreciated.
Andrew
June 5, 2009 at 2:02 am
Great plugin – real life saver on the project I’m currently working on. However, I’ve run into an issue with positioning the callout when the validation is inside an update panel.
It all works, it’s just not positioned correctly. It allmost seams like the top/left position is worked out before the elements are added to the update panel..?
I re-attach any validation in the Sys.WebForms.PageRequestManager.getInstance().add_endRequest event, as there might be new validators on the page after the update.
Cheers,
Jonas
Jonas Follesø
June 9, 2009 at 8:33 am
Hi all,
I really enjoy using this plugin. Great job !!
I have made some improvements i’d like to share with you. It’s about dealing with required checkboxes and adding a scrollTo() effect after opening a callout. Send me a mail if you want to see.
Chers,
Butcho
Butcho
August 12, 2009 at 1:57 pm
Can i call server side validator method too with this plugin. I want to validate from server too.
thx
bhao
August 23, 2009 at 6:43 am
No, this plugin can only alter the presentation of the client-side validation error messages. But I have an ASP.NET AJAX Control that will help you develop AJAX validator controls! I’ll make a post soon.
tzkuei
August 23, 2009 at 8:28 pm
Works well but it doesn’t display correctly when used in a jQuery modal dialog. It appears behind ?!
Nice work !
Narfix
August 26, 2009 at 11:58 am
Of the top of my head, try adding this to your CSS:
.ui-dialog .updnValidatorCallout { z-index: 9999 }
tzkuei
August 26, 2009 at 9:56 pm
Very nice!
Very easy to use…realy like the design.
How to make it left to the text boxes?
BR!
Eran
Eran
August 30, 2009 at 7:58 am
is there any plugin available in JQuery to replace asp.net ajax MaskEditExtender ?
lourdhu
November 6, 2009 at 2:52 pm
I found an odd case that seems to break the plugin: If I include jquery-ui-1.7.1.custom.min.js (the standard jQuery plugins), almost all of the popup is hidden or missing – little more than the pointer appears. Very strange, and I haven’t found a solution.
Sandy
November 11, 2009 at 12:40 am
My forms are in a CSS centered section, so the callouts are not positioned correctly. Any ideas?
Charles
April 2, 2010 at 7:14 pm
Charles, i had the same problem, but i was using jquery tabs. The position is calculated wrong. Instead of
var pos = $input.position();
use:
var pos = $input.offset();
Around line 62.
Wijnand
May 11, 2010 at 12:24 pm
The plugin has problems when there are multiple validators attached to one control. For example, when there is regularexpressionvalidator and a requiredfiledvalidator attached to the same control. Any help would be appreciated. Thanks!
Grady
May 17, 2010 at 7:13 pm
Very nice work dude. I am currently using the plugin but I found issues when working with Modal popups. Is there any reason why you didn’t include Wijnand’s fix?
…The position is calculated wrong. Instead of
var pos = $input.position();
use:
var pos = $input.offset();
Around line 62.
Cheers!!
Gustavo
June 23, 2010 at 3:48 am
Hi Butcho,
Can you pleaese provide the improvements you made to deal with Required checkboxes and adding a scrollto() effect. I am looking some thing similar.Thanks
ssk
June 30, 2010 at 9:44 pm
This plugin fails in IE8 with the .NET 4.0 web applications. The reference to “ev” is always undefined.
here: ev = $.event.fix(ev);
The WebUIValidation.js has minor changes, but major enough to break your script.
If you could look at it, you’d be helping out a lot of us. Without knowing exactly what ev is ‘supposed’ to be, i’d be doing a lot of heavy lifting to figure out where that variable is supposed to be doing.
Thanks for your great work!
Paul
July 30, 2010 at 8:25 pm
By the way, to duplicate what I’m talking about:
1. Open your solution in VS2010 (converting it to a 4.0)
2. Browse default.aspx in IE8
3. Fill in anything in the email box (valid or invalid)
4. Tab into the next field
At this point you should either see a popup or a yellow warning in the bottom left corner.
“Error: ‘undefined’ is null or not an object”
Paul
July 30, 2010 at 8:37 pm
I’m assuming at this point that no solution is in the works to the new .NET framework?
Paul
August 3, 2010 at 8:47 pm