Click here to Skip to main content
Click here to Skip to main content

HTML5 - Encounter of the Third Kind

, 11 Jan 2014
Rate this:
Please Sign up or sign in to vote.
Tracking a bug in HTML5 that's not a bug in HTML4

I have recently discovered an error in a number of my web site pages in which I perform validation of user input. The bug was caused by IE11 processing HTML5 on a page written in HTML4.

For example, two <input> elements on a page were:

  <input name="sender_name" 
         type="text" 
         style="width: 200px;"
         maxlength="100"
         required="required"
         title="Enter your name (required)" />

  <input name="email" 
         id="email" 
         type="text"
         size="32" 
         style="width: 200px;"
         maxlength="100"
         pattern="^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$" 
         title="Enter your email address (required)" />

Note that both <input> elements contained custom attributes: 'required' in sender_name and 'pattern' in email. The concept was based on code in the book JavaScript: The Definitive Guide, 5th Edition, by David Flanagan, 2006, O'Reilly Media, Inc. These custom attributes worked fine in HTML4. But in HTML5, the <input> element has two new attributes defined: 'required' and 'pattern'. Both perform the same function as my two custom attributes but in an entirely different way. Thus my pages that contained the custom attributes 'required' and 'pattern' broke when an HTML5-aware browser was used.

So what is my fix? Actually the fix is to follow my own advice. In my article Minimalist Coding Guidelines, I espoused:

  • Create identifiers from complete English Words
  • Separate English words with underscores. This form of separation distinguishes programmer defined identifiers from system defined identifiers

I'll add a third rule for custom attributes in HTML elements:

  • Always create the custom attribute name using two or more complete English words

In both the HTML4 and HTML5 lists of attributes, none have an embedded underscore. There may be hyphens but no underscores.

I rewrote the troublesome code as:

    <input name="sender_name" 
           class="element_valid"
           type="text" 
           style="width: 200px;"
           maxlength="100"
           required_pattern="\S"
           title="Enter your name (required)" />

    <input name="email" 
           class="element_valid"
           id="email" 
           type="text"
           size="32" 
           style="width: 200px;"
           maxlength="100"
           required_pattern="^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$" 
           title="Enter your email address (required)" />

Now my web pages work as expected.

In addition to the proposed third rule for custom attributes in HTML elements, I will add that, in the future, I'll follow my own advice.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

gggustafson
Software Developer (Senior)
United States United States
I started programming more than 42 years ago using AutoCoder and RPG (note no suffixing numbers). Programs and data were entered using punched cards. Turnaround between submitting a job for compilation and execution was about 3 hours. So much for the "good old days!" Today, I particularly enjoy programming real-time software. I consider myself capable in WinForms, Mobile Apps, and C# although there are occasions that I yearn to return to C and the Win32 API.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 11 Jan 2014
Article Copyright 2014 by gggustafson
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid