65.9K
CodeProject is changing. Read more.
Home

Customize Validation Summary

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.86/5 (38 votes)

Sep 29, 2010

CPOL

1 min read

viewsIcon

153674

downloadIcon

4091

The ASP.NET Validation Summary control with customized CSS and Style to display a summary of all validation errors that occur in a web page.

ValidationSummaryScreen.png

Introduction

The ASP.NET Validation Summary control with Stylish and Customized CSS to display a summary of all validation errors occurred in a web page.

Background

The error message displayed in this control is specified by the ErrorMessage property of each validation control. If the ErrorMessage property of the validation control is not set, no error message is displayed for that validation control.

Using the Code

The customized error message displayed in this control is specified by the following property of Controls and Validation Summary:

  1. Validation Control
    1. Text: (The icon to display when validation fails)
    2. ErrorMessage: (The text to display in the ValidationSummary control when validation fails. Note: This text will also be displayed in the validation control if the Text property is not set)
  2. Validation Summary
    1. DisplayMode: (Display the validation summary with BulletList)
    2. CssClass: (The CssClass property is used to set style or class to the ValidationSummary control. Validationsummary)
    3. HeaderText: (Display a header “Please correct the following:” in the ValidationSummary control)

HTML Structure

VS-Page.png

CSS Style

VS-CSS.png

Points of Interest

This was done using only CSS tricks.

If you find some issues, bugs with it, just leave a comment or drop me an email. If you make any notes to this, let me know that too so I don't have to redo any of your hard work.

Please provide a "Vote" if this would be helpful.