16
<form id="customerForm">
    <label>
        First Name:
        <input id="firstName" required />
    </label>
    <label>
        Social Security Number:
        <input id="ssn" required pattern="^d{3}-d{2}-d{4}$"
            title="Expected pattern is ###-##-####" />
    </label>
    <input type="submit" />
</form>

When I try that document in Chrome, it accepts the conditions and shows the error, as expected.

But when I try that document in Safari, it shows no error.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Amir Bennasr
  • 216
  • 1
  • 2
  • 10

3 Answers3

25

At this time, Safari doesn't support the "required" input attribute. http://caniuse.com/#search=required

To use the 'required' attribute on Safari, You can use 'webshim'

1 - Download webshim

2 - Put this code :

<head>
    <script src="js/jquery.js"></script>

    <script src="js-webshim/minified/polyfiller.js"></script> 

    <script> 
        webshim.activeLang('en');
        webshims.polyfill('forms');
        webshims.cfg.no$Switch = true;
    </script>
</head>
Jérémie Chazelle
  • 1,721
  • 4
  • 32
  • 70
  • 3
    Thanks! I have decided to use it from the CDN instead, you can find a minified version here: https://cdnjs.com/libraries/webshim – Tiago Romero Garcia Dec 14 '15 at 06:41
  • Thanks, I totally forgot about Webshim, which solved the problem instantly. Sadly found two duplicate questions with in principle good answers, but not close to your solution; now flagged them and hopefully lead more people to this post/answer! – Tommy Feb 24 '16 at 11:35
  • I referred to your answer in an answer of myself (and even copied your code example as a 'kickstart' for other people) and I just got asked what the line 'webshims.cfg.no$Switch = true;' exactly does. Could you explain to me please? :) – Tommy Mar 30 '16 at 14:10
  • webshim.activeLang('en'); <- What if we are using another language? – detoro84 May 12 '16 at 11:37
  • 1
    @detoro84 set the language you want to use as described here: http://afarkas.github.io/webshim/demos/demos/forms.html#Locale-Settings – osullic Jan 03 '17 at 16:35
7

Currently, Safari doesn’t yet emit any error messages for required values in form fields that the user has not provided (nor for invalid values the user has put into form fields). But you can enable it by using hacks or a polyfill. See HTML5 Form Validation Fallback (without a library) for a lightweight hack that enables it, and see h5Validate for a jQuery-based polyfill plugin.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
  • 2
    Webshim is a nice library but if all you're aiming to do is solve for the OP, the linked "HTML5 Form Validation Fallback" is perfect at about 20 lines of code. – Will Apr 12 '16 at 22:41
0

The required attribute should be available in Safari 10.1 and newer.

bfulgham
  • 1