Unreadable Text Using Setcustomvalidity On Password Field In Chrome

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 m

Solution 1:

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

Solution 2:

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.