title: HTML5 validity check always returns true in IE
body: <p>I am attempting to use the HTML5 validity check to determine whether the field contents are indeed valid.  I have a textbox field that I have set to type "number".  Reason for setting to "number" is to display the numeric keyboard on touch devices when the field gets focus.</p>
  
  <p>However, I am finding that in Internet Explorer (both IE10 and IE11) the validity check always returns true regardless of whether I have a number or a letter in the field.</p>
  
  <p>Basically what I wish to achieve is to be able to use the validity check to then call my own custom validation (we have a custom error bubble that needs to appear, cannot just use the browser out of the box error bubble).</p>
  
  <p>Here is a JSFiddle example.  </p>
  
  <p><a href="http://jsfiddle.net/1samnzoo/16/" rel="nofollow">http://jsfiddle.net/1samnzoo/16/</a></p>
  
  <pre><code>&lt;h1&gt;HTML5 Form Validation Tester&lt;/h1&gt;
  
  &lt;form&gt;
      &lt;input type="number" id="numberField" /&gt;  
      &lt;br /&gt;
      &lt;h3&gt;Result:&lt;/h3&gt;
      &lt;div id="result"&gt;&lt;/div&gt;
  &lt;/form&gt;
  
  var numberField = document.getElementById("numberField");
  var r = document.getElementById("result");
  
  numberField.addEventListener("input", function() {
      var value = numberField.value;
  
      r.innerHTML =     
          "&lt;br /&gt;value=" + value + ", " + 
          "&lt;br /&gt;checkValidity()=" + numberField.checkValidity() + ", " + 
          "&lt;br /&gt;validity.valid=" + numberField.validity.valid;
  });
  </code></pre>
  
  <p>The behavior in each browser is as follows:</p>
  
  <p><strong><em>Chrome:</em></strong> </p>
  
  <ol>
  <li>Enter a number '1'</li>
  <li>Number placed into the textbox.</li>
  <li>Getting the "value" in Javascript returns "1"</li>
  <li>Validity check returns true</li>
  <li>Enter invalid character 'a'.</li>
  <li>Character is placed into the textbox, now shows '1a'.</li>
  <li>Getting the "value" in Javascript returns "".</li>
  <li>Validity check returns false</li>
  <li>Tab away from the field, contents remain in the textbox.</li>
  </ol>
  
  <p><br />
  <strong>Firefox:</strong>
  Same as Chrome
  <br /><br /></p>
  
  <p><strong><em>IE:</em></strong>
  <br />
  Now IE has some very different behavior.
  <br /><br />
  <strong>Example 1</strong></p>
  
  <ol>
  <li>Enter a number '1'</li>
  <li>Number placed into the textbox.</li>
  <li>Getting the "value" in Javascript returns "1"</li>
  <li>Validity check returns true</li>
  <li>Enter invalid character 'a'.</li>
  <li>Character is placed into the textbox, now shows '1a'.</li>
  <li>Getting the "value" in Javascript returns "1a".</li>
  <li>Validity check returns true</li>
  <li>Tab away from the field, contents remain in the textbox.</li>
  </ol>
  
  <p><strong>Example 2</strong></p>
  
  <ol>
  <li>Enter invalid character 'a'.</li>
  <li>Character is placed into the textbox</li>
  <li>Getting the "value" in Javascript returns "".</li>
  <li>Validity check returns true</li>
  <li>Enter a number '1'</li>
  <li>Number placed into the textbox, now shows 'a1'.</li>
  <li>Getting the "value" in Javascript returns ""</li>
  <li>Validity check returns true</li>
  <li>Tab away from the field, contents cleared from the textbox.</li>
  </ol>
  
  <p><br />
  As you should be able to see in the jsfiddle sample in each browser, the behaviour is not at all consist in IE.  Does anyone know why IE would always return true on the validity call?  </p>
  
  <p>Alternatively, is there any other way to invoke the numeric keyboard on a touch device that will work across browsers and devices.</p>
  
  <p>Please note, we are unable to use the JQuery library.</p>