htmlから最大入力文字数を制限する属性にmaxlength属性があります。
適当なhtml要素にmaxlength="8"など設定すれば、フォームの入力要素が8文字以内に制限されるというもので、その効果については周知のことと思います。
では、制限を指定されたhtmlオブジェクトの状態はどのように管理されているのか？
今回はformの入力要素の制限を管理している、ValidityStateインターフェースについて中身を見ていきたいと思います。
1.ValidityStateインターフェースとは？
"ValidityState インターフェイスは、制約の検証に関して、要素が取りうる妥当性の状態を表します。要素の値が不正な場合、なぜ検証に失敗したのかを知る手がかりにもなります。"
-MDN Web Docs
ValidStateインターフェースには、いくつかのプロパティがあり、inputタグのtype属性に応じてboolean型がセットされます。
- tooLong...maxLengthで指定された長さを超えている場合trueとなる。
- tooShort...minLengthで指定された長さに満たない場合trueとなる。
- typeMismatch...typeがemailまたはurlのとき、要求された構文に満たない場合trueとなる。
なお、「要求された構文」とは、メールアドレスの［先頭部分］@[ドメイン名］という形式や、URLであれば［httpsやftpなどのプロトコル名］:［接続先のドメイン名］のような形式を指す。 - patternMismatch...指定されたpattern属性と一致しない場合trueとなる。
- valueMissing...required属性が指定されたにもかかわらず値がない場合trueとなる。
2.挙動を確認するコード
type属性ごとにinputタグを作成し、JS側でそれぞれの要素のValidityStateオブジェクトの中身を走査します。
for-inによって、オブジェクト内のプロパティで値がtrueとなっているものを調べ、列挙します(element.validity[key]===trueとしている箇所は冗長な記述でした)。
なお、removedKey配列には、今回は出力に含めないプロパティにキー名を列挙しました。
3.結果確認
illegalな入力値と、入力の結果trueとなったプロパティが列挙されています。
tooLLongプロパティは一旦置いておくとして、type属性がurlやemailの場合はpatternMismatchのみならずtypeMismatchやにも引っかかっていますが、
これは,emailの場合は@より前のメールアドレスのアカウント部分が書かれていないこと、URLの場合はドメイン名が指定されていないためです。
なお、このように制約に違反した入力がされた場合は上記のプロパティがtrueとなりますが、
オブジェクト内のいずれかの制約に違反していることを示すvalidプロパティはfalseとなります。ややこしいですね。
ところで、周知のとおり、maxlength制約が付されたフォームには、htmlからは入力制限の桁数以上の文字列を入力することはできません。
じゃあ、tooLongプロパティがtrueになることはないのか？JS側から制約を満たさない場合はどうなのか？
続編ではtooLongプロパティと、ついでにsetCustomValidityメソッドについて記述します。