Validator Controls
ValidationSummary
To show all errors in the viewmodel, you can use the ValidationSummary control.
<dot:ValidationSummary />
Because of performance reasons, the ValidationSummary control displays only the errors from the current viewmodel and doesn't browse the child objects.
If you want to include the errors from child objects, you can set its IncludeErrorsFromChildren to true.
Validator Control
The second options is to use the Validator to display errors for an individual field.
<dot:TextBox Text="{value: NewTaskTitle}" />
<dot:Validator Value="{value: NewTaskTitle}">*</dot:Validator>
This will display the * character when the property contains invalid value. The Value property contains a value binding to a property which is being validated.
The Validator control has several properties that let you set how the error is reported. You can combine them as you need:
HideWhenValid- set tofalseif you need this control to remain visible even when the field is valid. By default, the control is hidden when the field is valid.InvalidCssClass- the CSS class specified in this property will be set to this control when the field is not valid.ShowErrorMessageText- the text of the error message will be displayed inside this control.SetToolTipText- the text of the error message will be set as thetitleattribute of the control.
Validator Attached Properties
In many cases, you may need to apply the Validator properties on any other element, for example the <div>.
If the property is not valid and you need to apply a CSS class to a div, you can use the followin syntax:
<div Validator.InvalidCssClass="has-error" Validator.Value="{value: FirstName}">
your content
</div>
The validation is always triggered on elements which has the Validator.Value property set.
You can use the Validator.HideWhenValid, Validator.InvalidCssClass, Validator.ShowErrorMessageText and Validator.SetToolTipText to define what happens to the element. These properties are inherited to the child elements, so you may set them once on the form or page level.
<form Validator.InvalidCssClass="has-error"> <!-- the invalid CSS class is set for the whole form -->
<div Validator.Value="{value: FirstName}"> <!-- the Validator.Value is marks the element which gets the invalid CSS class -->
First Name: <dot:TextBox Text="{value: FirstName}" />
</div>
<div Validator.Value="{value: LastName}">
Last Name: <dot:TextBox Text="{value: LastName}" />
</div>
</div>
If you want to set the Validation.InvalidCssClass property globally, you can apply it on the <body> element in the master page.
You can of course override the CSS class on any child element.