Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 594
Amir Bennasr Avatar asked Sep 20 '15 21:09

Amir Bennasr


2 Answers

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>
like image 129
Jérémie Chazelle Avatar answered Nov 01 '22 15:11

Jérémie Chazelle


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.

like image 7
sideshowbarker Avatar answered Nov 01 '22 14:11

sideshowbarker