3

Required attribute is not working in Safari.

To fix this, I'm using Webshim. It was all working perfectly, until I noticed that when I use onsubmit on the form tag, it fires when you submit, no matter that there are some required inputs empty. You see the "Please fill out this field" on the input, but the onsubmit functions fires anyway.

<form onsubmit="alert('hi')" action="#">
  <input placeholder="native input works" required>
  <input type="submit">
</form>

This is how I initialize Webshim:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.16.0/dev/polyfiller.js"></script>
    <script> 
        webshim.activeLang('en');
        webshims.polyfill('forms');
        webshims.cfg.no$Switch = true;
    </script>

Here you have a working Example. You can try it on Safari, and in Chrome, and you'll see the Alert firing on safari, and not in chrome.

https://jsfiddle.net/3pxsvxxj/

Please, I need to solve this, and I can't find a way.

Cheers.

Juan Manuel Masud
  • 684
  • 1
  • 7
  • 15

1 Answers1

0

As you said, Safari browser does not support the required attribute, as listed here.

If you refer to this question, it has alternatives which provide the functionality.

And since you said you are using webshim, refer to this answer from the question I linked which provides an example of using webshim:

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>
Community
  • 1
  • 1
Mor Paz
  • 2,088
  • 2
  • 20
  • 38
  • Hi Mor, that's why I said that I used Webshim to solve the "required" not working on Safari. But not the problem that I described in the post. – Juan Manuel Masud Feb 16 '17 at 22:57
  • Yes, I already have all that in my code. I added it to the post. Webshim solve my problem of the "Required" inputs, but it does not stop onsubmit function to fire. – Juan Manuel Masud Feb 16 '17 at 23:01