HTML5 date型に存在しない日付を入力したときにはまった話

お久しぶりです。阿部です。

HTML5のdate型の項目で、存在しない日付に対するバリデーション処理にはまった話を書きたいと思います。

<input type="date" id="date">

と要素を作成し、javascriptで入力値を取得し入力チェックを行う処理を実装していました。

let date_value = document.getElementById("date").value

動作確認をしている中で入力値がうまく取れていないことが分かったので、整理してみました。

入力パターンに対して取得できた入力値のパターン、出力したいメッセージは下記の通りでした。

入力パターン	date_valueの値	出力したいメッセージ
未入力	""	入力してください
年のみ入力	""	入力に誤りがあります
年月入力	""	入力に誤りがあります
すべて入力	2021/1/1	（なし）
存在しない日付	""	入力に誤りがあります

HTML5のdate型の場合、存在する日付を年月日すべて入力しなければjavascriptで取得できる値は””空文字となることがわかりました。

これではユーザによって未入力なのか、入力が不完全or存在しない日付が入力されたのか判別することができません。

そこで登場するのが、 validityl.validなるパラメータです。

使い方はこんな感じです。

document.getElementById("date").validity.valid

入力状態によっては、

入力パターン	validity.valid	出力したいメッセージ
未入力	true	入力してください
年のみ入力	false	入力に誤りがあります
年月入力	false	入力に誤りがあります
すべて入力	true	（なし）
存在しない日付	false	入力に誤りがあります

となり、入力がある状態で正しくない（不完全/存在しない日付）場合にはfalseを、 未入力の場合にはtrueが返ってくるので、validity.validとdocument.getElementById("date").valueの組み合わせによって、 適切なメッセージを出力できるようになりました。

ちなみに、

console.log(document.getElementById("date").validity)

を実行すると

ValidityState {valueMissing: false, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}
badInput: true
customError: false
patternMismatch: false
rangeOverflow: false
rangeUnderflow: false
stepMismatch: false
tooLong: false
tooShort: false
typeMismatch: false
valid: false
valueMissing: false

と出力されます。 今回の処理に対してはbadInputがtrue/falseの値が変動していたのでbadInputというのがdate型の入力に対して【正しい/正しくない】という結果が反映される箇所なんだと思います。 ※ただの予想です。

badInput以外にもpatternMismatchなんかもあるので、このパラメータをうまく使っていくことで、これまでのようにjavascriptで取得したvalueをプログラムでバリデーションするのではなく、効率よく開発をすすめられたら良いなーという希望を持ちながらこの先も調べていこうと思います。

developer.mozilla.org で色々参照できました。今後活用していきます。