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 擬似クラスに一致します。