IE10 validation error with maxlength and placeholder in text box

Question

I have a text box for Age:

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

When you click the submit button, this input instantly borders on red. No postback. I assume IE10 believes that the client actually typed "Age (optional)", which is greater than maxlength of 2.

Is it possible to get around this without the user doing anything in the browser settings and removing the maxlength attribute?

Answer 1

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

Internet Explorer 10 and the Windows Store apps using JavaScript add new support for HTML5 forms, including new states for the type attribute (on the input element), new attributes for the input element, and progress element. This support allows developers to quickly and easily provide the user with a request, input confirmation 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 had the same problem.

In this case, you should change the maximum length to 10 so that it does not give out the maximum length and does not set the maximum length that you want for your text field using javascript, as shown below.

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

and call this function as follows

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

This will solve your problem.

Answer 3

I had the same problem, in my case it was a GUID field that was hidden since I did not need to display it on the screen. So I had a display: none and maxlength = 0. However, IE was validating, postback was failing, and I had no idea why. It took me half a day to figure this out, the solution was to set maxlength = 36.