With older IE (IE8, IE7) you could use modern input types (email, url, number etc) and use a JS poly-fill to implement HTML5 like form validation.
With IE10 compatibility mode, these email / url input types revert back to type="text", causing issues with these poly-fills
HTML:
<input type="email" id="test1" />
<input type="url" id="test2" />
<input type="text" id="test3" />
JS:
// IE7, IE8, IE8 compatibility mode this will be "email"
console.log($("#test1").attr("type"));
//IE10 standards, IE10 compatibility (7,8,9), this will be "text"
console.log($("#test1").attr("type"));
There's similar issues with the required attribute. You can get around that by analyzing the .attributes property (in IE10 Compat mode, two required attributes show up, one a string and one an int), e.g:
function check(el){
var req, type, attr,
attrs = el.attributes;
for (var i = 0, l = attrs.length; i < l; i++) {
attr = attrs.item(i);
if (attr.nodeName === "required" || attr.nodeName === "type") {
console.log("name : " + attr.nodeName);
console.log("value : " + attr.nodeValue);
console.log("type of nodeValue: " + (typeof attr.nodeValue));
}
}
}
But no luck with the type attribute being duplicated and showing the intended value. Is compatibility mode just fubar? Please no suggestions on how to force IE into standards mode. The document mode is controlled via HTTP headers inside our (large) company.