JSFiddle - React, Tailwind, and code Playground

by mizobata

HTML

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<form>
<label for="text1">テキスト</label><input id="text1" type="text">
<label for="tel1">TEL</label><input id="tel1" type="tel">
<label for="text2">テキスト</label><input id="text2"type="text">
<label for="pattern1">パターン</label><input id="pattern1 "type="text" pattern="[a-z]">
</form>

CSS

input {
  display: block;
}

body {
  background-color: #fff;
}

JavaScript

$('input').on('keydown', e => {
	$(e.target)[0].reportValidity();
});