title: How to change default "please fill out this field" in two field
body: <p>I would like two different messages in two field, for example, the username and password field that contain messages like "username cannot be blank" and "password cannot be blank". I only managed to change the message, but it is then the same for both fields. It's <a href="http://jsfiddle.net/Godfather/5fp4Y/4/" rel="noreferrer">here</a> </p>
  
  <pre><code>$(document).ready(function() {
  var elements = document.getElementsByTagName("INPUT");
  for (var i = 0; i &lt; elements.length; i++) {
      elements[i].oninvalid = function(e) {
          e.target.setCustomValidity("");
          if (!e.target.validity.valid) {
              e.target.setCustomValidity("Username cannot be blank");
          }
      };
      elements[i].oninput = function(e) {
          e.target.setCustomValidity("");
      };
  } })
  </code></pre>