IE 10 form validation bug - drivig me NUTS!

JavaScript
1

I have a form that IE 10 seems to being having fits with and for the life of me I can’t find anything related to it anywhere on the web.

It has to do with a form field for a phone number … my validation for phone numbers looks like this (this is part of a larger function that loops through all the form elements):

if (strpos($(this).attr('id'), 'phone') !== false && (jQuery.trim($(this).val()).length != 0 && jQuery.trim($(this).val()).length < 10))	{
  errors = true;
  $(this).prev().text('Please enter area code and phone number').css({ 'color' : 'red', 'font-weight' : 'bold' });
  $(this).css('background-color', '#fbf9c4');
  }

Now this particular form IE throws a red border around the phone input even when the correct data is in it (note though that my ‘error messages’ are not showing, which means it passed the above block of code) and some form of bubble shows up (not from my code) that says ‘You must enter text with 10 characters or fewer characters’

Here’s is the source code for the element in question:

<p><label for='phone' class='label'>Phone Number *</label><input type='text' name='phone' id='phone' maxlength='12' size='50' value="" class='required next' title='Phone Number *' />

Here’s a visual:

I don’t have IE 10 on anything at this point, if someone wants to try it for themselves you can PM me as the site is locked down with a username and password while we are developing it.

2

Hi there,

Nothing in the code you posted above would indicate why IE would be throwing an error like that, therefore it seems likely that the cause lies elsewhere.
If you PM me a link / access details then I don’t mind having a look at it for you.

3

Hi,

Your problem is quite simple.
It’s being caused by IE’s interpretation of the maxlength attribute.

You specify a maxlength of 12 characters in your input tag, yet you add characters to the user’s input using JS, so that 9549786313 (ten chars) becomes (954) 978-6313 (thirteen chars).
This causes IE to choke.

Here is a boiled down example for you:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Max length</title>
  </head>

  <body>
    <form>
      <p>
        <label for='phone'>Phone Number *</label>
        <input id='phone' type='text' maxlength='12' />
      </p>
      <input type="submit" />
    </form>

    <script>
      var phone = document.getElementById("phone");
      phone.onblur = function(){
        this.value = "1234567890123"
      }
    </script>
  </body>
</html>

Run this in IE 10, click into the “phone” field, enter some text if you want, then click anywhere else on the page.
When the field loses focus, an event handler will change its value to a string 13 characters in length.
If you then submit the form, you should see the same error message as has been plaguing you.

4

Oh vey! How I hate that browser … but thank you very much for looking and finding it!