title: HTML5 Form validation - error message customization
body: <p>I have a form with an input like this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" name="question" class="form-control" required="" minlength="4" maxlength="2" size="20" oninvalid="setCustomValidity('please enter something')"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now the default validation messages work great. But I want to set custom messages for specific rules.</p>
  
  <p>i.e. for rules like <code>required</code> <code>minlength</code> <code>maxlength</code> when each fails I want to provide a custom error message specific to the rule that failed.</p>
  
  <p>I have tried <code>oninvalid="setCustomValidity('please enter something')"</code> but that sets that message for every rule. </p>
  
  <p>How can I specify custom error messages for specific rules?</p>