title: jQuery custom html5 error messages
body: <p>I'm using HTML5 to validate a form and change the error message text using
  setCustomValidity. Except for some reason I just can't get this to work. I'm getting no error messages in the console or anything. I'm trying to take what is in the "data-error" attribute and use that as the custom error message but can't figure this out I've spent hours on this.</p>
  
  <p>JQUERY</p>
  
  <pre><code>$aboutUs.find("#headerForm :input").each(function(){ 
    var $this = $(this); 
    var errorMessage = $this.attr("data-error");
     for (var i = 0; i &lt; $this.length; i++) {
       $this[i].oninvalid = function(e) {
       e.target.setCustomValidity("test");
       if (!e.target.validity.valid) {
       e.target.setCustomValidity(e.target.getAttribute(errorMessage));
       }
       };
      }                        
     });
  </code></pre>
  
  <p>HTML FORM</p>
  
  <pre><code>&lt;input id="firstName" type="text" required data-error="First Name Message" /&gt;
  &lt;input id="lastName" type="text" required data-error="Last Name Message" /&gt;
  &lt;input id="phone" type="text" required data-error="Phone Message" /&gt;
  </code></pre>