How do I use a custom Tooltip Text for Invalid Input Pattern instead of "You must use this format: [blank]"

Question

When the input does not match the pattern specified by the pattern attribute, Firefox simply says, "Please match the requested format", which is okay; however, when this validation fails Internet Explorer 10 displays "You must use this format:" in a tooltip with nothing else. This may be simple, but searching has not yielded me a clue as to how to supply text to the tooltip telling it the pattern that should be used.

Example below for a one to four digit number:

<input id="institution_threshold_days" type="text" placeholder="0-9999" pattern="^[0-9]{1,4}$" />

Solution

Try using the title attribute to describe what you want it to say:

<input id="institution_threshold_days" type="text" placeholder="0-9999" pattern="^[0-9]{1,4}$" title="Please enter a number less than 10000." />

Should work for all major browsers...

From Microsoft

the content of the title attribute is both shown as tooltip text for the field and appended to the generic pattern mismatch error message.

From Mozilla

Use the title attribute to describe the pattern to help the user.

And although I cannot find official documentation, it appears to work in Chrome as well.

Comments

[Chris]

This will display the message in Chrome and Firefox as well. It wasn't specifically mentioned, so I thought I would.

[JonSnow]

I cannot hide this tooltip message at all, can I? 'Cause when I write <input type="text" placeholder="0-9999" pattern="^[0-9]{1,4}$" title=" " /> it stills brings "You must use this format:" in the tooltip for this field. How can I avoid this?

[Smern]

@SchweizerSchoggi, I think you just want to remove the pattern attribute as this tooltip message is basically the entire point of the pattern message. It would be awkward for a user to try submitting the form, not being able to, and not knowing why they aren't able to. If you want to use something custom in place of the tooltip, you should use javascript.