About

I'm Mike Pope. I live in the Seattle area. I've been a technical writer and editor for over 30 years. I'm interested in software, language, music, movies, books, motorcycles, travel, and ... well, lots of stuff.

Read more ...

Blog Search


(Supports AND)

Google Ads

Feed

Subscribe to the RSS feed for this blog.

See this post for info on full versus truncated feeds.

Quote

Its amazing how much I can remember of the worst music of the seventies when I struggle to remember the passwords to my many different computer accounts.

— "Ancarett"



Navigation





<November 2014>
SMTWTFS
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456

Categories

  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  

Contact

Email me

Blog Statistics

Dates
First entry - 6/27/2003
Most recent entry - 11/20/2014

Totals
Posts - 2315
Comments - 2504
Hits - 1,685,095

Averages
Entries/day - 0.56
Comments/entry - 1.08
Hits/day - 404

Updated every 30 minutes. Last: 7:18 PM Pacific


  09:41 PM

As noted previously, to display validation errors in ASP.NET Web Pages v2, you can use Html.ValidationMessage and Html.ValidationSummary. You can use one or the other or both. If you use both, one idea is to use ValidationMessage to show an "error icon" and ValidationSummary to show the details:

Rather a plain display. However, you can style the output of the messages using some reserved CSS class names, to wit:
  • input-validation-error
  • field-validation-error
  • validation-summary-errors
  • field-validation-valid
  • input-validation-valid
  • validation-summary-valid
For example, to make a particularly forceful (if ugly) error display, define classes like this:
<style>
.validation-summary-errors{
border:2px solid red;
color:red;
font-weight:bold;
padding:10px;
margin:10px;
width:30%}

.field-validation-error{
color:red;
font-weight:bold;
background-color:yellow;}

.input-validation-error{
color:red;
font-weight:bold;
background-color:pink;}
</style>

And when the errors appear, they will be noticeable:



Formatting Client-Side Validation Errors

Formatting errors that are produced by client-side validation requires a little extra work. If you're using only server-side validation, you can just define the CSS classes and everything will work, albeit only after a postback.

If you're using client-side validation, in addition to registering the .js libraries and adding calls to Validation.GetHtmlValidation.For (changed in the Feb 2012 Beta of v2), you also need to add a call to Validation.ClassFor to the element being validated, like this:
<input type="text"
name="coursename"
value=@Request.Form["coursename"]
@Validation.For("coursename") @Validation.ClassFor("coursename") />
@Html.ValidationMessage("coursename", "<=")
Validation.ClassFor is similar to Validation.GetHtmlValidation.For in that it emits attributes that jQuery can hook. In this case, it lets jQuery dynamically add the name of an appropriate class (e.g. field-validation-error) if there's an error condition.

Client-side validation can also actually use the style that you define for input-validation-error. Server-only validation won't emit a class attribute into the <input> element that references this CSS class. However, client-side validation does all this work dynamically, and anything you define in input-validation-error will indeed be reflected in an <input> element where there's an error:

Static and Dynamic Error Display

Notice that there are two classes for each display: one is for the error condition (e.g. validation-summary-errors) and one is for the default/normal/non-error condition (e.g. validation-summary-valid). This points out something that's important to understand about the validation-error display methods: they always render markup. This might not be apparent if you use the methods only to display validation errors, because if there's no error, no error text is rendered and you don't see anything. Even in that case, tho, the surrounding markup (a <div> or <span>) is rendered. You can see this if look you at the page source when there's no error.

Always rendering the markup for error display has a downside. For example, if you display a static message using Html.ValidationSummary, that static message is always displayed, even if there's no error.

You can fix this in a couple of ways. One is to put the Html.ValidationSummary call into a conditional block so it's only rendered under error conditions:

@if(IsPost && !Validation.IsValid()){ 
<text>@Html.ValidationSummary("Please fix the marked errors") </text>
}
Another way is to control the display via CSS. An easy way to do that is to set the display property in the CSS class for the –valid classes to (e.g.) none.

One reason to always render the error display markup is to allow you to define a layout for the page that doesn’t jump around depending on whether an error is being displayed or not. (For the same reason, the validation controls in ASP.NET Web Forms have a Display property that can be set to None, Static, or Dynamic.) For example, you can use the CSS classes to define a <div> or <span> element that has a fixed size. The element then always renders the same whether it has an error message in it or not, and the overall page layout remains the same. (Trying to come up with a fixed size for the summary if there's potentially many errors is left as an exercise for the student.)

Anyway, between the two types of display methods and the reserved CSS classes and the ability to conditionally output messages using code, you should be able to come up with almost any kind of validation error display you need. Or so we hope. :-)

See Also

[categories]   ,

|