HTML5 - Encounter of the Third Kind

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.