search

tkrotoff / react-form-with-constraints

Simple form validation for React
MIT License
126 stars 20 forks source link

validateForm() IE11 #24

Closed ryanhyslop closed 6 years ago

ryanhyslop commented 6 years ago

Just wanted to use this issue to either report a bug or clarify browser support / necessary polyfills.

In testing our relatively simple form I've noticed that IE11 seems to skip through the validation (without throwing any error).

It seems the form.validateForm() method is returning an empty array, I'm still looking into getting some more information so will report back here with what I find. In the meantime here is a simplified forked version (with a Promise polyfill added) of the example on Codepen that recreates the issue.

https://codepen.io/ryanhyslop/pen/BxJQrR

And a couple of screenshots that show the same form being submitted with the same values:

IE11: ie11 example

Chrome: chrome example

tkrotoff commented 6 years ago

It's because IE11 does not support Array.findIndex() (open IE11 console to see the error) You need a polyfill for that. I use core-js, see also https://babeljs.io/docs/usage/polyfill/

I've updated the "basic example" codepen by adding "https://unpkg.com/core-js@2.5.6/client/core.js": https://codepen.io/tkrotoff/pen/BRGdqL

Your example works also by replacing "https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js" with "https://unpkg.com/core-js@2.5.6/client/core.js"

ryanhyslop commented 6 years ago

Great thanks for the clarification, annoyingly I'm not spotting any errors in the console for IE11 🤔

Including core-js/shim fixed all my issues.

It may be good to update the Readme to point this out as there are quite a few array methods (some, every, findIndex) that are used, but the Readme (to me) reads that if you want to support below IE11 that you'll need the polyfills.

I'll submit a PR and see what you think!

(thanks for being so responsive btw!)