Unreadable text using setCustomValidity in password field in chrome

Question

If I set the error message using setCustomValidity in the password field of the html5 form, it pops up like bubbles or stars, just like the password field, which results in an unreadable message.

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

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

EDIT: This has been fixed in version 12+

Answer 1

This seems to be a problem with Chrome

When input type = "password", asterisks are displayed instead of characters even for HTML5.

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

The workaround is to use jquery tools. Here you can see the workbook.

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

Answer 2

This is a WebKit error with the CSS -webkit-text-security property that cannot be overridden. This has probably already been reported in WebKit Bugzilla , but if it is not, you can report it.