← カテゴリ一覧に戻る

入力バリデーション

checkValidity setCustomValidity Constraint Validation API

ブラウザの組み込みバリデーション機能とJavaScriptによるカスタムバリデーションを組み合わせます。

デモ：バリデーション付きフォーム

コード例：Constraint Validation API

js
const input = document.querySelector('#email');

// バリデーション確認
input.checkValidity();       // true / false
input.validity.valid;        // true / false
input.validity.valueMissing; // required なのに空
input.validity.typeMismatch; // type に合わない値
input.validity.patternMismatch; // pattern に合わない
input.validity.tooShort;     // minlength より短い
input.validity.tooLong;      // maxlength より長い
input.validity.rangeUnderflow; // min より小さい
input.validity.rangeOverflow;  // max より大きい

// カスタムエラーメッセージを設定
input.setCustomValidity('');  // クリア（有効にする）
input.setCustomValidity('このメールは既に使用されています'); // エラー設定

// フォーム全体のバリデーション
const form = document.querySelector('form');
form.checkValidity();    // 全フィールドをチェック
form.reportValidity();   // チェックしてエラーを表示

// invalid イベント（バリデーション失敗時）
input.addEventListener('invalid', (e) => {
  e.preventDefault(); // デフォルトのエラーバルーンを抑制
  showCustomError(input.validationMessage);
});

// input イベントでリアルタイムバリデーション
input.addEventListener('input', () => {
  if (input.value.includes('@')) {
    input.setCustomValidity('');
  } else {
    input.setCustomValidity('@が含まれていません');
  }
});

HTML属性によるバリデーション

js
<!-- 必須 -->
<input required>

<!-- 型バリデーション -->
<input type="email">    <!-- メール形式 -->
<input type="url">      <!-- URL形式 -->
<input type="number">   <!-- 数値のみ -->
<input type="tel">      <!-- 電話番号（形式は任意） -->

<!-- 長さ制限 -->
<input minlength="2" maxlength="50">

<!-- 数値範囲 -->
<input type="number" min="0" max="100" step="5">

<!-- 正規表現パターン -->
<input pattern="[0-9]{3}-[0-9]{4}" title="郵便番号（123-4567形式）">

<!-- バリデーションを無効化 -->
<input novalidate>
<form novalidate>  <!-- フォーム全体 -->

NEWcustomStateSet（カスタム状態のCSSセレクタ対応）

カスタム要素のバリデーション状態をCSSセレクタで指定できる新機能です。

js
// ElementInternals でカスタム状態を管理
class MyInput extends HTMLElement {
  #internals;
  constructor() {
    super();
    this.#internals = this.attachInternals();
  }
  validate(value) {
    if (!value) {
      this.#internals.states.add('--empty');
      this.#internals.states.delete('--valid');
    } else {
      this.#internals.states.delete('--empty');
      this.#internals.states.add('--valid');
    }
    // 組み込みバリデーションにも参加
    this.#internals.setValidity(
      { valueMissing: !value },
      !value ? '入力が必要です' : ''
    );
  }
}

/* CSS でカスタム状態に対応 */
my-input:state(--empty) { border-color: red; }
my-input:state(--valid) { border-color: green; }

🤖 AIプロンプトテンプレート

以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。

- HTML5バリデーション属性（required/minlength/pattern/type）のサンプルを示す
- checkValidity()とreportValidity()を使ったプログラムによる検証の例を含める
- setCustomValidity()でカスタムエラーメッセージを設定するサンプルを含める
- JavaScriptによる独自バリデーションロジック（パスワード強度チェックなど）の例を示す
- バリデーション結果をリアルタイムでUIに反映するサンプルを含める
- コメントは日本語で記述する

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo