Document the validation tools (#241)

* chore(validation): inital commit

* chore(validator-helpers): overview article and new idea of articles

* chore(validation-helpers):overview article improvements

* chore(validation-tools): fix slugs; rename helpers to tools

* chore(validation-tools): messages article

* chore(validation-tools): summary article

* chore(validation-tools): fix slugs

* chore(validation-tools): overview fixes

* chore(validation-tools): add the tooltip article

* chore(validation-tools): minor improvements

* chore(validation-tools): add the validation tools to the config file

* chore(kb): update the validation error in tooltip kb article

* chore(form): notes on validation

* chore(validators): minor tweaks

* chore(validators): edit form example for summary

* chore(validators): minor fixes on screenshots, example for edit form

* chore(validators): tooltip tweaks; editform example

* chore(kb): minor tweaks on validationmessage as tooltip kb

Co-authored-by: Marin Bratanov <[email protected]>

Author: svdimitr

_config.yml

@@ -333,6 +333,8 @@ navigation:
         title: "TreeMap"
      "*upload":
         title: "Upload"
+     "*validation":
+        title: "Validation Tools"
      "*validator":
         title: "Validator"
      "*window":
@@ -448,6 +450,7 @@ intro_columns:
       "Notification": "notification-overview"
       "Splitter": "splitter-overview"
       "Form": "form-overview"
+      "Validation Tools": "validation-tools-overview"
   -
     title: "Scheduling"
     items:

components/form/formitems/template.md

@@ -8,11 +8,11 @@ published: True
 position: 5
 ---
 
-# FormItem Template
+# FormItem Template - Custom Editors
 
 You can provide your own custom editors instead of the [default editors the form can generate]({%slug form-overview%}#automatic-generation-of-fields). To do that, use the the `Template` of the [FormItem]({%slug form-formitems%}).
 
-When the Template is used, the built-in validation messages from the Form will not be rendered. Instead you can use the [Telerik Validation tools]({%slug validation-tools-overview%}) to provide validation messages, or any other suitable component.
+When the Template is used, the built-in validation messages from the Form will not be rendered. Instead you can use the [Telerik Validation tools]({%slug validation-tools-overview%}) to provide validation messages, or any other suitable component such as the `ValidationMessage` that comes with the framework.
 
 In this article you can find the following examples:
 

components/form/overview.md

@@ -14,14 +14,16 @@ The Form for Blazor allows you to generate a form based on your model and to man
 
 #### This article is separated in the following sections:
 
+
 * [Use the Telerik Form for Blazor with a model](#use-the-telerik-form-for-blazor-with-a-model)
 * [Use the Telerik Form for Blazor with an EditContext](#use-the-telerik-form-for-blazor-with-an-editcontext)
+* [Component Reference](#component-reference)
 * [Automatic Generation of fields](#automatic-generation-of-fields)
 * [Data Annotation Attributes](#data-annotation-attributes)
 * [Features](#features)
 
 
-## Use the Telerik Form for Blazor with a model
+## Use the Telerik Form for Blazor With a Model
 
 To use the Form component with a model: 
 
@@ -66,7 +68,7 @@ To use the Form component with a model:
 
 ![Form Basic Example](images/form-basic-example.png)
 
-## Use the Telerik Form for Blazor with an EditContext
+## Use the Telerik Form for Blazor With an EditContext
 
 The Telerik Form for Blazor can utilize the <a href="https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editcontext?view=aspnetcore-5.0">EditContext class</a>. You can use the events and methods provided by the EditContext to provide custom business logic. 
 
@@ -121,7 +123,9 @@ To use the Form component with an EditContext:
 ![Form Basic Example](images/form-basic-example.png)
 
 
-#### Component Reference
+## Component Reference
+
+The component reference provides you with access to the `EditContext` object that the form will generate when you pass a `Model` to it. It could be useful to, for example, re-attach validation when you change the model - `FormReference.EditContext.AddDataAnnotationsValidation()`.
 
 >caption Get a reference to the Telerik Form for Blazor 
 

components/form/validation.md

@@ -58,6 +58,8 @@ To enable validation in the Telerik Form for Blazor add the `<FormValidation>` t
 }
 ````
 
+When you provide an `EditContext` to the form, you cold use its `AddDataAnnotationsValidation()` method to add the data annotation validation to the form, instead of using the markup. This can be useful when you will be changing the model the form is bound to at runtime, for example, when you [add a reset button]({%slug form-formitems-buttons%}#how-to-add-a-reset-clear-button-to-the-form). Alternatively, you could call this method to re-attach validation on the `Model` you pass when you change it by using the [reference to the Form component]({%slug form-overview%}#component-reference) - `TheFormReference.EditContext.AddDataAnnotationsValidation()`.
+
 ## Validation Message Type
 
 With the `ValidationMessageType` parameter of the Telerik Form for Blazor you can customize the way the validation messages are presented to the user. This setting accepts a member of the `FormValidationMessageType` enum: