Dealing with ASP.NET Validation Controls and CSS styling

If you are working with ASP.NET Web Forms and are using the ASP.NET Validation Server Controls (most of us still are), then you need to take note of how the ASP.NET Validation Server Controls affect the layouts of your pages with CSS.

I was recently trying to create a jQuery Mobile Form and after adding the ASP.NET Validation Controls, I noticed that the layout and styling of my form had DRASTICALLY CHANGED!

Well, as it turns out, the default Display style for ASP.NET Validation Controls is Static.  The different Display values are documented in this MSDN article: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.basevalidator.display%28v=vs.110%29.aspx

Since I wanted to optimize the screen for a mobile device (thus the use of jQuery Mobile), I chose the Display style of None.  I then added a ValidationSummary control to the page so that all of my error messages would be displayed in the ValidationSummary control rather than next to my individual form field/form elements.

My recommendation would be to always set Display="None" for all of the validation controls and have the error messages display in a ValidationSummary control instead.  This way, you can maintain all of your CSS styling without having to specially design your layout for the validation controls in your page.