February 25, 2012
|
Updated validation in Web Pages v2, Part 3
|
62131 hit(s)
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 ErrorsFormatting 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 DisplayNotice 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
|
|
