HTML5 input validation does not work in IE8

Hi, kind people on the Internet, I cracked it a bit ... and saw a few similar messages, but I can't figure it out:

HTML5 CSS input field validation works in Firefox, Chrome ... but, alas, not in IE8 ... and most of my target audience will use IE8.

... and yes: I use Modernizr, and I used Initializr to get the page template and CSS ... I'm a little confused why I can't work fine in IE8.

Here is a link to my test page: Check html5 page

The input field is red before the correct entry, then the check simply turns green when a valid account number is entered, such as: 50011111111

HTML5 code is as follows:

<label for="account">Account Number: </label> <input id="account" name="inputAccount" placeholder="input billing account number" pattern="/(^500)|^\d{11}" required autofocus type="text"/> 

Any suggestions regarding what is probably a pretty simple thing to fix will be appreciated!

+6
source share
4 answers

IE simply ignores HTML5 elements because it does not know about them. From Modernizr Documents

Modernizr runs a short loop in JavaScript to allow various HTML5 elements (as well as abbr) to be styled in Internet Explorer. Please note that this does not mean that it suddenly makes support for IE audio or video, it just means that you can use a section instead of a div and style them in CSS.

This suggests that Modernizr will tell IE about the new tags in HTML5 so you can use CSS on them, but don't try to get them to do anything. Also note that Modernizr does not add default styles for elements, so they recommend using HTML5 CSS reset, which makes the <section> display: block; tags display: block; , eg.

Regarding your form, the topek check was correct, explaining that Modernizr only detects browser capabilities, but actually does nothing. Modernizr’s progress is that you use the built-in yepnope testing function to check if the user’s browser can “x” (in this case, check the form) and then conditionally and asynchronously load the script or style into “polyfill” (a polite way to say “ use javascript to simulate your own behavior ").

In your case, you'll want to use Modernizr.load() to test Modernizr.input.required and, possibly, Modernizr.input.autofocus , for example:

  //the modernizr conditional load function Modernizr.load({ //specify the tests, refer to the Modernizr docs for object names test: Modernizr.input.required && Modernizr.input.placeholder, //specify what to do if the browser fails the test, can be a function nope: 'path/to/polyfill/script', //sometimes you need to run some JS to init that script complete: function(){ polyfillinitorwhatever(); } }); 

And here you are, the pretty stripped down Modernizr.load. As long as I find their documents wandering around, they are actually very good. Every time I had a problem and tweeted in Paul Irish, he sent a link to the documents, where I really found my answer upon closer examination.

Validation is one of the most complex HTML5 features for browser developers as a standard. Although I really like simplicity, I continue to use jQuery.validate in all cases, except when the user has Chrome or Opera. The native FF validator remains weak. I would recommend you stick with jQuery.

+13
source

I recently found a new jquery.h5form plugin.

Using this, form validation, as in Opera, will be enabled in all browsers, even in IE8.

+3
source

I think you are still missing, this is an html5 polyfill for field validation. You can use, for example: http://ericleads.com/h5validate/

More polyfillings can be found at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

+1
source

IE8 does not support all HTML5 elements, if any. You need to have an html5 addon to work. One addon upgrade

List of browsers with their assessment / compatibility in HTML5

+1
source

Source: https://habr.com/ru/post/900469/


All Articles