docs(Validation): Revamp Validation components documentation and examples

Author: dimodi

components/validation/message.md

@@ -10,7 +10,7 @@ position: 15
 
 # Telerik Validation Message for Blazor
 
-The <a href = "https://www.telerik.com/blazor-ui/validation-message" target="_blank">Telerik Validation Message for Blazor</a> adds built-in styling and customization options on top of the standard [.NET ValidationMessage](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.validationmessage-1), such as [`Template`](#template) and [`Class`](#class) parameters.
+The [Telerik Validation Message for Blazor](https://www.telerik.com/blazor-ui/validation-message) adds built-in styling and customization options on top of the standard [.NET ValidationMessage](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.validationmessage-1), such as [`Template`](#template) and [`Class`](#class) parameters.
 
 ## Basics
 
@@ -49,7 +49,7 @@ The Telerik Form [displays inline validation messages by default if validation i
 
 * Use [form item templates](slug:form-formitems-template). In this case, [add the validation message in the form item template](slug:form-formitems-template#example).
 * Customize the validation messages, for example, change their rendering with a [validation message template](#template). In this case, add the validation message inside a [Form item template](slug:form-formitems-template#example).
-* Customize the placement of the validation messages in the Form, so that they are outside the Form item containers. In this case, consider a [`<FormItemsTemplate>`](slug:form-formitems-formitemstemplate) that gives you full control over the Form rendering between the form items. Alternatively, consider a [`<TelerikValidationSummary />`](slug:validation-tools-summary).
+* Customize the placement of the validation messages in the Form, so that they are outside the Form item containers. In this case, consider a [`<FormItemsTemplate>`](slug:form-formitems-formitemstemplate) that gives you full control over the Form rendering between the form items. Alternatively, consider a [Telerik ValidationSummary](slug:validation-tools-summary).
 
 >caption Use Telerik ValidationMessage in a TelerikForm
 
@@ -59,7 +59,7 @@ The Telerik Form [displays inline validation messages by default if validation i
 <TelerikForm Model="@Employee"
              Width="300px">
     <FormValidation>
-        <DataAnnotationsValidator></DataAnnotationsValidator>
+        <DataAnnotationsValidator />
     </FormValidation>
     <FormItems>
         <FormItem Field="@nameof(Person.FirstName)" LabelText="First Name">
@@ -135,15 +135,17 @@ In an existing Blazor `EditForm`, replace the `<ValidationMessage>` tags with `<
 
 ## Template
 
-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.
+The Telerik ValidationMessage allows you to customize its rendering with a nested `<Template>` tag. The template `context` is an `IEnumerable<string>` collection of all messages for the validated model property.
+
+>caption Using ValidationMessage Template
 
 ````RAZOR
 @using System.ComponentModel.DataAnnotations
 
 <TelerikForm Model="@Employee"
              Width="300px">
     <FormValidation>
-        <DataAnnotationsValidator></DataAnnotationsValidator>
+        <DataAnnotationsValidator />
     </FormValidation>
     <FormItems>
         <FormItem Field="@nameof(Person.FirstName)" LabelText="First Name">
@@ -213,7 +215,6 @@ Use the `Class` parameter of the Validation Message to add a custom CSS class to
 ## See Also
 
 * [Live Demo: Validation](https://demos.telerik.com/blazor-ui/validation/overview)
-* [TelerikValidationSummary](slug:validation-tools-summary)
-* [TelerikValidationTooltip](slug:validation-tools-tooltip)
-* [Form Component](slug:form-overview)
 * [Validate Inputs in Child Components](slug:inputs-kb-validate-child-component)
+* [Telerik ValidationSummary](slug:validation-tools-summary)
+* [Telerik ValidationTooltip](slug:validation-tools-tooltip)

components/validation/overview.md

@@ -10,122 +10,30 @@ position: 0
 
 # Blazor Validation Tools Overview
 
-Telerik UI for Blazor provides different ways to show and customize validation messages. The validation tools can be used together with the [Telerik Form](slug:form-overview) or with any form that provides an [`EditContext`](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editcontext) like the [standard .NET `EditForm`](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform).
+Telerik UI for Blazor provides different ways to show and customize validation messages. The validation tools can be used together with the [Telerik Form](slug:form-overview) or with any form that provides an [`EditContext`](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editcontext) like the [standard Blazor `EditForm`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform).
 
 @[template](/_contentTemplates/common/form-validation.md#note-validation)
 
 ## Validation Tools
 
-Telerik provides the following validation tools to help you style your form validation:
+Telerik UI for Blazor provides the following validation tools to help you style your form validation:
 
 * [Validation Summary](slug:validation-tools-summary)
 * [Validation Message](slug:validation-tools-message)
 * [Validation Tooltip](slug:validation-tools-tooltip)
 
-These components add customization options on top of the standard validation tools the frameworks provides - `ValidationSummary` and `ValidationMessage`
+These components add default styling and customization options on top of the standard Blazor validation tools `ValidationSummary` and `ValidationMessage`.
 
-## Integration with the TelerikForm
-
-You can seamlessly integrate the validation tools with the [Form Component](slug:form-overview). To avoid duplication of validation messages, set the [ValidationMessageType](slug:form-overview#form-parameters) parameter of the form to `FormValidationMessageType.None`. You can also use the validation components in [templates with custom editors](slug:form-formitems-template) that you can define with your own code.
-
-````RAZOR
-@* Disable the default validation messages from the Telerik Form and use the validation tools instead *@
-
-@using System.ComponentModel.DataAnnotations
-
-<TelerikForm Model="@person" ValidationMessageType="@FormValidationMessageType.None">
-    <FormValidation>
-        <DataAnnotationsValidator />
-        <TelerikValidationSummary />
-    </FormValidation>
-
-    <FormItems>
-        <FormItem LabelText="Name" Field="@nameof(Person.Name)" Hint="This editor uses TelerikValidationTooltip" Id="NameFieldVsalidationTooltip" />
-        <TelerikValidationTooltip For="@( () => person.Name)" TargetSelector="#NameFieldVsalidationTooltip" />
-
-        <FormItem LabelText="Age" Field="@nameof(Person.Age)" Hint="This editor uses TelerikValidationMessage" />
-        <TelerikValidationMessage For="@( () => person.Age)" />
-
-        <FormItem LabelText="Married" Field="@nameof(Person.IsMarried)" Hint="This editor uses TelerikValidationTooltip" Id="IsMarriedFieldValidationTooltip" />
-        <TelerikValidationTooltip For="@( () => person.IsMarried)" TargetSelector="#IsMarriedFieldValidationTooltip" />
-    </FormItems>
-</TelerikForm>
-
-@code {
-    Person person = new Person();
-
-    public class Person
-    {
-        [Required]
-        public string Name { get; set; }
-
-        [Required]
-        [Range(10,150, ErrorMessage ="The age should be between 10 and 150")]
-        public int? Age { get; set; }
-
-        [Required]
-        public bool IsMarried { get; set; }
-    }
-}
-````
-
-## Integration with the Microsoft EditForm
-
-````RAZOR
-@using System.ComponentModel.DataAnnotations
-
-<EditForm Model="@person">
-    <DataAnnotationsValidator />
-
-    <TelerikValidationSummary />
-
-    <p>
-        <label for="NameFieldId">Name</label>
-        <TelerikTextBox @bind-Value="@person.Name" Id="NameFieldId"></TelerikTextBox>
-        <TelerikValidationTooltip For="@( () => person.Name)" TargetSelector="#NameFieldId" />
-    </p>
-
-    <p>
-        <label for="AgeFieldId">Age</label>
-        <TelerikNumericTextBox @bind-Value="@person.Age" Id="AgeFieldId"></TelerikNumericTextBox>
-        <TelerikValidationMessage For="@( () => person.Age)" />
-    </p>
-
-    <p>
-        <label for="IsMarriedFieldId">Is Married</label>
-        <TelerikCheckBox @bind-Value="@person.IsMarried" Id="IsMarriedFieldId"></TelerikCheckBox>
-        <TelerikValidationTooltip For="@( () => person.IsMarried)" TargetSelector="#IsMarriedFieldId" />
-    </p>
-
-    <TelerikButton ButtonType="ButtonType.Submit">Submit</TelerikButton>
-</EditForm>
-
-@code {
-    Person person = new Person();
-
-    public class Person
-    {
-        [Required]
-        public string Name { get; set; }
-
-        [Required]
-        [Range(10, 150, ErrorMessage = "The age should be between 10 and 150")]
-        public int? Age { get; set; }
-
-        [Required]
-        public bool IsMarried { get; set; }
-    }
-}
-````
+The validation components must receive an `EditContext` instance as a cascading parameter, so they can reside in a [Telerik Form](slug:form-overview) or a standard Blazor `EditForm`.
 
 @[template](/_contentTemplates/common/form-validation.md#note-editcontext-formitem-template)
 
 @[template](/_contentTemplates/common/form-validation.md#note-telerik-role-in-validation)
 
 # Next Steps
 
-* Explore [TelerikValidationSummary](slug:validation-tools-summary)
-* Use [TelerikValidationMessage](slug:validation-tools-message)
+* Use [TelerikValidationSummary](slug:validation-tools-summary)
+* Explore [TelerikValidationMessage](slug:validation-tools-message)
 * Try [TelerikValidationTooltip](slug:validation-tools-tooltip)
 
 ## See Also