Skip to content

Commit 52bc172

Browse files
authored
docs(validation): Revamp all pages (#1037)
1 parent 2223bf5 commit 52bc172

13 files changed

+86
-161
lines changed
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
#note-validation
2-
>note The Telerik form and validation tools don't add functionality over the standard ones. You should implement the desired custom validations first, and then you can replace it immediately with ours.
2+
>note The Telerik Blazor validation tools provide a way to display different types of validation messages. The main benefit is consistent styling with all other Telerik Blazor components. The validation tools do not expose API or settings for specific validation logic. You should configure the desired standard or custom validation separately, and then use our UI components to display messages to the user.
33
#end
Binary file not shown.
-5.24 KB
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
-4.62 KB
Binary file not shown.
Binary file not shown.
Binary file not shown.

components/validation/message.md

Lines changed: 24 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,23 @@ position: 15
1010

1111
# Telerik Validation Message for Blazor
1212

13-
The <a href = "https://www.telerik.com/blazor-ui/validation-message" target="_blank">Telerik Validation Message for Blazor</a> adds customization options on top of the standard <a href="https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.html.validationextensions.validationmessage?view=aspnet-mvc-5.2" target="_blank">ValidationMessage</a> provided by the framework such as a [Template](#template) or cascading CSS rules from the custom CSS class in the [Class](#class) parameter.
13+
The <a href = "https://www.telerik.com/blazor-ui/validation-message" target="_blank">Telerik Validation Message for Blazor</a> adds customization options on top of the standard <a href="https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.validationmessage-1" target="_blank">.NET ValidationMessage</a>, such as [`Template`](#template) and [`Class`](#class) parameters.
1414

15-
This article is separated in the following sections:
15+
## Using Validation Message with TelerikForm
1616

17-
* [Basics](#basics)
18-
* [Template](#template)
19-
* [Class](#class)
17+
To enable Telerik Validation Messages for a form field:
2018

21-
## Basics
19+
1. Add a `<TelerikValidationMessage>` tag near the respective `<FormItem>` tag, or [inside a form item `<Template>`]({%slug form-formitems-template%}).
20+
1. Provide a lambda expression in the `For` parameter that sets the associated property of the model, just like with the standard Blazor `ValidationMessage` component.
21+
1. (optional) Disable the built-in validation messages of the Telerik Form to avoid repetition. Set `ValidationMessageType="@FormValidationMessageType.None"`.
2222

23-
To enable Telerik Validation Messages for a field in the form you should provide a lambda expression in the `For` parameter that notifies the component for which property of the model the validation messages should render, just like with the standard `ValidationMessage` component.
24-
25-
>caption Enable Telerik Validation Message in a Form
23+
>caption Use Telerik Validation Message in a TelerikForm
2624
2725
````CSHTML
28-
@* Use the TelerikValidationMessage component to render validation messages and disable the built-in validation messages from the Telerik Form*@
29-
3026
@using System.ComponentModel.DataAnnotations
3127
32-
<TelerikForm Model="@customer" Width="600px" ValidationMessageType="@FormValidationMessageType.None">
28+
<TelerikForm Model="@customer" Width="600px"
29+
ValidationMessageType="@FormValidationMessageType.None">
3330
<FormValidation>
3431
<DataAnnotationsValidator />
3532
</FormValidation>
@@ -66,15 +63,14 @@ To enable Telerik Validation Messages for a field in the form you should provide
6663
}
6764
````
6865

69-
>caption The result from the code snippet above
66+
## Using Validation Message with EditForm
7067

71-
![Messages Basic Example](images/messages-example.png)
68+
1. Replace the `<ValidationMessage>` tags with `<TelerikValidationMessage>` tags.
69+
1. Provide a lambda expression in the `For` parameter that sets the associated property of the model, just like with the standard Blazor `ValidationMessage` component.
7270

73-
>caption Enable Telerik Validation Message in an EditForm
71+
>caption Use Telerik ValidationMessage in an EditForm
7472
7573
````CSHTML
76-
@* Enable the Telerik Validation Message in the standard EditForm *@
77-
7874
@using System.ComponentModel.DataAnnotations
7975
8076
<EditForm Model="@customer" width="600px">
@@ -110,20 +106,14 @@ To enable Telerik Validation Messages for a field in the form you should provide
110106
public string EmailAddress { get; set; }
111107
}
112108
}
113-
114109
````
115110

116-
>caption The result from the code snippet above
117-
118-
![Summary Basic Example](images/validation-message-in-editform.png)
119-
120-
121111
## Template
122112

123-
Allows you to control the rendering of the validation messages. The `context` represents an `IEnumerable<string>` collection of all messages for the property.
113+
The `TelerikValidationMessage` allows you to control its rendering via a nested `<Template>` tag. The `context` represents an `IEnumerable<string>` collection of all messages for this model property.
124114

125115
````CSHTML
126-
@* Use the Template to customize the rendering of the validation message *@
116+
@using System.ComponentModel.DataAnnotations
127117
128118
<style>
129119
.custom-validation-message {
@@ -132,9 +122,8 @@ Allows you to control the rendering of the validation messages. The `context` re
132122
}
133123
</style>
134124
135-
@using System.ComponentModel.DataAnnotations
136-
137-
<TelerikForm Model="@customer" Width="600px" ValidationMessageType="@FormValidationMessageType.None">
125+
<TelerikForm Model="@customer" Width="600px"
126+
ValidationMessageType="@FormValidationMessageType.None">
138127
<FormValidation>
139128
<DataAnnotationsValidator />
140129
</FormValidation>
@@ -184,18 +173,15 @@ Allows you to control the rendering of the validation messages. The `context` re
184173
}
185174
}
186175
````
187-
>caption The result from the code snippet above
188-
189-
![Messages Template example](images/messages-template-example.png)
190176

191177
## Class
192178

193-
You can use the `Class` parameter to add a custom CSS class to the `k-form-error` span, that wraps the validation message.
179+
Use the `Class` parameter of the Validation Message to add a custom CSS class to the `span.k-form-error`. This element holds the validation message.
194180

195-
This example adds a custom class and styling to the third message - for the Email Address.
181+
>caption Using TelerikValidationMessage Class for EmailAddress.
196182
197183
````CSHTML
198-
@* Use the Class parameter to change the font of the validation message *@
184+
@using System.ComponentModel.DataAnnotations
199185
200186
<style>
201187
.my-email-message {
@@ -205,9 +191,8 @@ This example adds a custom class and styling to the third message - for the Emai
205191
}
206192
</style>
207193
208-
@using System.ComponentModel.DataAnnotations
209-
210-
<TelerikForm Model="@customer" Width="600px" ValidationMessageType="@FormValidationMessageType.None">
194+
<TelerikForm Model="@customer" Width="600px"
195+
ValidationMessageType="@FormValidationMessageType.None">
211196
<FormValidation>
212197
<DataAnnotationsValidator />
213198
</FormValidation>
@@ -244,14 +229,13 @@ This example adds a custom class and styling to the third message - for the Emai
244229
}
245230
````
246231

247-
>caption The result from the code snippet above
232+
## Next Steps
248233

249-
![Messages Class example](images/messages-class-example.png)
234+
* Explore [TelerikValidationTooltip]({%slug validation-tools-tooltip%})
250235

251236
## See Also
252237

253238
* [Live Demo: Validation](https://demos.telerik.com/blazor-ui/validation/overview)
254239
* [TelerikValidationSummary]({%slug validation-tools-summary%})
255240
* [TelerikValidationTooltip]({%slug validation-tools-tooltip%})
256241
* [Form Component]({%slug form-overview%})
257-

0 commit comments

Comments
 (0)