IE10 Validation bug with maxlength and placeholder

Question

I have a textbox for Age:

<input type="text" id="txtAge" name="txtAge" class="text" placeholder="Age (optional)" maxlength="2">

Upon clicking submit, this input is instantly bordered red. There is no postback. I'm assuming IE10 believes the client has actually typed in "Age (optional)" which is greater than the maxlength of 2.

Is there anyway to get around this without making the user do anything in their browser's settings and without removing the maxlength attribute?

Answer 1

You can use the novalidate and formnovalidate attributes. See this link for more information.

Internet Explorer 10 and Windows Store apps using JavaScript add new support for HTML5 Forms, including new states of the type attribute (on the input element), new attributes for the input element, and the progress element. This support enables developers to quickly and easily provide user prompting, input validation, and feedback with a minimal amount of script.

Source: http://msdn.microsoft.com/en-us/library/ie/hh673544(v=vs.85).aspx

Answer 2

I faced same problem.

In this case you should change your max length to 10 so it will not be issue for max length and set the max length that you want for your textbox using javascript like following.

function setMaxLength(obj, len) {
return (obj.value.length < len);
}

and call this function like following

<input type="text" id="txtAge" name="txtAge" class="text" placeholder="Age (optional)" maxlength="10" onkeypress="return setMaxLength(this,2);">

This will resolve your issue.

Answer 3

I had the same issue, in my case it was a GUID field, which was hidden as I didn't need to have it displayed on screen. So I had display:none and maxlength=0. Yet, IE was performing the validation, the postback was failing and I had no idea why. It took me half day to figure it out, the solution was to set maxlength=36.