HTML5フォームとdate input型 (その2)
前回はHTML5で追加された新しい型<input type=date>を取りあげ、未知の型の処理や値のサニタイゼーションについて紹介しました。今回は、バリデーションを中心に実装の問題や今後の懸念について紹介します。
WebKitのdate実装
時間関連の型はOperaで実装していると書きましたが、WebKitでも実装が勧められています。ChromeやWebKitのナイトリービルドで<input type=date>を含むHTMLを表示させると、<input type=number>のようなスピンボックスが現れます。
しかしながら、現時点ではdate型において値のサニタイゼーションが行われません。ですから、誤った値が追加されても、value属性の値が空文字列にはなりません。
というわけで、いま<input type=date>を使う場合は、date型を与えて、input.typeが同じ値を返すかに加えて、サニタイゼーションを行うかどうかを確かめる必要があります。HTML5関連やCSS3関連機能の検出ライブラリModernizrでは、値にスマイリー :) を与え、サニタイゼーションの有無を検知しています。
フォーム送信時のバリデーション
サニタイゼーションの他にも、HTML5のフォームにはバリデーション機能があります。たとえば、required属性のついたフォームには値が必ず入力されていなければ、フォームを送信することができなくなります。
HTML5フォームとそのバリデーションについては、Mozilla WebdevチームのBlogで、Firefoxヘルプに利用したという紹介記事が公開されています。
Firefox 4, Chrome 10, Opera 11で実装が進んでおり、それぞれのエラー表示を見ることができます。
要素が検証を通るかは、checkValidity()メソッドの返す値によって知ることができます。また、どういったエラーが起こっているかは、要素のValidityStateオブジェクトのメンバを参照することで、エラーの原因をつかむことができます。
実装状況の差異がバリデーションに影響
では、<input type=date>に不正な値を与える例でフォームのバリデーションを見ていきましょう。
<form>
<input type=date value="2011年3月14日">
<button type=submit>Submit</button>
</form>
前回取り上げたものと同じで、input要素に不正な値が入っています。この場合、date型をちゃんと実装し、かつバリデーションにも対応しているブラウザーであれば、サニタイゼーションが働き、valueプロパティは空文字列になるため問題なく送信されるはずです。Opera 11で上記のコードから送信ボタンを押したところ、エラーが表示されることはありませんでした。
一方、Chromeは先述のとおりサニタイゼーションを行わないので、指定した値がそのまま表示されています。ところが、バリデーション関連APIは実装しているため、値のチェックが行われるのです。そして、"2011年3月14日" という値は不正ですから、これによってフォーム送信時にエラーが表示されます。
また、WebKit NightlyやSafariではバリデーションAPIを実装しているものの、その結果にかかわらずフォームが送信されてしまうようです。
型のUIに依存することの問題
バリデーションがフォーム送信に影響しない実装があるため、いまHTML5フォームを利用しているページが将来的に問題になる可能性があります。特定の型が提供するUIに依存するという懸念です。
iOSのSafariでは型に応じてソフトウェアキーボードが変化します。レイアウトが変化し入力に都合がよいということで、特定の型を本来利用すべきでないところで使ってしまうケースが考えられます。
たとえば、number型の要素では、ソフトウェアキーボードの上段が数値になり、キーボードを切り替える必要がなくなり便利です。しかし、number型は整数や少数を入力するものなので、郵便番号、クレジットカード番号など、数字を利用するテキストのために用意されたものではありません。値の型も決まっており、ハイフンをハイフンとして入力することはできません。
<label>郵便番号: <input type=number name=zip required></label>
こういった風に使われてしまうと、HTML5フォームに対応したクライアントでは送信はおろか、入力もできない可能性がでてきます。
バリデーションについてはフォームにnovalidateもしくは送信ボタンにformnovalidate属性を記述することで回避できますが、入力に問題が出る場合、それはこの属性では解決できません。
HTML5フォームは進んでいるUAもあれば、そうでないものもあります。いま新しい型を利用するときには、それがバリデーションに影響するかということも調べ、無理なく使うことが望まれます。