Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 input validation doesn't work in IE8

Hello kind people of the internet, I've been hacking at this for a while...and have seen several similar postings, but I can't seem to figure this out:

The HTML5 input field validation CSS works in Firefox, Chrome...but alas, not in IE8...and much of my target audience will be using IE8.

...and yes: I'm using Modernizr, and I used Initializr to get the page template and CSS...I'm a bit confused why I can't get things working properly in IE8.

Here's a link to my test page: Test html5 page

The input field is red before proper entry, then validation simply turns green when input a valid account number, such as: 50011111111

The 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 on what is probably a fairly simple thing to fix would be mucho appreciated!

like image 940
woody Avatar asked Oct 31 '11 21:10

woody


People also ask

How do you validate data in HTML5?

On the client side, validation can be done in two ways: HTML5 provides a bunch of attributes to help validate data. Here are some common validation cases: When the input value matches the above HTML5 validation, it gets assigned a psuedo-class :valid, and :invalid if it doesn't. Here we have two required fields - First Name and Last Name.

What is the validation of form input?

Validation of form input is something that should be taken seriously. With luck, nothing worse than garbage data will be submitted to a site which uses data from forms without proper validation. However, there's also a chance that hackers will be able to compromise the private data of users who trusted you with their information.

Does HTML5 validation work with red/green symbols?

It works here with your red/green symbols though. Any suggestions? Safari doesn't display any HTML5 validation messages, but it may prevent the form from submitting if any "required" fields are left blank. The messages will appear in Firefox and Opera.

Does Safari display HTML5 validation messages?

Any suggestions? Safari doesn't display any HTML5 validation messages, but it may prevent the form from submitting if any "required" fields are left blank. The messages will appear in Firefox and Opera.


1 Answers

IE just ignors HTML5 elements because it dosen't know about them. From the Modernizr docs

Modernizr runs through a little loop in JavaScript to enable the various elements from HTML5 (as well as abbr) for styling in Internet Explorer. Note that this does not mean it suddenly makes IE support the Audio or Video element, it just means that you can use section instead of div and style them in CSS.

What this says is that Modernizr will tell IE about the new tags in HTML5 so that you can use CSS on them, but dosen't actually make them do anything. Note too that Modernizr dosen't add default styles for the elements, so they recommend you use an HTML5 CSS reset that makes <section> tags display: block; for example.

With respect to your form validation topek was correct in explaining that Modernizr only detects browser capability, it dosen't actually do anything about it. The proccess behind Modernizr is that you use the built-in yepnope testing feature to see if the user's browser can do 'x' (in this case form validation) and then conditionally and asynchronously load a script or style to "polyfill" (a polite way of saying 'use javascript to mimic native behaviour) for it.

In your case, you will want to use Modernizr.load() to test for Modernizr.input.required and probably Modernizr.input.autofocus too, like this:

 //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 there you go, a pretty stripped-down Modernizr.load. While I find their docs meandering, they actually are very good. Every time I've had a problem and tweeted at Paul Irish, he's sent back a link to the docs where I actually did find my answer upon closer inspection.

Validation is one of the most complex HTML5 features for the browser makers to implement as a standard. While I really like it's simplicity, I've been continuing to use jQuery.validate in all cases except if the user has Chrome or Opera - the FF native validate is weak still. I'd recommend you stick with jQuery for now.

like image 120
Evan Avatar answered Oct 04 '22 01:10

Evan