JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <label for="mail">e-mail</label>
  <input type="email" id="mail" name="mail" required min="10" max="20">
  <button>Submit</button>
</form>

JavaScript

var email = document.getElementById("mail");

  if (email.validity.valueMissing) {
    email.setCustomValidity("Don't be shy !");
  }

email.addEventListener("input", function (event) {

  if (email.validity.valueMissing) {
    email.setCustomValidity("Don't be shy !");
  }  

if (email.validity.typeMismatch) {
    email.setCustomValidity("Doesn't look like an e-mail ^^");
  }

if (email.validity.tooLong) {
    email.setCustomValidity("Too loooooooong e-mail address :(");
  }
});