ValidationTextBox: HTML5 pattern attribute causes double tooltip in Firefox

[Paul Christopher]

Description

When specifying a regex for a ValidationTextBox, a pattern attribute gets added to the inputs dom node like so

<input pattern="..." />

However this causes Firefox to display its own error tooltip which interferes with Dojo's error tooltip. One the one hand, two tooltips do not look nice. On the other hand, Firefox's tooltip does not respect the language set via the html lang attribute and dojo.config.locale.

Steps to reproduce the issue

Run the attached test file. Enter an invalid email, e.g. "test". Hit "Validate" and salute Firefox for his marvellous HTML5 capabilities.

Now cross-check: Uncomment the given fix in the test file (which simply removes the pattern attribute from the dom node by domAttr.remove('input', 'pattern')). Again enter "test" and hit "Validate". There will be no second tooltip anymore.

Affected browsers

So far Firefox only since several versions, see ​http://bugs.dojotoolkit.org/ticket/14687

Discussion

Don't know where this pattern attribute comes in, but from a usability point of view, this is a bigger problem for me at the moment: Wrong languages, Dijit's look 'n feel totally broken.

[Paul Christopher]

Thanks for the quick reply and the patch, Doug! It really works great now and the patch saves me a lot of trouble. Many thanks and have a nice weekend!

[Douglas Hays]

In [29512]:

Fixes #15728. Prevent pattern from being set on the native INPUT element

[Paul Christopher]

There is also a "novalidate" tag for forms in HTML5, see ​http://w3schools.com/html5/att_form_novalidate.asp. Setting this on dijit/form should prevent any validation (but I have not yet tested this.)