javascript - jQuery Validation - How to display the default callout on errors?

Question

If I create an input control like this:

<input type="number">

And type letters in it, an error will be displayed in a popup-like control. I've seen it referred to as a callout but I'm not sure if that's the right name. It looks like this:

But if I define my own rules in either the jQuery Validation Plugin or in ASP.NET then there's no fancy popup anymore, just a label which is appended. It doesn't look nearly as good and it isn't very consistent with the above either.

Is there a simple way to make my custom error messages show up in the same way?

Answer 1

Your picture shows the default HTML5 validation which is rendered (or not rendered) depending solely on the specific browser version.

The browser must support HTML5 validation in order to see these pop-ups and Chrome's pop-ups will look different than Firefox's, etc. HTML5 validation is configured using HTML5 validation attributes that you'd add inline to each input element like this...

<input type="number" required="required" max="5" ....

---

However, when you employ the jQuery Validate plugin, it dynamically adds the novalidate attribute to the <form> tag...

<form novalidate="novalidate" id="myform" ....

The novalidate attribute is used to disable the HTML5 validation so that jQuery Validate can take over all form validation without interference from HTML5. Yes, the default jQuery Validate labels are bland, but that's the "blank canvas" which allows design flexibility and cross-browser consistency and reliability. See below.

---

If you want error messages that look more like the pop-ups you'd get with HTML5, then you can create your own with CSS/jQuery.

Quote:

"Is there a simple way to make my custom error messages show up in the same way?"

That depends on if you think adding another jQuery plugin is simple. You could integrate a jQuery plugin like qTip2 or ToolTipster into jQuery Validate. These plugins have many options, themes, and CSS that you can customize to no end. It can be tricky though as each plugin gets integrated differently depending on how it works, its manipulation methods, callbacks, etc.

Here's a working demo showing how ToolTipster v3 (default - no theme) was easily integrated into jQuery Validate:

http://jsfiddle.net/2DUX2/3/

Source: How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?