Re: フォーム・サブミット時のinput要素の入力チェック方法と結果表示について

一條さん、こんにちわ。
羽田野@HTML5.JP です。

On Fri, 7 May 2010 15:58:47 +0900
Miwako Ichijo <usa132006@gmail.com> wrote:
> 1. 入力チェックが実行される単位は要素単位のみ? form単位でも可能か?

フォーム内のすべての入力エラーをまとめて表示させたいってことですよね。
仕様上、マークアップだけで、強制的にまとめてエラーを表示することを指
示するような仕組みはありません。
仕様では、どのようにエラーを表示するかについては、ブラウザーに任され
ていますので、もしかしたら、まとめてエラーを表示するブラウザーが今後
出てくるかもしれませんね。
いずれにせよ、スクリプトによる制御が必須となりますね。

サンプルを作ってみましたので、ご覧ください。
http://www.html5.jp/experiments/form-validate/test3.html
Opera 10.53 または Chrome 5 Dev版でご覧ください。
エラーの表示そのものは、完全にスクリプトによって実現しています。
バリデーションとエラー判定は、HTML5 Forms の機能に委ねています。
スクリプトの詳細は、ソースをご覧ください。

実は、Chrome 5 Dev版も、表示系を除いて、HTML5 Forms に関連するAPIをす
でに実装済みなんですよね。つまり、constraint validation API のことです。
http://www.w3.org/TR/html5/forms.html#the-constraint-validation-api


> 2. 要素単位の入力チェックが行なわれる場合、実行は要素の構造上の並び順に従うのか?

その通りですね。仕様でそう規定されています。
http://www.w3.org/TR/html5/forms.html#statically-validate-the-constraints

とはいえ、そのエラーをどうやって表示するかは、ブラウザー次第というこ
とになります。それはこちらに書いてあります。
http://www.w3.org/TR/html5/forms.html#interactively-validate-the-constraints
"User agents may report more than one constraint violation. "って書い
てありますね。つまり、エラーをまとめて表示しても良いことにはなってい
ます。今後、まとめてエラーを表示するブラウザーも出てくるかもしれませ
んね。

> 3. 入力チェックでエラーとなった時の表示スタイルのカスタマイズはできるようになるのだろうか?

これについては、実際、WHATWGやW3Cでどんな議論がなされたのかは知りませ
んので、他の方のアドバイスが欲しいところですね。


> 4. エラーメッセージ全体を自由にカスタマイズできる方法が必要にならないだろうか?
>   (title属性の利用以外、より複雑な内容で、かつUAがデフォルトで出すようなメッセージも上書きできる方法が必要にならないか?)

ご存じの通り、setCustomValidity()メソッドを使えば、カスタムのメッセー
ジを定義することができます。
http://www.w3.org/TR/html5/forms.html#dom-cva-setcustomvalidity

setCustomValidity()メソッドでカスタムのメッセージを定義したサンプルを
用意してみました。Opera 10.53でご覧ください。
http://www.html5.jp/experiments/form-validate/test2.html
たぶん、一條さんも、こんなサンプルで試されたのではないかとお察しします。

これも、どう表示すべきかについては、特に規定は見当たりませんね。
とはいえ、一條さんの指摘の通り、Opera では、カスタムのメッセージの前
にデフォルトのメッセージが付け加えられてしまうんですよね。
さらに、文字が多いと表示しきれないという問題もありますね。

やはり、完全にカスタムのメッセージを表示させたいなら、エラー表示の
部分も、スクリプトに依存した方が良いですね。

> これを見て、
> ・ 常に議論しているような内容を適用するのは大変厳しい

マークアップだけでは無理ですね。

> ・ もし利用するとしたら、Javascriptで機能をラップする必要が出るかもしれない(タグ上の指定はJavascript OFF時の保険扱い)
> というのが現状の感想です。

はい、良く議論されているようなことを実現しようとすれば、スクリプトは
必須ですね。


> HTML上で無駄にデータ送信を行なわずにチェックできる機能はぜひ使っていきたいのですが、
> 実装するブラウザが増えても導入には二の足を踏みそうです。
...
> 今の仕様、実装されているブラウザの処理内容等、皆さんはどのような感想、ご意見をお持ちなのでしょうか。
> また、どういう類のフォームだったら、そんなに気にせず導入できると考えられますか。

マークアップだけで実現するビヘイビアは、あくまでもJavaScriptが動作し
ないユーザー・エージェント向けの最小限の機能で良いのではないかと思っ
ています。
たとえ、マークアップやCSSだけでできることを仕様で増やしたとしても、
多くのシーンでは満足できないのではないでしょうか。

そういう意味では、APIが充実していた方が、柔軟性があって便利なのでは
ないでしょうか。
スクリプトを作るのが難しいと思われるウェブ制作者も多いと思います。
しかし、いずれ、jQueryのプラグインやライブラリーといった形で、誰でも
簡単にカスタムの見た目を実現できるようになると思いますよ。

最後に HTML5 Forms に関する私の意見ですが、1点だけあります。
一條さんもご指摘の通り、setCustomValidity() でカスタムのメッセージを
定義したとしても、少なくとも Opera では余分な文字が加わってしまいます。
そのため、HTML5の仕様では、setCustomValidity()でメッセージを定義した
場合、見た目はともかく、表示する文字については、定義したメッセージし
か表示しないように制限して欲しいですね。


--
Futomi Hatano
http://www.html5.jp/
http://www.futomi.com/
http://twitter.com/futomi

Received on Saturday, 8 May 2010 07:00:23 UTC