简体   繁体   中英

Onsubmit function is firing on Safari, even though the required input is empty

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.

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM