title: HTML5 Validation: Using element.validity.typeMismatch and element.validity.tooLong
body: <p>I have a <a href="https://github.com/vivin/regula" rel="noreferrer">Javascript validation framework</a> that I've created and I'm trying to add HTML5 validation to it. In my framework, validation is accomplished by binding validation-constraints to elements using a <code>data-</code> attributes. This is somewhat similar to how HTML5 validation happens by using attributes like <code>required</code>, <code>min</code>, <code>max</code>, etc.</p>
  
  <p>I have two problems right now. Well, they may not necessarily be problems, but I would like a better understanding of the situation so that I can decide how to move forward.</p>
  
  <p>The first issue I have <code>element.validity.typeMismatch</code>, which is set to <code>true</code> if the value of the element doesn't match the type of the element. For example, if you have an invalid URL value for an element with <code>type="url"</code> or an invalid email for an element with <code>type="email"</code>. However, this behavior is inconsistent for something like <code>type="number"</code>. The reason the behavior is inconsistent is because the browser <em>won't let you add invalid values</em> to an <code>input</code> with <code>type="number"</code> (through the UI or even through the DOM). Due to this, <code>element.validity.typeMismatch</code> is never set to <code>true</code> and <code>element.checkValidity()</code> always returns <code>true</code>. This behavior is inconsistent with the behavior on <code>type="url"</code> and <code>type="email"</code> where you <em>can</em> enter invalid values, and <code>element.validity.typeMismatch</code> and <code>element.checkValidity()</code> return the expected values.</p>
  
  <p>I have a similar issue with using <code>maxlength</code>. There is a <code>ValidityState</code> property called <code>tooLong</code> at <code>element.validity.tooLong</code>. It appears that this value is <em>never</em> set to <code>true</code> when interacting with an <code>input</code> directly from the browser, because you can never enter a value that is longer than the value of* <code>maxlength</code>. Furthermore, even though you can set a value <em>that is longer than</em> <code>maxlength</code> <em>from the DOM</em>, <code>element.validity.tooLong</code> again, is never set to <code>true</code>. So I'm wondering why this property is even there if it is more-or-less useless.</p>
  
  <p>Currently, how is HTML5 validation expected to behave with these constraints? How can an error message ever be generated for these constraint violations if the browser won't let you enter invalid values?</p>