JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    1. <input type='text'><br>
    2. <input type='text' value="hia" maxlength=2><br>
    3. <input type='text' required disabled><br>
    4. <input type='text' value="" pattern="\d*"><br>
    5. <input type='text' value="" pattern="\d*" required><br>
    6. <input type='text' value="" pattern="\d+"><br>
    7. <input type='text' value="" pattern="\d+" required><br>
    8. <input type='text' value="test" pattern="\d+" required disabled><br>
    <button>check field validity</button>
</form>

JavaScript

(function() {
    document.querySelector('form').addEventListener('submit', function(event) {
      event.preventDefault();
    });
})();