ValidationSummary の表示時にアニメーション

ASP.NET における入力検証の結果表示に便利な ValidationSummary コントロール。
(ValidationSummary については、ちょっと古いけれど、@ITの記事がわかりやすいかも)

私も多用するのだが、入力検証にひっかかったときに ValidationSummary が非表示から表示に切り替わるときや、検証結果メッセージが変化するときの画面の変化が地味で、せっかく入力検証エラーメッセージが表示されているのにもかかわらず、ユーザーが気づかない、ということがよくあった。

入力検証にひっかかったときにメッセージボックスを表示するオプションもある。
それではと、メッセージボックス表示と併用したこともある。
ところが今度は、メッセージボックスと ValidationSummary と両方に同じエラーメッセージが表示されるのは不要ではないか、先ほどみたメッセージボックスとはまた違う入力エラーが発生したのかと思った、とのレポート。

いや、たしかに言われてみればそのとおりかもしれない。

それじゃあとメッセージボックス表示のみにしてみる。
すると今度は、メッセージボックスの[OK]ボタンをメッセージをよく読む前についうっかりを押してしまって、何の入力エラーだったかわからない、という事態が発生。

...ということで、この困窮した状況を打開すべく、ValidationSummary にちょっと凝った仕掛けを施してみることに。
(前振りが長いですが本題はここから。)

メッセージボックスは使わず ValidationSummary だけ、ただしその代わりに、ValidationSummary が表示状態に切り替わるときにアニメーション効果を施してみることにした。

まずはアニメーション効果を JavaScript によるクライアント側テクノロジで実現すべく、情報収集。

はじめは AJAX Control Toolkit が提供するアニメーション効果を利用しようと思ったが、どうしてもサーバー側コントロール、エクステンダを通しての利用方法のドキュメントにばかりぶちあたり、クライアント側"だけ"で利用方法がよくわからない。

いずれ再挑戦と思いつつ、ここは定番の script.aculo.us を使うことにした。

次は ValidationSummary の表示状態の切り替えのタイミングにフックすること。
MSDN Library やソースをいろいろ調べたりしたのだが、どうやら標準的な手段は用意されていない模様。

ということで、AJAX Control Toolkit の CalnederExtender の日本語化でもやった、JavaScript コードの置換でやってみる。

ValidationSummary の表示状態の切り替えは、ValidationOnSubmit という JavaScript 関数の中で行われることをつきとめた。
そこで、ValidationOnSubmit 関数を書き換える JavaScript コードを (Microsoft Ajax Library を使っているので) pageLoad JavaScript 関数に仕込んでみる。

var code = ValidationSummaryOnSubmit.toString();
code = code.replace("ValidationSummaryOnSubmit","");
code = code.replace(
    'summary.style.display = "";',
    'summary.style.display = ""; new Effect.Pulsate(summary);');
ｅｖａｌ("ValidationSummaryOnSubmit = " + code);

上記コード中、赤い箇所が挿入するコードである。
上記例は script.aculo.us のアニメーション効果を適用するコードを書いたところ。
動作確認してみると、なかなかいい感じで動作してくれた。

また、非表示から表示に可視状態が変化する時点だけでなく、入力検証エラーメッセージが切り替わる際にもアニメーション効果が動作し、メッセージが表示された・変化したことがよくわかるようになった。
これはなかなかよい。

IE や Firefox などといった高機能ブラウザが前提なら、このようなユーザビリティ向上はいいかもしれない。