1
<form>
<input type="email" required>
<input type="submit" value="Submit">
</form>

On an HTML5 browser if you hit submit without filling anything in you get a "Please fill out this field" notice. If you enter in text but it's not a valid email you'll get a "Please include an '@' in the email address. 'whatever' is missing an '@'".

It was my understanding that modernizr was supposed to make these HTML5 features work on non-HTML5 browsers through the use of javascript. ie.

<script src="modernizr.js"></script>
<form>
<input type="email" required>
<input type="submit" value="Submit">
</form>

Unfortunately, it is not working. Do I just need rewrite the code not to use this HTML5 approach (and instead use another) or is there some javascript library that'll magically emulate this feature on non HTML5 browsers?

Thanks!

neubert
  • 15,947
  • 24
  • 120
  • 212
  • 2
    You understanding of what Modernizer does is wrong – it is used for _feature detection_, but it does not add missing features. What you want, is called a “polyfill”. – CBroe Aug 08 '14 at 16:56

1 Answers1

3

Modernizr

Modernizr doesn't add any features to your browser (well except for the html5shiv which adds support for unrecognized tags in old IE, that is a huge feature in itself).

Modernizr is for feature-detection. It can tell you that your browser does or does not support something like email type attribute.

Polyfills

What you need is a polyfill like Webshim. It has the ability to substitute some missing browser features, with a javascript driven solution. Like form validation.

A common feature of polyfills is that they don't replace the existing features in your browser. They only activate when the browser lacks the feature. There are exceptions to this though.

There is a HUGE number of polyfills available for most features. For forms alone there are plenty. Most of them do what you want.

Webshim

I have picked Webshim because I have heard of the author.

It has quite a few configuration options but these 2 steps should be enough:

  1. Include the javascript anywhere on your page. You also need to include jQuery before, as Webshim depends on it:

    <script src="js/jquery.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>

  2. Initiate the polyfill.

    <script>
  webshim.polyfill('forms');
</script>

Don't hesitate to ask if you have any more questions on getting this working.

vinczemarton
  • 7,756
  • 6
  • 54
  • 86
  • All of the shims work great in IE9. Just not at all in http://stackoverflow.com/a/1066028/569976 . My code: http://pastebin.com/d1WFPBqQ . Meh. – neubert Aug 08 '14 at 21:20
  • Meh indeed. I'll try to kick some life into it, or find one that works in old IE. You could also use jQuery validate which is not exactly a polyfill but does what you want. I'll try to whip up IE compatible solutions for you later this day. – vinczemarton Aug 09 '14 at 12:32