ASP.NET Validator の Display="Dynamic" 時の注意点 (2014/1/16 記)

ブログの記事 Validator の Display="Dynamic" 時の注意点 に書いたコードを実際に試すためのページです。

ASP.NET の検証コントロールのエラーメッセージは html コードでは span 要素となり、JavaScript による検証結果により表示/非表示を切り替えています。

Display プロパティが Dynamic に設定されている場合は、 当該 span 要素の style 属性を "display:none;" または "display:inline;" に設定することにより表示/非常時を切り替えます。

検証対象のテキストボックスにフォーカスを当ててからフォーカスを外す (例えば、TextBox に入力してから form を submit するために Button をクリックする)と、 そのタイミングで JavaScript による検証がかかるようになっています。

検証結果によって "display:inline;" が "display:none;" に(またはその逆に)書き換えられると、 エラーメッセージが表示/非表示になる分ページのレイアウトが変わります。

従って、例えば、検証コントロール直後に改行(<br />)を入れないで Button が配置されているような場合、 エラーメッセージの分だけ画面上でボタンが左右に移動します。

ボタンが移動すると、<input type="submit" ... /> タイプのボタンであるにもかかわらず form が submit されません。 即ち、ポストバックされないという期待に反する動作になります。

なお Button が動くのは左右でなくても、例えばエラーメッセージを p 要素に入れると上下に移動しますが、その場合でも同じくform は submit されません。

このことは、ASP.NET の検証コントロールを使った場合に限った話ではなく、html 要素と JavaScript だけでも再現できます。 以下のサンプルは、html 要素と JavaScript だけでこの問題(ボタンが動くと submit されない)を再現した例です。

ちなみに、Display プロパティが Static に設定されている場合は、"visibility:hidden;" または "visibility:visible" に設定するので、 表示/非表示を切り替えてもページのレイアウトは変わりません。結果、ボタンは動かないのでこの問題は起こりません。