Unreadable text using setCustomValidity on passwor

Question

If I set an error message using setCustomValidity on an html5 form password field, it pops up as bubbles or stars, just like the password field itself, resulting in an unreadable message.

Here's a jsfiddle for demonstrate what I mean: http://jsfiddle.net/LcfuQ/1/

This works in Firefox 4, but I get this strange behavior using Google Chrome. Anyone know of a workaround, or some way to fix this?

EDIT: This has been fixed in version 12+

Answer 1

It's a WebKit bug with the -webkit-text-security CSS property, which can't be overridden. It's likely already been reported on the WebKit Bugzilla, but if it isn't you might want to report it.

Answer 2

Seems like this is a problem with Chrome

When the input type="password", asterisks are shown in the place of characters even for HTML5.

See this fiddle in Chrome http://jsfiddle.net/idiotsden/RdwMw/ . It works in ff4.

The workaround is to use jquery tools. You can see the working tutorial here

http://flowplayer.org/tools/demos/validator/custom-validators.html