CODEWITHSUNDEEP
htmlgoogle-chromesafarirequired
Amir Bennasr
Amir Bennasr

Reputation: 216

Safari is not acknowledging the "required" attribute. How to fix it?

<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.

Upvotes: 16

Views: 25306

Answers (3)

bfulgham
bfulgham

Reputation: 1

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

Upvotes: 0

J&#233;r&#233;mie Chazelle
J&#233;r&#233;mie Chazelle

Reputation: 1818

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>

Upvotes: 25

sideshowbarker
sideshowbarker

Reputation: 88046

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.

Upvotes: 7

Related Questions