フォームのリアルタイムバリデーションで、入力中に独自ルール（例：ユーザー名の重複チェック結果）をエラーメッセージに反映したい。適切な実装はどれですか？
- 非同期結果に関係なく常にsetCustomValidity(“”)を呼ぶ
- input.setCustomValidity(“…”)で一時的なエラー文を設定し、条件を満たしたら空文字で解除する
- required属性を削除する
- CSSの::afterで装飾的なテキストを表示する
正解
- input.setCustomValidity(“…”)で一時的なエラー文を設定し、条件を満たしたら空文字で解除する
解説
setCustomValidity()はネイティブ検証と統合され、空文字でクリア、非空でエラーとなります。非同期チェック完了時に適宜メッセージを更新し、reportValidity()で表示できます。
使用例（サンプルコード）
[ html ]
<input id="username" required minlength="3">
<script>
const u = document.getElementById('username');
let pending;
u.addEventListener('input', ()=>{
clearTimeout(pending);
u.setCustomValidity(''); // 入力中はいったんクリア
pending = setTimeout(async ()=>{
// 疑似的な重複チェック
const taken = ['admin','root'];
if (taken.includes(u.value.trim())) {
u.setCustomValidity('このユーザー名は使用できません');
} else {
u.setCustomValidity('');
}
u.reportValidity();
}, 400);
});
</script>