JavaScript 検証 API

DOM メソッドの制約検証

プロパティ	説明
checkValidity()	入力要素に有効なデータが含まれている場合は true を返します。
setCustomValidity()	入力要素の validationMessage プロパティを設定します。

入力フィールドに無効なデータが含まれている場合は、メッセージを表示します：

checkValidity() メソッド

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

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

<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}
</script>

Try it Yourself »

DOM プロパティの制約検証

プロパティ	説明
validity	入力要素の妥当性に関連する boolean プロパティを含みます。
validationMessage	妥当性が false の場合に、ブラウザに表示するメッセージが含まれます。
willValidate	入力要素が検証されるかどうかを示します。

Validity プロパティ

入力要素の validity property プロパティには、データの有効性に関連する多くのプロパティが含まれています

プロパティ	説明
customError	カスタムの妥当性メッセージが設定されている場合は true を設定します。
patternMismatch	要素の値がパターン属性と一致しない場合は true を設定します。
rangeOverflow	要素の値がその max 属性より大きい場合は true を設定します。
rangeUnderflow	要素の値が min 属性よりも小さい場合は true を設定します。
stepMismatch	要素の値が step 属性ごとに無効である場合は true を設定します。
tooLong	要素の値が maxLength 属性を超えている場合は true を設定します。
typeMismatch	要素の値が type 属性ごとに無効な場合は true を設定します。
valueMissing	要素（required 属性の）に値がない場合は true を設定します。
valid	要素の値が妥当な場合は true を設定します。

例

入力フィールドの数値が 100（入力の max 属性）より大きい場合、メッセージを表示します：

The rangeOverflow Property

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

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

<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
       txt = "Value too large";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

Try it Yourself »

入力フィールドの数値が 100（入力の min 属性）より小さい場合は、メッセージを表示します：

The rangeUnderflow Property

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

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

<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeUnderflow) {
       txt = "Value too small";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

Try it Yourself »

❮ 前章へ次章へ ❯