JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<form id="myForm">
  <label>Type '1':
    <input id="noFun" type="text" required pattern="[1]" title="Only '1' allowed">
    <!--<input id="color" type="color" required pattern="#[a-f0-9]{6}">-->
    <input type="submit">
  </label>
</form>

JavaScript

/*function checkValid(input) {
//for not supported pattern
  if (input.value == "fun") {
    input.setCustomValidity("You're having too much fun!");
  }
}*/
$("#myForm").on("submit", function() {
  return false;
});
/*$("#noFun").on("input", function() {
  checkValid(this);
});*/
//color:  pattern="#[a-f0-9]{6}"
//For: text, date, search, url, tel, email, and password (using pattern)
/*$("#noFun")[0].oninvalid = function () {
  this.setCustomValidity("Please enter '1'");
  this.setCustomValidity("");
};*/