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

一條です。

>Googleたむらさん、羽田野＠HTML5.JPさん

確認が遅れました。ご回答ありがとうございます。

お二人の指摘から、

1)　マークアップだけでできる機能は最低限の機能
2)　API等を利用して機能を”積上げて”目指す入力フォームを作る

というスタンスが重要だなと考えさせられました。
クライアント側だけで容易に入力チェックができると思うと、もうちょっとなんとか・・・と
欲がでてきましたが、

（羽田野＠HTML5.JPさん）
>>　たとえ、マークアップやCSSだけでできることを仕様で増やしたとしても、
>>　多くのシーンでは満足できないのではないでしょうか。

の通り、機能を増やしてもどこかで不満がでることは確実ですね。
（同じタイプの制作だけではないですから。）
今の仕様内容でできないことが多いと不安に思うよりは、
Javascript OFFでもチェックが働く機能ができたことを肯定的に考えて対応するようにします。


以下、各項目について確認したことです。


■　1.　入力チェックが実行される単位は要素単位のみ？　form単位でも可能か？
■　2.　要素単位の入力チェックが行なわれる場合、実行は要素の構造上の並び順に従うのか？

羽田野さん、サンプルありがとうございます。
まさしくこのような感じです。（参考にします。）
Chromeだとplaceholder属性も有効ですね。

（Googleたむらさん）
>>　個人的には、複数のエラーを一斉に出されるのも鬱陶しそうだと思います。

おっしゃるとおり、画面構成によっては細かく出しすぎるとうるさくなるので、メッセージを1つに集約することもあります。
一方、項目が多めの場合、どこで何が間違っているのかをまとめて1ヶ所で出してしまうと、対象項目とのつながりが認識しにくくなるユーザーさんもいる可能性があるので、
・　各項目の近くに個別で、
・　チェックした時に一斉に
出したい時があります。

いずれにせよ、カスタマイズする時は表示の仕方に注意します。

（Googleたむらさん）
>>　CSSの :invalid を使えばどこにエラーがあるのかはわかるはずなので

サンプルではスタイル設定をチェック処理内で行なわれていましたが、
:invalid、:validの擬似クラスを利用すれば、スタイルシート内で簡単にまとめて設定ができそうです。


■　3.　入力チェックでエラーとなった時の表示スタイルのカスタマイズはできるようになるのだろうか？
■　4.　エラーメッセージ全体を自由にカスタマイズできる方法が必要にならないだろうか？

羽田野さん、こちらもサンプルありがとうございます。
ほぼ似たような内容で出力確認していました。

自分のイメージに近いものを出すなら、独自で処理を書くのが一番ですが、
一番簡単なカスタマイズとしたら、メッセージをsetCustomValidity()で上書きする方法を取りたいので、

（羽田野＠HTML5.JPさん）
>>　そのため、HTML5の仕様では、setCustomValidity()でメッセージを定義した
>>　場合、見た目はともかく、表示する文字については、定義したメッセージし
>>　か表示しないように制限して欲しいですね。

ぜひ、そうなって欲しいものです。
title属性の表示についてくる固定メッセージは
http://www.w3.org/TR/html5/forms.html#the-pattern-attribute
の例を見てそういう実装になるのかなと思うのですが、
カスタマイズ時に全部の文面をコントロールできないのは残念です。


GhromeやOperaでテストしながら、今後の入力フォームの作り方プロセスをじっくり考えて見ます。
ありがとうございました。


=========================================================
(追記）
http://www.html5.jp/experiments/form-validate/test3.html
で1回目を両方NG、2回目に1項目成功（フォーム全体では1項目がNGのためvalidではない）
するように入力すると、前回のエラーメッセージが表示されたままになりました。
複数回対応するとしたら、validity.validがfalse以外の時の分岐を追加ですね。

※手元で修正した内容の抜粋
---------------------------------------------
			var msg = "";
			if(res == false) {
				// 入力値エラーの種類の判定とエラー・メッセージの定義
				//var msg = "";	2回目エラー対応
				if(c.validity.valueMissing) {
					msg = "絶対に入れてくれや。";
				} else if(c.validity.typeMismatch) {
					msg = "入力タイプがちゃう。";
				} else if(c.validity.patternMismatch) {
					msg = "パターンがちゃう。";
				} else if(c.validity.tooLong) {
					msg = "長すぎるねん";
				} else {
					msg = "なんか知らんけどダメ";
				}
				// エラーメッセージの表示
				c.style.backgroundColor = "#ffeeee";
				/*　2回目エラー対応
				var eel = f.querySelector("#" + c.name + "e");
				if(eel) {
					eel.innerHTML = msg;
				}
				*/
			}else{
				// 成功した場合はカラー変更
				c.style.backgroundColor = "#ffffff";
			}

			// メッセージ表示・非表示対応
			var eel = f.querySelector("#" + c.name + "e");
			if(eel) {
				eel.innerHTML = msg;
			}
----------------------------------------------


-------------------------------------------------------------
Miwako Ichijo(usa132006@gmail.com)


2010年5月8日15:59 Futomi Hatano <info@html5.jp>:
> 一條さん、こんにちわ。
> 羽田野＠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 Monday, 10 May 2010 06:22:31 UTC