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);

当サイトの自治会、町内会に関する内容の掲載は「お問い合わせ」ページの専用フォームよりお気軽にお寄せ下さい。

※自治会、町内会の情報掲載は全て無料で提供しております。

お問い合わせ