JavaScript アドバンス

JavaScript Validation API

1. 制約バリデーション  の DOM メソッド

JavaScriptのバリデーション APIは、ブラウザに組み込まれた制約バリデーション機能をプログラムから制御するための強力なインターフェースを提供します。

メソッド説明
checkValidity()インプット要素が有効なデータを含んでいる場合に true を返します。
setCustomValidity()インプット要素の validationMessage プロパティにカスタムメッセージを設定します。

1.1 checkValidity() メソッドの実装例

インプット要素が無効なデータを含んでいる場合に、ブラウザ標準のメッセージを表示する基本的な実装です。

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">実行</button>

<p id="demo"></p>

<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  // バリデーションチェックの実行
  if (!inpObj.checkValidity()) {
    // 無効な場合、ブラウザ標準のバリデーションメッセージを表示
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "入力値は有効です";
  }
}
</script>

2. 制約バリデーションの DOM プロパティ

バリデーションの状態を確認するために、以下のプロパティが利用可能です。

プロパティ説明
validityインプット要素の妥当性に関連するブーリアン（真偽値）プロパティを含むオブジェクトです。
validationMessage要素のバリデーションが false の時にブラウザが表示するメッセージを保持します。
willValidateその要素がバリデーションの対象になるかどうかを示します。

2.1 Validity プロパティの詳細

インプット要素の validity プロパティ（ValidityState オブジェクト）には、データの妥当性に関する詳細なフラグが含まれています。

プロパティ説明
customErrorsetCustomValidity() でカスタムメッセージが設定されている場合に true となります。
patternMismatch要素の値が pattern 属性の正規表現と一致しない場合に true となります。
rangeOverflow要素の値が max 属性で指定された最大値を超えている場合に true となります。
rangeUnderflow要素の値が min 属性で指定された最小値を下回っている場合に true となります。
stepMismatch要素の値が step 属性で定義されたルールに適合しない場合に true となります。
tooLong要素の値が maxLength 属性で指定された最大文字数を超えている場合に true となります。
typeMismatch要素の値が type 属性（emailやurlなど）に適合しない場合に true となります。
valueMissingrequired 属性がある要素に値が入力されていない場合に true となります。
valid要素の値がすべての制約を満たし、有効である場合に true となります。

3. 具体的な実装コード例

3.1 rangeOverflow プロパティの使用例

入力フィールドの数値が100（max 属性）を超えている場合に、独自のメッセージを表示します。

<input id="id1" type="number" max="100">
<button onclick="myFunction()">チェック</button>

<p id="demo"></p>

<script>
function myFunction() {
  let text = "値は有効です（Value OK）";
  // rangeOverflow（最大値超過）を個別に判定
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "数値が大きすぎます（Value too large）";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

3.2 rangeUnderflow プロパティの使用例

入力フィールドの数値が100（min 属性）を下回っている場合にメッセージを表示します。

<input id="id1" type="number" min="100">
<button onclick="myFunction()">チェック</button>

<p id="demo"></p>

<script>
function myFunction() {
  let text = "値は有効です（Value OK）";
  // rangeUnderflow（最小値未満）を個別に判定
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "数値が小さすぎます（Value too small）";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>