Safari HTML validation doesn't display input title when used with a pattern attribute

1.1k views Asked by At

I'm using HTML form validation to check the user's input for various fields, like this simple ZIP code field:

<input id="zip" type="text" pattern="[0-9]{5}" title="e.g., 12345" required />

In basically all supporting browsers - Chrome, Firefox, Opera, Edge, even IE11 - if the user's input doesn't match the pattern, the text of the title attribute is displayed as a hint. In Chrome, for example, the following message is displayed:

Please match the requested format: e.g., 12345

But Safari merely says:

Match the requested format

...while ignoring the title attribute, so it doesn't actually say what the requested format is.

Is there any way to get Safari to display the title attribute, or some alternative way I can have it display a hint indicating what the requested format is?

1

There are 1 answers

0
HopeThisHelps On

Not exactly a fix but a work-around for this issue I found was by using the oninvalid attribute, thanks to this reply I found https://stackoverflow.com/a/12364405

I also realised that Safari does show the title tooltip but only if you hover over the input field rather than displaying it with the validation message. Hope this answer helps.