HTML form custom validation message

customValidationMessage.js

$("input").on("invalid", function(e) {
	if (this.validity.valueMissing){
  	this.setCustomValidity("valueMissing");
  }
  if (this.validity.tooShort){
  	this.setCustomValidity("tooShort");
  }
  // .... more custom message here.
});
$("input").on("input", function(e) {
  this.setCustomValidity("");
});

index.html

<form id="form">
<input name="username" type="text" placeholder="Username" required minlength="6">
<input name="password" type="password" placeholder="Password" required>
<br/>Remember me:
<input type="checkbox" name="remember" value="true" >
<br/>
<input type="submit" name="submit" value="Log In">