Constraint validation API

概要

制約バリデーション API は required、pattern、min/max 等の属性と checkValidity()、reportValidity() メソッドでフォームの入力検証を行います。

対応ブラウザ

基本構文

<form>
  <input type="email" required id="email">
  <button type="submit">送信</button>
</form>
<script>
const input = document.getElementById('email');
if (!input.checkValidity()) {
  console.log('エラー:', input.validationMessage);
}
</script>

実務での使いどころ

• Constraint validation API の活用

  制約バリデーションAPI。フォーム入力値の検証をブラウザ側で行う仕組み。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — Constraint validation API
• Can I use — Constraint validation API