title: Custom HTML5 form validation not showing custom error initially
body: <p>Basic HTML5 form with custom validation. If the submitted value is not a number, the browser should display the error message "Field must be an number." If you enter "abc" and press submit (or hit enter) the field is marked as invalid, but the error message does not appear. Press submit again (or hit enter) and it will show the message. This double-submit behavior appears on latest versions of Firefox, Chrome, Safari, and IE on Windows and OS X. You will notice that the default "this field is required..." message appears upon the first submission and does not exhibit the odd behavior.</p>
  
  <p><a href="http://jsfiddle.net/6gsr3r4b/" rel="noreferrer">http://jsfiddle.net/6gsr3r4b/</a></p>
  
  <p>As an aside, I am well aware that this validation will not work in older versions of IE and that the input field could have a type of <code>number</code> that would automatically complete this validation; this is simplified example of my problem for demonstration purposes only.</p>
  
  <p>Javscript</p>
  
  <pre><code>var form = document.getElementById("form");
  var field = document.getElementById("field");
  
  form.onsubmit = validateForm;
  
  function validateForm() {
  
      if(isNaN(field.value)) {
          field.setCustomValidity("Field must be a number.");
      } else {
          return true;
      }
  
      return false;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;form id="form"&gt;
      &lt;label for="field"&gt;Favorite number&lt;/label&gt;
      &lt;input type="text" id="field" required&gt;
      &lt;input type="submit"&gt;
  &lt;/form&gt;
  </code></pre>