Larry Steinle

A month ago I discovered an odd behavior while regression testing a web application. When I typed the exact value that is in the title attribute of an input tag the field became required disabling form submission until the value was changed. The new behavior had me stumped until I realized it only happens in Internet Explorer 10 and greater.

Placeholder Attribute

The new HTML5 placeholder attribute displays an opacque hint text in an input or textarea box. The value put in the placeholder attribute automatically displays in an input text box in greyed out text providing a nice indicator of what value is expected in the field. Once the user begins typing the placeholder hint is removed.

Before browsers supported the placeholder attribute I used JavaScript sprinkled with jQuery to put the title value in the input box with greyed out text. Once a user set focus to the input box I would clear out the title and set the color back to default. When the user would leave the text box and it was empty the title would be restored and greyed out. If the text box had a value I left it alone.

Required Attribute

The HTML5 required attribute applied to an input or textarea control disables post-back until the field has a value. If the value in the input or textarea matches the value in the placeholder attribute the tag is marked unanswered.

The Problem With IE

As I explained earlier I had written JavaScript to imitate the placeholder attribute before it became an HTML5 specification. Suddenly my legacy JavaScript placeholder logic was causing problems in Internet Explorer. If I didn’t change the value the field was highlighted and form submission cancelled. I tested the web site in Chrome, Mozilla, Safari and Opera without issue. It finally dawned on me that IE was automatically enabling the new HTML5 required attribute when the input tag value matched the title value.

Finding this to be an interesting behavior I wondered what would happen if I used the placeholder attribute. I replaced the title attribute with a placeholder attribute. I typed into the input tag the exact value that was in the placeholder attribute value. Sure enough IE highlighted the field as required stopping form submission.

I am very surprised to see this behavior in IE. The IE behavior violates basic interface design guidelines. The value in the control should not cause the field to be required unless the required attribute is enabled.

The Workaround

There were only two options available to resolve the issue. First I could add the novalidate attribute to the form tag. This would cause the required attribute to be ignored. When my value matches the title, form submission would still be permitted. But the novalidate option is a poor choice as other controls may need to support the required attribute that I manually defined.

The Solution

The other option was to replace the title attribute with the placeholder attribute in all of my pages updating my custom JavaScript to use placeholder instead of title. When my custom JavaScript placeholder module loads I check to see if the browser supports the placeholder attribute. If the browser supports the placeholder attribute I exit the module ignoring the custom placeholder fallback JavaScript. If the browser doesn’t support the placeholder then I use the custom placeholder fallback JavaScript.

$(function () {
  if (!("placeholder" in document.createElement("input"))) {
    function addHint(c) {
      var $c = $(c);
      if ($.trim($c.val()).length == 0 || $c.val() == $c.attr("placeholder")) {
        $c.css("color", "gray");
        $c.val($c.attr("placeholder"));
      } else
        $c.css("color", "");
    }

    function removeHint(c) {
      var $c = $(c);
      if ($c.val() == $c.attr("placeholder")) {
        $c.val("");
        $c.css("color", "");
      }
    }

    $("input[type='text'][placeholder]:not(:focus), textarea[placeholder]:not(:focus)").each(function (i, c) { addHint(c); });
    $("body").on("focus", "input[type='text'][placeholder], textarea[placeholder]", function (e) { removeHint(this); });
    $("body").on("blur", "input[type='text'][placeholder], textarea[placeholder]", function (e) { addHint(this); });
  }
});

Summary

I’m sure that Microsoft had the best of intentions to provide backwards compatibility for the required attribute. Unfortunately they only muddied the water making it difficult to know when a value is meant for placeholder behavior, required behavior or both. Hopefully in future versions of Internet Explorer, Microsoft will enforce the placeholder and required attribute logic only when it is manually specified in the markup. Then we won’t have to worry about any unintended side-effects from a value in an input text box. Unfortunately the damage is already done and for at least two versions of IE web programmers will have to contend with the automatic required attribute “misbehavior.”

Happy coding!