formの入力検証スタイル

HTML

<h2>ユーザー登録</h2>
<form id=”fm”>
<div>
<label for=”name”>氏名：</label><br />
<input id=”name” type=”text” name=”name”
minlength=”2″ maxlength=”10″ required />
</div>
<div>
<label for=”age”>年齢：</label><br />
<input id=”age” type=”number” name=”age” min=”20″ max=”60″ />
</div>
<div>
<label for=”zip”>郵便番号：</label><br />
<input id=”zip” type=”text” name=”zip” pattern=”\d{3}-\d{4}” />
</div>
<div>
<label for=”mail”>メールアドレス：</label><br />
<input id=”mail” type=”email” name=”mail” />
</div>
<div>
<label for=”url”>URL：</label><br />
<input id=”url” type=”url” name=”url” />
</div>
<input id=”send” type=”submit” value=”送信” />
</form>
<script src=”scripts/form2.js”></script>

 

JS

document.addEventListener(‘DOMContentLoaded’, function () {
let fm = document.getElementById(‘fm’);
let zip = document.getElementById(‘zip’);

fm.addEventListener(‘input’, function (e) {
if (zip.validity.patternMismatch) {
zip.setCustomValidity(‘郵便番号の形式が間違っています。’);
} else {
zip.setCustomValidity(”);
}
}, false);
}, false);