制約バリデーションDOMメソッド
| プロパティ | 説明 |
|---|---|
| checkValidity() | 入力要素に有効なデータが含まれている場合にtrueを返します。 |
| setCustomValidity() | input要素のvalidationMessageプロパティを設定します。 |
入力フィールドに無効なデータが含まれている場合は、メッセージを表示します。
checkValidity（）メソッド
<input id="id1" type="number" min="100" max="300">
<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> »それを自分で試してみてください 制約バリデーションDOMプロパティ
| プロパティ | 説明 |
|---|---|
| validity | input要素の妥当性に関連するブール値プロパティが含まれています。 |
| validationMessage | 妥当性がfalseの場合、ブラウザが表示するメッセージが含まれています。 |
| willValidate | 入力要素が検証されるかどうかを示します。 |
妥当性のプロパティ
input要素の妥当性プロパティは、データの有効性に関連するプロパティの数が含まれています。
| プロパティ | 説明 |
|---|---|
| customError | カスタム妥当性メッセージが設定されている場合は、trueに設定します。 |
| patternMismatch | 要素の値がそのパターンの属性と一致しない場合、trueに設定します。 |
| rangeOverflow | 要素の値がその最大の属性よりも大きい場合には、trueに設定します。 |
| rangeUnderflow | 要素の値がその分属性よりも小さい場合、trueに設定します。 |
| stepMismatch | 要素の値がそのステップの属性ごとに無効である場合、trueに設定します。 |
| tooLong | 要素の値がそのmaxLengthの属性を超えた場合、trueに設定します。 |
| typeMismatch | 要素の値がその型の属性ごとに無効である場合、trueに設定します。 |
| valueMissing | （必要な属性を持つ）要素に値がない場合は、trueに設定します。 |
| valid | 要素の値が有効な場合、trueに設定します。 |
例
入力フィールド内の数字は100（入力の最大属性）よりも大きい場合、メッセージを表示します。
rangeOverflowプロパティ
<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>
»それを自分で試してみてください 入力フィールド内の数字は100（入力の分属性）未満である場合、メッセージを表示します。
rangeUnderflowプロパティ
<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>
»それを自分で試してみてください