TechQA.

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

437 views Asked by At

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.

javascript html required onsubmit webshim
Original Q&A
1

There are 1 answers

2
Mor Paz On

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>

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in REQUIRED

Related Questions in ONSUBMIT

Related Questions in WEBSHIM

Popular Questions

Trending Questions