ValidityState

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

ValidityState インターフェイスは、制約の検証に関して、要素が取りうる妥当性の状態を表します。要素の値が不正な場合、なぜ検証に失敗したのかを知る手がかりにもなります。

インスタンスプロパティ

下記のプロパティはどれも論理値を返します。true は指定された検証が失敗したことを表します。ただし valid プロパティだけは例外で、 true が要素の値がすべての制約に適合していることを表します。

badInput 読取専用: 論理値で、 true はブラウザーが処理できない入力値をユーザーが入力したことを示します。
customError 読取専用: 論理値で、その要素のカスタム検証メッセージが setCustomValidity() メソッドによって空でない文字列に設定されているかどうかを示します。
patternMismatch 読取専用: 論理値で、 true は値が pattern の指定と一致しないことを示し、 false は一致することを示します。 true の場合、その要素は CSS の :invalid 擬似クラスに一致します。
rangeOverflow 読取専用: 論理値で、 true は値が max 属性で指定された最大値を超えていることを示し、 false はその最大値以下である場合を示します。 true の場合、その要素は CSS の :invalid および :out-of-range の各擬似クラスに一致します。
rangeUnderflow 読取専用: 論理値で、 true は値が min 属性で指定された最小値未満であることを示し、 false はその最小値以上であることを示します。 true の場合、その要素は CSS の :invalid および :out-of-range の各擬似クラスに一致します。
stepMismatch 読取専用: 論理値で、 true は値が step 属性で決められた規則に合わないこと (つまり、step の値で割り切れないこと) を示し、 false は刻みの規則に合っていることを示します。 true の場合、その要素は CSS の :invalid および :out-of-range の各擬似クラスに一致します。
tooLong 読取専用: 論理値で、 true は値が HTMLInputElement または HTMLTextAreaElement オブジェクトの maxlength で指定された長さを超えていることを示し、 false は長さがその最長値以下であることを示します。 注: Gecko ではこのプロパティが true になることはありません。要素の値の長さが maxlength を超えないようになっているからです。 true の場合、その要素は CSS の :invalid および :out-of-range の各擬似クラスに一致します。
tooShort 読取専用: 論理値で、 true は値が HTMLInputElement または HTMLTextAreaElement オブジェクトの minlength で指定された長さに満たないことを示し、 false は長さがその最短値以上であることを示します。 true の場合、その要素は CSS の :invalid および :out-of-range の各擬似クラスに一致します。
typeMismatch 読取専用: 論理値で、 true は値が (type が email または url の場合に) 要求された構文に合っていないことを示し、false は構文が正しいことを示します。 true の場合、その要素は CSS の :invalid 擬似クラスに一致します。
valid 読取専用: 論理値で、 true はその要素がすべての制約検証に適合し、合格したとみられることを示し、 false はいずれかの制約に適合しなかったことを示します。 true の場合、 CSS の :valid 擬似クラスに一致します。それ以外の場合は CSS の :invalid 擬似クラスに一致します。
valueMissing 読取専用: 論理値で、 true はその要素に required 属性があるものの、値がないことを示し、 false はそうではないことを示します。 true の場合、その要素は CSS の :invalid 擬似クラスに一致します。