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.
In 1964, I was in the US Coast Guard when I wrote
my first program. It was written in RPG (note no suffixing numbers). Programs and data were entered using punched cards. Turnaround was about 3 hours. So much for the "good old days!"
In 1970, when assigned to Washington DC, I started my MS in Mechanical Engineering. I specialized in Transportation. Untold hours in statistical theory and practice were required, forcing me to use the university computer and learn the FORTRAN language, still using punched cards!
In 1973, I was employed by the Norfolk VA Police Department as a crime analyst for the
High Intensity Target program. There, I was still using punched cards!
In 1973, I joined Computer Sciences Corporation (CSC). There, for the first time, I was introduced to a terminal with the ability to edit, compile, link, and test my programs on-line. CSC also gave me the opportunity to discuss technical issues with some of the brightest minds I've encountered during my career.
In 1975, I moved to San Diego to head up an IR&D project,
BIODAB. I returned to school (UCSD) and took up Software Engineering at the graduate level. After BIODAB, I headed up a team that fixed a
stalled project. I then headed up one of the two most satisfying projects of my career, the
Automated Flight Operations Center at Ft. Irwin, CA.
I left Anteon Corporation (the successor to CSC on a major contract) and moved to Pensacola, FL. For a small company I built their firewall, given free to the company's customers. An opportunity to build an
air traffic controller trainer arose. This was the other most satisfying project of my career.
Today, I consider myself capable.