From 250fdbffc5dacedff64a586f67d96df2393b033c Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Wed, 17 Feb 2021 13:32:30 +0200 Subject: [PATCH 01/18] chore(validation): inital commit --- components/validation/overview.md | 154 ++++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 components/validation/overview.md diff --git a/components/validation/overview.md b/components/validation/overview.md new file mode 100644 index 0000000000..191e5ba0c1 --- /dev/null +++ b/components/validation/overview.md @@ -0,0 +1,154 @@ +--- +title: Overview +page_title: Validation Helpers - Overview +description: Overview of the Validation Helpers for Blazor. +slug: validation-helpers-overview +tags: telerik,blazor,validation,helpers,overview +published: True +position: 0 +--- + +# Validation Helpers Overview + +The Telerik UI for Blazor provides different ways to customize the validation messages. They can be used together with the [Telerik Form]({%slug form-overview%}) or with any form that provides an EditContext + +#### To use a Telerik Switch for Blazor + +1. add the `TelerikSwitch` tag +1. provide `Value` (one-way data binding) or `bind-Value` (two-way data binding) property + + +>caption Basic setup of the Telerik Switch using two-way data binding + +````CSHTML +@* Basic setup of the Telerik Switch Component *@ + + + +@code { + private bool isSelected { get; set; } +} +```` + +>caption The result from the code snippet above + +![Telerik Switch Component](images/swtich-first-look.gif) + +## Features + +The Switch provides the following features: + +* `Class` - the CSS class that will be rendered on the main wrapping element of the Switch. + +* `Enabled` - whether the component is enabled. + +* `Id` - renders as the `id` attribute on the wrapping `` element of the component. + +* `Width` - the width of the component. + +* `TabIndex` - the `tabindex` attribute rendered on the Switch. + +* `Value` and `bind-Value` - accept `bool` and `bool?` data types. + +* `OnLabel` - the label of the component when the `Value` is `true`. + +* `OffLabel` - the label of the component when the `Value` is `false`. + +* Events - see the [Switch events]({%slug switch-events%}) article for more information and examples. + +* Validation - see the [Input Validation]({%slug common-features/input-validation%}) article for more details. + +## Component Reference + +The Switch is a generic component and its type comes from the model field it is bound to - it is either `bool` or `bool?` (a `null` value is treated as `false`). + +>caption Switch Reference + +````CSHTML +@* The Switch reference type comes from its Value type *@ + + + +@code{ + bool toggleSwitch { get; set; } // the type of this field determines the type of the reference + TelerikSwitch TheSwitchRef { get; set; } +} +```` + +## Examples + +This section shows the following two examples + +* [Remove Labels](#remove-labels) +* [Custom Labels and Size](#custom-labels-and-size) + + +### Remove Labels + +>caption Switch without labels + +````CSHTML +@* Use a blank space to remove visible labels *@ + + + +@code { + private bool isSelected { get; set; } +} +```` + +### Custom Labels and Size + +The example below shows how to: + +* Bind the switch to a value +* Set custom labels for its On and Off states +* Use the `Width` parameter to control the size of the component + +>caption Example that showcases the "I agree to the terms and conditions" basic scenario + +````CSHTML +@* Use the OnLabel and OffLabel to customize the labels of the Switch. Use the Width parameter to manipulate the width of the component. *@ + +

Terms and conditions

+ +@if (hasAgreed) +{ +
+ Thank you for agreeing to our terms and conditions! +
+} +else +{ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi lectus, ultrices sed libero et, tempor rutrum mauris. Praesent sit amet suscipit leo, ut hendrerit lacus. Mauris posuere, mi in elementum pretium, sem elit maximus mauris, ac tempus turpis nunc sed orci. Nunc velit lacus, rutrum et dui mattis, condimentum fermentum velit. Pellentesque et elit rhoncus, sodales nibh ac, faucibus tellus. Vestibulum vitae tempor tellus. Sed maximus sem quis est posuere, efficitur porttitor augue tincidunt. Sed viverra dapibus ullamcorper. Vestibulum ex arcu, molestie sed quam vulputate, aliquet cursus lectus. Aenean sollicitudin condimentum fringilla. Integer arcu justo, sollicitudin ut libero ut, posuere finibus sapien. Suspendisse hendrerit convallis urna. + Donec eu sodales dui, et consequat massa. Integer vitae euismod dui, id rhoncus tellus. Ut luctus leo eget sapien eleifend facilisis. Duis sed maximus tortor. Ut nunc nibh, pulvinar a enim eget, mattis sagittis sem. Mauris odio nibh, aliquet a erat sit amet. +

+} + + + +I agree to the terms and conditions + +@code { + public bool hasAgreed { get; set; } + public string myOnLabel { get; set; } = "Agree"; + public string myOffLabel { get; set; } = "Disagree"; +} +```` +>caption The result from the code snippet above + +![agree to terms and conditions](images/switch-terms-and-conditions-example.gif) + + +## See Also +* [Live Demo: Switch](https://demos.telerik.com/blazor-ui/switch/overview) +* [Switch Events]({%slug switch-events%}) + From 03d5fe48fc21942915751974c50ce0f411431175 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Wed, 17 Feb 2021 17:52:47 +0200 Subject: [PATCH 02/18] chore(validator-helpers): overview article and new idea of articles --- components/validation/message.md | 132 +++++++++++++++++++++ components/validation/overview.md | 184 +++++++++++++----------------- components/validation/summary.md | 132 +++++++++++++++++++++ components/validation/tooltip.md | 132 +++++++++++++++++++++ 4 files changed, 477 insertions(+), 103 deletions(-) create mode 100644 components/validation/message.md create mode 100644 components/validation/summary.md create mode 100644 components/validation/tooltip.md diff --git a/components/validation/message.md b/components/validation/message.md new file mode 100644 index 0000000000..57ec411222 --- /dev/null +++ b/components/validation/message.md @@ -0,0 +1,132 @@ +--- +title: Overview +page_title: Validation Helpers - Overview +description: Overview of the Validation Helpers for Blazor. +slug: validation-helpers-overview +tags: telerik,blazor,validation,helpers,overview +published: True +position: 0 +--- + +# Validation Helpers Overview + +The Telerik UI for Blazor provides different ways to customize the validation messages. They can be used together with the [Telerik Form]({%slug form-overview%}) or with any form that provides an EditContext like the EditForm provided from the framework. + +## TelerikValidationSummary + +The `TelerikValidationSummary` extends the `ValidationSummary` class provided by the framework. It exposes a [Template]({%slug validation-helpers-summary-template%}) and []({%slug validation-helpers-summary-appearance%}). + +## Validation Helpers + +* [TelerikValidationSummary]({%slug validation-helpers-summary%}) +* [TelerikValidationMessage]({%slug validation-helpers-message%}) +* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) + +## Integration + +* [Integration with the TelerikForm](#integration-with-the-telerikform) +* [Integration with the Microsoft EditForm](#integration-with-the-microsoft-editform) + +### Integration with the TelerikForm + +You can seamlessly integrate the validation helpers with the [Form Component]({%slug form-overview%}). In order to avoid doubling of validation message you should set the [ValidationMessageType]({%slug form-overview%}#features) parameter to `FormValidationMessageType.None`. + +````CSHTML +@* Disable the default validation messages from the Telerik Form and use the validation helpers instead *@ + +@using System.ComponentModel.DataAnnotations + + + + + + + + + + + + + + + + + + +@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 + +````CSHTML +@* Use the Telerik Validation Helpers inside an EditForm *@ + +@using System.ComponentModel.DataAnnotations + + + + + + +

+ + + +

+ +

+ + + +

+ +

+ + + +

+ + Submit + + +@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; } + } +} +```` + +## See Also + +* [Live Demo: Validation](https://demos.telerik.com/blazor-ui/validation/overview) +* [TelerikValidationSummary]({%slug validation-helpers-summary%}) +* [TelerikValidationMessage]({%slug validation-helpers-message%}) +* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) +* [Form Component]({%slug form-overview%}) + diff --git a/components/validation/overview.md b/components/validation/overview.md index 191e5ba0c1..57ec411222 100644 --- a/components/validation/overview.md +++ b/components/validation/overview.md @@ -10,145 +10,123 @@ position: 0 # Validation Helpers Overview -The Telerik UI for Blazor provides different ways to customize the validation messages. They can be used together with the [Telerik Form]({%slug form-overview%}) or with any form that provides an EditContext +The Telerik UI for Blazor provides different ways to customize the validation messages. They can be used together with the [Telerik Form]({%slug form-overview%}) or with any form that provides an EditContext like the EditForm provided from the framework. -#### To use a Telerik Switch for Blazor +## TelerikValidationSummary -1. add the `TelerikSwitch` tag -1. provide `Value` (one-way data binding) or `bind-Value` (two-way data binding) property +The `TelerikValidationSummary` extends the `ValidationSummary` class provided by the framework. It exposes a [Template]({%slug validation-helpers-summary-template%}) and []({%slug validation-helpers-summary-appearance%}). +## Validation Helpers ->caption Basic setup of the Telerik Switch using two-way data binding +* [TelerikValidationSummary]({%slug validation-helpers-summary%}) +* [TelerikValidationMessage]({%slug validation-helpers-message%}) +* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) -````CSHTML -@* Basic setup of the Telerik Switch Component *@ - - - -@code { - private bool isSelected { get; set; } -} -```` - ->caption The result from the code snippet above - -![Telerik Switch Component](images/swtich-first-look.gif) - -## Features +## Integration -The Switch provides the following features: +* [Integration with the TelerikForm](#integration-with-the-telerikform) +* [Integration with the Microsoft EditForm](#integration-with-the-microsoft-editform) -* `Class` - the CSS class that will be rendered on the main wrapping element of the Switch. +### Integration with the TelerikForm -* `Enabled` - whether the component is enabled. +You can seamlessly integrate the validation helpers with the [Form Component]({%slug form-overview%}). In order to avoid doubling of validation message you should set the [ValidationMessageType]({%slug form-overview%}#features) parameter to `FormValidationMessageType.None`. -* `Id` - renders as the `id` attribute on the wrapping `` element of the component. - -* `Width` - the width of the component. - -* `TabIndex` - the `tabindex` attribute rendered on the Switch. - -* `Value` and `bind-Value` - accept `bool` and `bool?` data types. - -* `OnLabel` - the label of the component when the `Value` is `true`. +````CSHTML +@* Disable the default validation messages from the Telerik Form and use the validation helpers instead *@ -* `OffLabel` - the label of the component when the `Value` is `false`. +@using System.ComponentModel.DataAnnotations -* Events - see the [Switch events]({%slug switch-events%}) article for more information and examples. + + + + -* Validation - see the [Input Validation]({%slug common-features/input-validation%}) article for more details. + + + -## Component Reference + + -The Switch is a generic component and its type comes from the model field it is bound to - it is either `bool` or `bool?` (a `null` value is treated as `false`). + + + + ->caption Switch Reference +@code { + Person person = new Person(); -````CSHTML -@* The Switch reference type comes from its Value type *@ + 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; } -@code{ - bool toggleSwitch { get; set; } // the type of this field determines the type of the reference - TelerikSwitch TheSwitchRef { get; set; } + [Required] + public bool IsMarried { get; set; } + } } ```` -## Examples - -This section shows the following two examples - -* [Remove Labels](#remove-labels) -* [Custom Labels and Size](#custom-labels-and-size) - - -### Remove Labels - ->caption Switch without labels +### Integration with the Microsoft EditForm ````CSHTML -@* Use a blank space to remove visible labels *@ +@* Use the Telerik Validation Helpers inside an EditForm *@ - +@using System.ComponentModel.DataAnnotations -@code { - private bool isSelected { get; set; } -} -```` + + -### Custom Labels and Size + -The example below shows how to: +

+ + + +

-* Bind the switch to a value -* Set custom labels for its On and Off states -* Use the `Width` parameter to control the size of the component +

+ + + +

->caption Example that showcases the "I agree to the terms and conditions" basic scenario +

+ + + +

-````CSHTML -@* Use the OnLabel and OffLabel to customize the labels of the Switch. Use the Width parameter to manipulate the width of the component. *@ + Submit + -

Terms and conditions

+@code { + Person person = new Person(); -@if (hasAgreed) -{ -
- Thank you for agreeing to our terms and conditions! -
-} -else -{ -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi lectus, ultrices sed libero et, tempor rutrum mauris. Praesent sit amet suscipit leo, ut hendrerit lacus. Mauris posuere, mi in elementum pretium, sem elit maximus mauris, ac tempus turpis nunc sed orci. Nunc velit lacus, rutrum et dui mattis, condimentum fermentum velit. Pellentesque et elit rhoncus, sodales nibh ac, faucibus tellus. Vestibulum vitae tempor tellus. Sed maximus sem quis est posuere, efficitur porttitor augue tincidunt. Sed viverra dapibus ullamcorper. Vestibulum ex arcu, molestie sed quam vulputate, aliquet cursus lectus. Aenean sollicitudin condimentum fringilla. Integer arcu justo, sollicitudin ut libero ut, posuere finibus sapien. Suspendisse hendrerit convallis urna. - Donec eu sodales dui, et consequat massa. Integer vitae euismod dui, id rhoncus tellus. Ut luctus leo eget sapien eleifend facilisis. Duis sed maximus tortor. Ut nunc nibh, pulvinar a enim eget, mattis sagittis sem. Mauris odio nibh, aliquet a erat sit amet. -

-} + public class Person + { + [Required] + public string Name { get; set; } - - -I agree to the terms and conditions + [Required] + [Range(10, 150, ErrorMessage = "The age should be between 10 and 150")] + public int? Age { get; set; } -@code { - public bool hasAgreed { get; set; } - public string myOnLabel { get; set; } = "Agree"; - public string myOffLabel { get; set; } = "Disagree"; + [Required] + public bool IsMarried { get; set; } + } } ```` ->caption The result from the code snippet above - -![agree to terms and conditions](images/switch-terms-and-conditions-example.gif) - ## See Also -* [Live Demo: Switch](https://demos.telerik.com/blazor-ui/switch/overview) -* [Switch Events]({%slug switch-events%}) + +* [Live Demo: Validation](https://demos.telerik.com/blazor-ui/validation/overview) +* [TelerikValidationSummary]({%slug validation-helpers-summary%}) +* [TelerikValidationMessage]({%slug validation-helpers-message%}) +* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) +* [Form Component]({%slug form-overview%}) diff --git a/components/validation/summary.md b/components/validation/summary.md new file mode 100644 index 0000000000..57ec411222 --- /dev/null +++ b/components/validation/summary.md @@ -0,0 +1,132 @@ +--- +title: Overview +page_title: Validation Helpers - Overview +description: Overview of the Validation Helpers for Blazor. +slug: validation-helpers-overview +tags: telerik,blazor,validation,helpers,overview +published: True +position: 0 +--- + +# Validation Helpers Overview + +The Telerik UI for Blazor provides different ways to customize the validation messages. They can be used together with the [Telerik Form]({%slug form-overview%}) or with any form that provides an EditContext like the EditForm provided from the framework. + +## TelerikValidationSummary + +The `TelerikValidationSummary` extends the `ValidationSummary` class provided by the framework. It exposes a [Template]({%slug validation-helpers-summary-template%}) and []({%slug validation-helpers-summary-appearance%}). + +## Validation Helpers + +* [TelerikValidationSummary]({%slug validation-helpers-summary%}) +* [TelerikValidationMessage]({%slug validation-helpers-message%}) +* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) + +## Integration + +* [Integration with the TelerikForm](#integration-with-the-telerikform) +* [Integration with the Microsoft EditForm](#integration-with-the-microsoft-editform) + +### Integration with the TelerikForm + +You can seamlessly integrate the validation helpers with the [Form Component]({%slug form-overview%}). In order to avoid doubling of validation message you should set the [ValidationMessageType]({%slug form-overview%}#features) parameter to `FormValidationMessageType.None`. + +````CSHTML +@* Disable the default validation messages from the Telerik Form and use the validation helpers instead *@ + +@using System.ComponentModel.DataAnnotations + + + + + + + + + + + + + + + + + + +@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 + +````CSHTML +@* Use the Telerik Validation Helpers inside an EditForm *@ + +@using System.ComponentModel.DataAnnotations + + + + + + +

+ + + +

+ +

+ + + +

+ +

+ + + +

+ + Submit + + +@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; } + } +} +```` + +## See Also + +* [Live Demo: Validation](https://demos.telerik.com/blazor-ui/validation/overview) +* [TelerikValidationSummary]({%slug validation-helpers-summary%}) +* [TelerikValidationMessage]({%slug validation-helpers-message%}) +* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) +* [Form Component]({%slug form-overview%}) + diff --git a/components/validation/tooltip.md b/components/validation/tooltip.md new file mode 100644 index 0000000000..57ec411222 --- /dev/null +++ b/components/validation/tooltip.md @@ -0,0 +1,132 @@ +--- +title: Overview +page_title: Validation Helpers - Overview +description: Overview of the Validation Helpers for Blazor. +slug: validation-helpers-overview +tags: telerik,blazor,validation,helpers,overview +published: True +position: 0 +--- + +# Validation Helpers Overview + +The Telerik UI for Blazor provides different ways to customize the validation messages. They can be used together with the [Telerik Form]({%slug form-overview%}) or with any form that provides an EditContext like the EditForm provided from the framework. + +## TelerikValidationSummary + +The `TelerikValidationSummary` extends the `ValidationSummary` class provided by the framework. It exposes a [Template]({%slug validation-helpers-summary-template%}) and []({%slug validation-helpers-summary-appearance%}). + +## Validation Helpers + +* [TelerikValidationSummary]({%slug validation-helpers-summary%}) +* [TelerikValidationMessage]({%slug validation-helpers-message%}) +* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) + +## Integration + +* [Integration with the TelerikForm](#integration-with-the-telerikform) +* [Integration with the Microsoft EditForm](#integration-with-the-microsoft-editform) + +### Integration with the TelerikForm + +You can seamlessly integrate the validation helpers with the [Form Component]({%slug form-overview%}). In order to avoid doubling of validation message you should set the [ValidationMessageType]({%slug form-overview%}#features) parameter to `FormValidationMessageType.None`. + +````CSHTML +@* Disable the default validation messages from the Telerik Form and use the validation helpers instead *@ + +@using System.ComponentModel.DataAnnotations + + + + + + + + + + + + + + + + + + +@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 + +````CSHTML +@* Use the Telerik Validation Helpers inside an EditForm *@ + +@using System.ComponentModel.DataAnnotations + + + + + + +

+ + + +

+ +

+ + + +

+ +

+ + + +

+ + Submit + + +@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; } + } +} +```` + +## See Also + +* [Live Demo: Validation](https://demos.telerik.com/blazor-ui/validation/overview) +* [TelerikValidationSummary]({%slug validation-helpers-summary%}) +* [TelerikValidationMessage]({%slug validation-helpers-message%}) +* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) +* [Form Component]({%slug form-overview%}) + From 1a039f60f81578364c2ce9ba9dc0a25919449928 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Thu, 18 Feb 2021 11:44:19 +0200 Subject: [PATCH 03/18] chore(validation-helpers):overview article improvements --- components/validation/overview.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/components/validation/overview.md b/components/validation/overview.md index 57ec411222..c2b525ea33 100644 --- a/components/validation/overview.md +++ b/components/validation/overview.md @@ -12,9 +12,13 @@ position: 0 The Telerik UI for Blazor provides different ways to customize the validation messages. They can be used together with the [Telerik Form]({%slug form-overview%}) or with any form that provides an EditContext like the EditForm provided from the framework. -## TelerikValidationSummary -The `TelerikValidationSummary` extends the `ValidationSummary` class provided by the framework. It exposes a [Template]({%slug validation-helpers-summary-template%}) and []({%slug validation-helpers-summary-appearance%}). +* [TelerikValidationSummary](#telerikvalidationsummary) +* [Validation Helpers](#validation-helpers) +* [Integration](#integration) + * [Integration with the TelerikForm](#integration-with-the-telerikform) + * [Integration with the Microsoft EditForm](#integration-with-the-microsoft-editform) + ## Validation Helpers @@ -22,8 +26,12 @@ The `TelerikValidationSummary` extends the `ValidationSummary` class provided by * [TelerikValidationMessage]({%slug validation-helpers-message%}) * [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) +These components extend the standard validation tools the frameworks provides - `ValidationSummary` and `ValidationMessage` + ## Integration +Here are two examples of integrating the Telerik validation extenders with forms: + * [Integration with the TelerikForm](#integration-with-the-telerikform) * [Integration with the Microsoft EditForm](#integration-with-the-microsoft-editform) From fd3cc12a86ac29608ed7e1bca153f41d3b02eba5 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Feb 2021 11:42:09 +0200 Subject: [PATCH 04/18] chore(validation-tools): fix slugs; rename helpers to tools --- components/validation/message.md | 14 +++++++------- components/validation/overview.md | 32 +++++++++++++++---------------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/components/validation/message.md b/components/validation/message.md index 57ec411222..6a98fd5982 100644 --- a/components/validation/message.md +++ b/components/validation/message.md @@ -1,14 +1,14 @@ --- -title: Overview -page_title: Validation Helpers - Overview -description: Overview of the Validation Helpers for Blazor. -slug: validation-helpers-overview -tags: telerik,blazor,validation,helpers,overview +title: Message +page_title: Validation Tools - Message +description: Validation Tools - Message. +slug: validation-tools-message +tags: telerik,blazor,validation,tools,message published: True -position: 0 +position: 10 --- -# Validation Helpers Overview +# Telerik Validation Message for Blazor The Telerik UI for Blazor provides different ways to customize the validation messages. They can be used together with the [Telerik Form]({%slug form-overview%}) or with any form that provides an EditContext like the EditForm provided from the framework. diff --git a/components/validation/overview.md b/components/validation/overview.md index c2b525ea33..913bda5d2e 100644 --- a/components/validation/overview.md +++ b/components/validation/overview.md @@ -1,30 +1,30 @@ --- title: Overview -page_title: Validation Helpers - Overview -description: Overview of the Validation Helpers for Blazor. -slug: validation-helpers-overview -tags: telerik,blazor,validation,helpers,overview +page_title: Validation Tools - Overview +description: Overview of the Validation Tools for Blazor. +slug: validation-tools-overview +tags: telerik,blazor,validation,tools,overview published: True position: 0 --- -# Validation Helpers Overview +# Validation Tools Overview The Telerik UI for Blazor provides different ways to customize the validation messages. They can be used together with the [Telerik Form]({%slug form-overview%}) or with any form that provides an EditContext like the EditForm provided from the framework. * [TelerikValidationSummary](#telerikvalidationsummary) -* [Validation Helpers](#validation-helpers) +* [Validation Tools](#validation-tools) * [Integration](#integration) * [Integration with the TelerikForm](#integration-with-the-telerikform) * [Integration with the Microsoft EditForm](#integration-with-the-microsoft-editform) -## Validation Helpers +## Validation Tools -* [TelerikValidationSummary]({%slug validation-helpers-summary%}) -* [TelerikValidationMessage]({%slug validation-helpers-message%}) -* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) +* [TelerikValidationSummary]({%slug validation-tools-summary%}) +* [TelerikValidationMessage]({%slug validation-tools-message%}) +* [TelerikValidationTooltip]({%slug validation-tools-tooltip%}) These components extend the standard validation tools the frameworks provides - `ValidationSummary` and `ValidationMessage` @@ -37,10 +37,10 @@ Here are two examples of integrating the Telerik validation extenders with forms ### Integration with the TelerikForm -You can seamlessly integrate the validation helpers with the [Form Component]({%slug form-overview%}). In order to avoid doubling of validation message you should set the [ValidationMessageType]({%slug form-overview%}#features) parameter to `FormValidationMessageType.None`. +You can seamlessly integrate the validation tools with the [Form Component]({%slug form-overview%}). In order to avoid doubling of validation message you should set the [ValidationMessageType]({%slug form-overview%}#features) parameter to `FormValidationMessageType.None`. ````CSHTML -@* Disable the default validation messages from the Telerik Form and use the validation helpers instead *@ +@* Disable the default validation messages from the Telerik Form and use the validation tools instead *@ @using System.ComponentModel.DataAnnotations @@ -82,7 +82,7 @@ You can seamlessly integrate the validation helpers with the [Form Component]({% ### Integration with the Microsoft EditForm ````CSHTML -@* Use the Telerik Validation Helpers inside an EditForm *@ +@* Use the Telerik Validation tools inside an EditForm *@ @using System.ComponentModel.DataAnnotations @@ -133,8 +133,8 @@ You can seamlessly integrate the validation helpers with the [Form Component]({% ## See Also * [Live Demo: Validation](https://demos.telerik.com/blazor-ui/validation/overview) -* [TelerikValidationSummary]({%slug validation-helpers-summary%}) -* [TelerikValidationMessage]({%slug validation-helpers-message%}) -* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) +* [TelerikValidationSummary]({%slug validation-tools-summary%}) +* [TelerikValidationMessage]({%slug validation-tools-message%}) +* [TelerikValidationTooltip]({%slug validation-tools-tooltip%}) * [Form Component]({%slug form-overview%}) From 8e0536bfcc5e799e900e89a47a03c4c27f8c612d Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Feb 2021 13:47:50 +0200 Subject: [PATCH 05/18] chore(validation-tools): messages article --- .../images/messages-class-example.png | Bin 0 -> 7018 bytes .../validation/images/messages-example.png | Bin 0 -> 7535 bytes .../images/messages-template-example.png | Bin 0 -> 7386 bytes components/validation/message.md | 198 ++++++++++++------ 4 files changed, 134 insertions(+), 64 deletions(-) create mode 100644 components/validation/images/messages-class-example.png create mode 100644 components/validation/images/messages-example.png create mode 100644 components/validation/images/messages-template-example.png diff --git a/components/validation/images/messages-class-example.png b/components/validation/images/messages-class-example.png new file mode 100644 index 0000000000000000000000000000000000000000..1dd3a8e910c58d98dfdc9e3dd59385a61c5e5762 GIT binary patch literal 7018 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 literal 0 HcmV?d00001 diff --git a/components/validation/images/messages-example.png b/components/validation/images/messages-example.png new file mode 100644 index 0000000000000000000000000000000000000000..7f1e803b133f1e0e6f8288a4f2523300266eb1d0 GIT binary patch literal 7535 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 literal 0 HcmV?d00001 diff --git a/components/validation/images/messages-template-example.png b/components/validation/images/messages-template-example.png new file mode 100644 index 0000000000000000000000000000000000000000..4c9df22c9c41e22f05f1f33b2931fe153b43d03e GIT binary patch literal 7386 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 like the EditForm provided from the framework. +The Telerik Validation Message for Blazor adds customization options on top of the standard ValidationMessage provided by the framework such as a [Template](#template) or cascading CSS rules from the custom CSS class in the [Class](#class) parameter. -## TelerikValidationSummary +This article is separated in the following sections: -The `TelerikValidationSummary` extends the `ValidationSummary` class provided by the framework. It exposes a [Template]({%slug validation-helpers-summary-template%}) and []({%slug validation-helpers-summary-appearance%}). +* [Basics](#basics) +* [Template](#template) +* [Class](#class) -## Validation Helpers +## Basics -* [TelerikValidationSummary]({%slug validation-helpers-summary%}) -* [TelerikValidationMessage]({%slug validation-helpers-message%}) -* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) - -## Integration - -* [Integration with the TelerikForm](#integration-with-the-telerikform) -* [Integration with the Microsoft EditForm](#integration-with-the-microsoft-editform) - -### Integration with the TelerikForm +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. -You can seamlessly integrate the validation helpers with the [Form Component]({%slug form-overview%}). In order to avoid doubling of validation message you should set the [ValidationMessageType]({%slug form-overview%}#features) parameter to `FormValidationMessageType.None`. +>caption Enable Telerik Validation Message in a Form ````CSHTML -@* Disable the default validation messages from the Telerik Form and use the validation helpers instead *@ +@* Use the TelerikValidationMessage component to render validation messages and disable the built-in validation messages from the Telerik Form*@ @using System.ComponentModel.DataAnnotations - + - - + + - - + + - - + + @code { - Person person = new Person(); + private Customer customer = new Customer(); - public class Person + public class Customer { - [Required] - public string Name { get; set; } + [Required(ErrorMessage = "Please enter your name")] + [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")] + public string CustomerName { get; set; } - [Required] - [Range(10,150, ErrorMessage ="The age should be between 10 and 150")] - public int? Age { get; set; } + [Required(ErrorMessage = "Please enter your age")] + [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")] + public int CustomerAge { get; set; } - [Required] - public bool IsMarried { get; set; } + [Required(ErrorMessage = "Please enter your email")] + [EmailAddress(ErrorMessage = "Enter a valid email address")] + public string EmailAddress { get; set; } } } ```` -### Integration with the Microsoft EditForm +![Messages Basic Example](images/messages-example.png) + +## Template + +Allows you to control the rendering of the validation messages. The `context` represents an `IEnumerable` collection of all messages for the property. ````CSHTML -@* Use the Telerik Validation Helpers inside an EditForm *@ +@* Use the Template to customize the rendering of the validation message *@ + + @using System.ComponentModel.DataAnnotations - - + + + + + + + + + + + + + + + + + + + +@code { + private Customer customer = new Customer(); + + public class Customer + { + [Required(ErrorMessage = "Please enter your name")] + [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")] + public string CustomerName { get; set; } + + [Required(ErrorMessage = "Please enter your age")] + [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")] + public int CustomerAge { get; set; } + + [Required(ErrorMessage = "Please enter your email")] + [EmailAddress(ErrorMessage = "Enter a valid email address")] + public string EmailAddress { get; set; } + } +} +```` + +![Messages Template example](images/messages-template-example.png) + +## Class + +You can use the `Class` parameter to add a custom CSS class to the `k-form-error` span, that wraps the validation message. + +````CSHTML +@* Use the Class parameter to change the font of the validation message *@ + + - +@using System.ComponentModel.DataAnnotations -

- - - -

+ + + + -

- - - -

+ + + -

- - - -

+ + - Submit - + + + + @code { - Person person = new Person(); + private Customer customer = new Customer(); - public class Person + public class Customer { - [Required] - public string Name { get; set; } + [Required(ErrorMessage = "Please enter your name")] + [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")] + public string CustomerName { get; set; } - [Required] - [Range(10, 150, ErrorMessage = "The age should be between 10 and 150")] - public int? Age { get; set; } + [Required(ErrorMessage = "Please enter your age")] + [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")] + public int CustomerAge { get; set; } - [Required] - public bool IsMarried { get; set; } + [Required(ErrorMessage = "Please enter your email")] + [EmailAddress(ErrorMessage = "Enter a valid email address")] + public string EmailAddress { get; set; } } } ```` +![Messages Class example](images/messages-class-example.png) + ## See Also * [Live Demo: Validation](https://demos.telerik.com/blazor-ui/validation/overview) * [TelerikValidationSummary]({%slug validation-helpers-summary%}) -* [TelerikValidationMessage]({%slug validation-helpers-message%}) * [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) * [Form Component]({%slug form-overview%}) From 5bbb63b915d0827a8fb6b1b60faa98bb55bbb527 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Feb 2021 14:47:47 +0200 Subject: [PATCH 06/18] chore(validation-tools): summary article --- .../images/summary-class-example.png | Bin 0 -> 11429 bytes .../validation/images/summary-example.png | Bin 0 -> 9022 bytes .../images/summary-template-example.png | Bin 0 -> 7742 bytes components/validation/summary.md | 187 ++++++++++-------- 4 files changed, 109 insertions(+), 78 deletions(-) create mode 100644 components/validation/images/summary-class-example.png create mode 100644 components/validation/images/summary-example.png create mode 100644 components/validation/images/summary-template-example.png diff --git a/components/validation/images/summary-class-example.png b/components/validation/images/summary-class-example.png new file mode 100644 index 0000000000000000000000000000000000000000..75bff0d12d1538cb210d96313c21cba111727d50 GIT binary patch literal 11429 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 literal 0 HcmV?d00001 diff --git a/components/validation/images/summary-template-example.png b/components/validation/images/summary-template-example.png new file mode 100644 index 0000000000000000000000000000000000000000..ee46d6e41e4b5815ee57437184e35e1068f33578 GIT binary patch literal 7742 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 like the EditForm provided from the framework. +The Telerik Validation Summary for Blazor adds customization options on top of the standard ValidationSummary provided by the framework such as a [Template](#template) or cascading CSS rules from the custom CSS class in the [Class](#class) parameter. -## TelerikValidationSummary +This article is separated in the following sections: -The `TelerikValidationSummary` extends the `ValidationSummary` class provided by the framework. It exposes a [Template]({%slug validation-helpers-summary-template%}) and []({%slug validation-helpers-summary-appearance%}). +* [Basics](#basics) +* [Template](#template) +* [Class](#class) -## Validation Helpers +## Basics -* [TelerikValidationSummary]({%slug validation-helpers-summary%}) -* [TelerikValidationMessage]({%slug validation-helpers-message%}) -* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) +To enable Telerik Validation Summary in the form you should add the `` to the validation configuration part. -## Integration - -* [Integration with the TelerikForm](#integration-with-the-telerikform) -* [Integration with the Microsoft EditForm](#integration-with-the-microsoft-editform) - -### Integration with the TelerikForm - -You can seamlessly integrate the validation helpers with the [Form Component]({%slug form-overview%}). In order to avoid doubling of validation message you should set the [ValidationMessageType]({%slug form-overview%}#features) parameter to `FormValidationMessageType.None`. +>caption Enable Telerik Validation Summary in a Form ````CSHTML -@* Disable the default validation messages from the Telerik Form and use the validation helpers instead *@ +@* Enable the Telerik Validation Summary in the Telerik Form *@ @using System.ComponentModel.DataAnnotations - + + - - - - - - - - - - - @code { - Person person = new Person(); + private Customer customer = new Customer(); - public class Person + public class Customer { - [Required] - public string Name { get; set; } + [Required(ErrorMessage = "Please enter your name")] + [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")] + public string CustomerName { get; set; } - [Required] - [Range(10,150, ErrorMessage ="The age should be between 10 and 150")] - public int? Age { get; set; } + [Required(ErrorMessage = "Please enter your age")] + [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")] + public int CustomerAge { get; set; } - [Required] - public bool IsMarried { get; set; } + [Required(ErrorMessage = "Please enter your email")] + [EmailAddress(ErrorMessage = "Enter a valid email address")] + public string EmailAddress { get; set; } } } ```` -### Integration with the Microsoft EditForm +![Summary Basic Example](images/summary-example.png) + +## Template + +Allows you to control the rendering of the validation summary. The `context` represents an `IEnumerable` collection of all messages for the form. ````CSHTML -@* Use the Telerik Validation Helpers inside an EditForm *@ +@* Use the Template to customize the rendering of the validation summary *@ @using System.ComponentModel.DataAnnotations - - + + + + + + + + - +@code { + private Customer customer = new Customer(); -

- - - -

+ public class Customer + { + [Required(ErrorMessage = "Please enter your name")] + [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")] + public string CustomerName { get; set; } -

- - - -

+ [Required(ErrorMessage = "Please enter your age")] + [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")] + public int CustomerAge { get; set; } -

- - - -

+ [Required(ErrorMessage = "Please enter your email")] + [EmailAddress(ErrorMessage = "Enter a valid email address")] + public string EmailAddress { get; set; } + } +} +```` + +![Summary Template example](images/summary-template-example.png) + +## Class + +You can use the `Class` parameter to add a custom CSS class to the `k-validation-summary` div, that wraps the validation summary. - Submit - +````CSHTML +@* Use the Class parameter to change the background color of the validation summary *@ + + + +@using System.ComponentModel.DataAnnotations + + + + + + + @code { - Person person = new Person(); + private Customer customer = new Customer(); - public class Person + public class Customer { - [Required] - public string Name { get; set; } + [Required(ErrorMessage = "Please enter your name")] + [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")] + public string CustomerName { get; set; } - [Required] - [Range(10, 150, ErrorMessage = "The age should be between 10 and 150")] - public int? Age { get; set; } + [Required(ErrorMessage = "Please enter your age")] + [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")] + public int CustomerAge { get; set; } - [Required] - public bool IsMarried { get; set; } + [Required(ErrorMessage = "Please enter your email")] + [EmailAddress(ErrorMessage = "Enter a valid email address")] + public string EmailAddress { get; set; } } } ```` +![Summary Class example](images/summary-class-example.png) + ## See Also * [Live Demo: Validation](https://demos.telerik.com/blazor-ui/validation/overview) -* [TelerikValidationSummary]({%slug validation-helpers-summary%}) -* [TelerikValidationMessage]({%slug validation-helpers-message%}) -* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) +* [TelerikValidationMessage]({%slug validation-tools-message%}) +* [TelerikValidationTooltip]({%slug validation-tools-tooltip%}) * [Form Component]({%slug form-overview%}) From b4f83e936103d79621e1e4d995ac15f2eaa6aa53 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Feb 2021 14:48:56 +0200 Subject: [PATCH 07/18] chore(validation-tools): fix slugs --- components/validation/message.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/validation/message.md b/components/validation/message.md index 25d869e929..bb91a453ee 100644 --- a/components/validation/message.md +++ b/components/validation/message.md @@ -196,7 +196,7 @@ You can use the `Class` parameter to add a custom CSS class to the `k-form-error ## See Also * [Live Demo: Validation](https://demos.telerik.com/blazor-ui/validation/overview) -* [TelerikValidationSummary]({%slug validation-helpers-summary%}) -* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) +* [TelerikValidationSummary]({%slug validation-tools-summary%}) +* [TelerikValidationTooltip]({%slug validation-tools-tooltip%}) * [Form Component]({%slug form-overview%}) From 6a51eaa9929eb7320037ee1bd4deda8111ff13e3 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Feb 2021 14:50:03 +0200 Subject: [PATCH 08/18] chore(validation-tools): overview fixes --- components/validation/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/validation/overview.md b/components/validation/overview.md index 913bda5d2e..57b5224d42 100644 --- a/components/validation/overview.md +++ b/components/validation/overview.md @@ -26,7 +26,7 @@ The Telerik UI for Blazor provides different ways to customize the validation me * [TelerikValidationMessage]({%slug validation-tools-message%}) * [TelerikValidationTooltip]({%slug validation-tools-tooltip%}) -These components extend the standard validation tools the frameworks provides - `ValidationSummary` and `ValidationMessage` +These components adds customization options on top of the standard validation tools the frameworks provides - `ValidationSummary` and `ValidationMessage` ## Integration From 057f1af0f110cdab181e07c6550962ff29cd2574 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Feb 2021 15:41:51 +0200 Subject: [PATCH 09/18] chore(validation-tools): add the tooltip article --- .../images/tooltip-class-example.png | Bin 0 -> 6037 bytes .../validation/images/tooltip-example.png | Bin 0 -> 6129 bytes .../images/tooltip-position-example.png | Bin 0 -> 6198 bytes .../images/tooltip-template-example.png | Bin 0 -> 5425 bytes components/validation/tooltip.md | 265 +++++++++++++----- 5 files changed, 194 insertions(+), 71 deletions(-) create mode 100644 components/validation/images/tooltip-class-example.png create mode 100644 components/validation/images/tooltip-example.png create mode 100644 components/validation/images/tooltip-position-example.png create mode 100644 components/validation/images/tooltip-template-example.png diff --git a/components/validation/images/tooltip-class-example.png b/components/validation/images/tooltip-class-example.png new file mode 100644 index 0000000000000000000000000000000000000000..19028b5350ecacae07b6f030ce7e9e5b7c98a8f1 GIT binary patch literal 6037 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 |f_moAk##S#_ zS!KQ<_d)JqcFd3PGnkbnmKRbs9c?z&G%ZX;N@<)&yguQGX?U-*6*_+CcY;oQ-p?e#f_Ak2i8?O0J&;b=TZOw literal 0 HcmV?d00001 diff --git a/components/validation/images/tooltip-example.png b/components/validation/images/tooltip-example.png new file mode 100644 index 0000000000000000000000000000000000000000..ac852b80696dfde964acc5c009002f8beb727154 GIT binary patch literal 6129 zcmb_gc|6o>+yBuI_0?h8{0+?>GY4+xz>kZ=@08pOHv+Zz*z2}DMTLl0B zU(4Q)quuv6CjbzRHMn`>VTkP<%{ckT?TB{2dY<~+^;7yapKIDu>yIa$v%eJDWGxIm z{ENb>e*aV9%fEAR1pNg4rQBrkk$|U|*Gg1L&`+VNpkyxtM;YrgM9mN-^0DPz@DAG2 zDUCLpeImSOV<%tdUsUzrLLXPhe)lwmI0QP*R z&Oi`_H5<-akkNC)9bU@3lqGPL5ax?SIa{!((4c%6GvHo)n<7O193m(wo1hZwsUC0$ zupc^g8G`We$F8wc=8kJcgx0D-#yWWar^l9eHA^E3pZZe@vh z=xB`Yn|rb5nOTwt<@su-MKOab6uW`L0Ps{|QCh+cL<{7j7z%sw0#Q%=B=EkVQ+ozB z()o9M|Jhsr)`kBK;_6^CJk)&`sZ0d``^&3jmgK&myp;Oz-~#t}pMTK_0P@c@3j$GJ zxxfIRcn-n=d`^HJ0?u6hgGdpn^&4%A7m#LgHZ^?~wrgOi@Y~b*F;|0@#tgRJbNu}C z7chwH1B{Cz5tW7|V$JY2F0lRQ|C?MQ4_WZ~{K8W% z16(!~asMPJ7&GW{8a!@9oRB!jdhR*?-1`<8?|n!<5wp@`~$?5d_uoq-&G2D_!fmcC6(h^&4A=!l-34{o4>SVB5zokG@qI{h;;=X`9~U?RV0g?W5=NM<7Lh;i|VEW^-t zu*bBqB6q$S*vBsylw#;H>ls{U)V3#t#-aVahKC5>%z%o>PWbS=5I^t#BpkVR$@Y43z zg;!^~tZd@J4~OVuOKA*akb!lQ?;}Q+K|12(8>Bx86g>aQv8YyUQGYkK4OzFS)1X@J z`z5p!85*v~7sT92x<3zGJhP|nZZ|2hNS%NELm-?M+<&;(3E_|T7!TB6VMOSEsOwAV z6!qKkKIY$&W4D&=fT$93MkkbKl&zLJS6>xz`?Z5Lc7j+ODj%*X?C78m&%G-uq7gu{ zZ9PD<)iPNyo6Q5^pt)H8(E2dTolJGG&#+%c+M0epytUeEOyyxvM|lMXjsq>8|I8eu ze(y6c#cYjI)3KHf9|gnIf`0v=;OXqVMwS$hU3s2h!MFAi>f|3}RYqFX4z)D>VIy=M zGfy0Xxt4pbKr4<;$9)_Ya3_pUNJ1{@qG+)Q06YHO=OK1DXYA%?#<4lK<<(S7oa0X&8??Cr>;(I1D1cjWu9FOT49gN)gac+w7WYm~sDOqRf1IfDQLZc|;>gAvuxu z+x1$X>(1GsNzfFs@d2}H(CsEO5$<#CuVKH2JqRmH4R;%nDxzDz?iY{j>0RrULWz1C zyFDdGs^JB><>~=~JaTui0GF5(Mv;Y+(A>gBn zLk|Wq6O-aP&69s5hK(;JKHIoof3S9p48u`v8ZO3BhP`*r6fD5kA*3Wymkx-+BND17 z{Uhh$5*IDETXf};N*v=8ax}PbSW#_CZsYM*G9tIps2PrD*A%1}MqMF&*mOq}+!pgc z9$7Hvh|YwpXn)0eUW!58nhi7~%w?*x zF0Mwzh9+}s6%*xNUcK8%KcBcFaiR9T&3L^>4fdYuT-1Xyv7u)n(sEh+3LDH=GzQ<$ zX6NcLnkXJiMy3&kq8ILjQsvq$mK0xw1Z;P&*qlF-L02c{pM@MrV8@Dk3l82le;Q*O zqT@RH3$wW`-%3l!M=bv?aq``5#hK}H$7WoCdt|!zC(p9@_L+`;o0)|TCHl%id<%(Xs z0Hu`G^Kz;eCL|FuzU!fogrilIFbBt%UW7vLx^IiEWI5OLjvz0!=TeR-3%50$A5Q0~ zJTg~$HJV`&<~j1MgfagSMf%pk*2O=dqpnwDMxN*pwsJn5_JNFLhlVJ|y`ZCBwxC{i;qg-5v`KB+VA@{ln)LjvEg4a7LAA># zl_6Bd6ruRo>$S;NzvZyfg=DLL|4v+{R$@-|judkKxw9TMnDJKI z`X|f*6>mJo7o}ANw_0M3B+Y$%VW+YkO(a7yw!!N9JDNgo^)@s{ZKc%en#)6AxAL>?qO3O-nL$0x| z9m9en($^mKe&My+>TA106JL1u>|CMw=`YFlPIK`sb?Ur3rIi49C680@<); z^G%my*Z{geL`r)ke!EdZgqs4B)+@~PwOW#hhtw!-SIUKZzMFp6bKK%bn_Fih>PtnZ zAj_3gYL3x*7dM#ps)K1^RHJ6H%|AF<%PJS9Tkx}Wb;e(>sVXk7sey0zljW(CZc`lz z79C`Gae&9xeZ+3tfM;!l_=!`^f;>jekD7ni7*>DR*)*UN6>}AepSRV<`GuNW1SyCw z%jNl42W=`b>F*hf9R73sA<>L{gHhZh>Ew4R@@lcabNy!!7I+ zu58?`;N&^i`_&wEJg&V_Qtq;aV?%05)7enoeztGuiuygBNaB9u(TlnAZ9?dLafn(YfZ^g z2TPeg>T!$$o~pw@(@!qNuad{mJRcDnH;%ADy!{(5Z*POM6VMZEJbVL`mU6`QpH^wt zW=94ZS=*C#nw5zLY{b@-Z*@9p&5PNxJlUPQ3&Yve?cb=>6q_8F$yn=FTYyfVEZgJ# zO+{5zim&}53bFX+7CLO}+YvBN}DI`$tzTpK|%f=mEfTo0;3g|O(!7$_&P~nlz zw5sPC;GUhpn7~88*XU0UL6ux!gWdper|U;t$sr*B4hRGiibo;|WY?3JjN+L&^qzpX zC3%jgy-j573;URDh3*TG(2K`_Yod~TmB?H8r6a~b)VY?W%U?C>^)NkWAsa>4_6TRo z2YQi-yC+>YCLW-_d8yDlB5!g6u$y%ui@GBp;2UGh-*=xy-(;-6Wq&Z(-r!D+$?Lgw z2^#6Y{B$Og_06T!o9Ud(hP=mK_q3LG7NO$eS{CGoA1h)C<+=APY#?SbAT(W;Uc z0Fq?mTM{Jgf=_Fw^JB?-y+!!i{N3IYw3B-P{TTYA|`NA0)4Jl04`Lkgwev z!*F;Tm{SFVPu5@D2=i-SO*qRI_>O)aj7GS4wUcxiN778witw=MzNS3mRa7Prl$1;G zI22Ec1+%-v3bKNok)6CLV&f5Uz17=pcNPaNE#Qr90mI{F8U%nSi-Bh4iGm)L&WDI! z87?^rRxR{-?#kl?1NwXJnX|@7+n}gilH4j&P_aM^SW+m@&01rA<1B_cp z6G^&e^1NVPHJ%9ty0yD(7r}b`TlHPwMab%1gm!PK&{}WQR;P^oxPeU&C-4nZ4I_o5 zJzJXY_nvs~inW(}ffAs|nu=qlzv6C#{3hS`_}tk$_pS_9Iy)|48V z5XgtFu|pil-D^?*b$0NN1?}F2bcc*_DefCDT6}6^(JDJka1{s8WUs$%z%_VVHMfOH zJY;hKu(yYB%~NmhRW3l_-}3!0N9TV|gZe5M)OK*!rAq|>eom;zY3~aPZGkTgLEWu? zMY8+&f6$37@zk@wbh-bw_5FVkE8Uynk&!I+Y^k2XkGb;O>MFJ_Oj*2jO(p0w5Y=FG z6l{Dx%dC-=HL^`@wejtKkiutJt^5eu!48NQ<@A{}bC)NzwXJq2Io7;%tCg^|YtK~2 zce~v!lv{PdvOo8j9FTu0t=YT~al(X3Rj3~NfvPPyIb8?&CGzGmpoyU>199%IUWP7i z?@AV|4y((@3z`L8C&OiOvkbp|kz-GXru4$`o9>LY+E%j5;-u?qv&kOJ%d1W@d!S=jk~v;;s;DYL6;r67-Rpr$F6*tRYZM&Jx?T0$ zE}?XvxvDe1p|>L43A$VIM&3L8G4vzfb-e`t~E96n4LSzBc zw`#Wh2b|Hkp8G=2Dwtlwx|gNv@@r5@XD8B3em+<^qv!iol>qs*+Lu+!Nf-A-St!gQ zY>rIEjBiSxcq|&i+`+8Fm<%CI#r)gvT|S6YsIrL28Xsm_&||#EmYGC0Vbjb;nqBYe zkscG96D(?xP39L(vmZvbxNNiy1x8E1hTT-v%dOg(E>{)bG@>;&%E;B+LCJ5u)!q3n zwP##fAl-V~o@nMs40j9H)rkeuAj?O5h#Q?DB|Q%t8!uS2M5wKHntDN-;Z$SG#=xs! zjgD#|s)*IzSANJ?0Q1_iC~ZZwa{ly5PleclqTyXbVa)4dcZItVx5d5&=R#%h02-?u<|a!mV4-tH-frPNLn zUs9K{Jf!;hr55ehMTcUkX!P(3eTKpgqPxeyGRaWOHubkL?7Us^d7q6&33roH_ctBw z%?;ab5#&Fd$W0N?^@~>q8?q-@-)awZK_-9Oi@zabBZ{4Gq+$1+S7M+g(WcJ=1lbG7QHwiiX94UEh? zk9T~BNbFPNC&qNyU_j?mO$?(t`9vkM0aermTynH#Ab>myF zwCF>{pSDM{TE*vuBiGB$LFPTB3(!P|>8e0mg(t4ff0V22xw&~EDs|J-Fq`xGjzwe) zfu-L$8h59By}{rw$KC&^OYlh3$;T&56gQ}YeRj5YAqFYazo*DI#1YN+RW9qb*mFTz zIbHT~LkHG$X?hE~Q<7l1>+rC+|mGxRQ3s!0bN$f4w{m_B%>kxx8fPdMY(X8 sB*q@q?)iojh}y$mf1OaGe_f9(j>za=S{+~`QUEZxWpWdvYyZpt0!Q7rm;e9( literal 0 HcmV?d00001 diff --git a/components/validation/images/tooltip-position-example.png b/components/validation/images/tooltip-position-example.png new file mode 100644 index 0000000000000000000000000000000000000000..a6ffbb4f2b3f2b08c11b845866acab858b3114f4 GIT binary patch literal 6198 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 sHB*3u}I2kjO8%Q=p-cMsSswB5Hb~G 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 literal 0 HcmV?d00001 diff --git a/components/validation/tooltip.md b/components/validation/tooltip.md index 57ec411222..3e900b60fc 100644 --- a/components/validation/tooltip.md +++ b/components/validation/tooltip.md @@ -1,132 +1,255 @@ --- -title: Overview -page_title: Validation Helpers - Overview -description: Overview of the Validation Helpers for Blazor. -slug: validation-helpers-overview -tags: telerik,blazor,validation,helpers,overview +title: Tooltip +page_title: Validation Tools - Tooltip +description: Validation Tools - Tooltip. +slug: validation-tools-tooltip +tags: telerik,blazor,validation,tools,tooltip published: True -position: 0 +position: 20 --- -# Validation Helpers Overview +# Telerik Validation Tooltip for Blazor -The Telerik UI for Blazor provides different ways to customize the validation messages. They can be used together with the [Telerik Form]({%slug form-overview%}) or with any form that provides an EditContext like the EditForm provided from the framework. +The Telerik Validation Tooltip for Blazor can render the validation errors as tooltips -## TelerikValidationSummary +This article is separated in the following sections: -The `TelerikValidationSummary` extends the `ValidationSummary` class provided by the framework. It exposes a [Template]({%slug validation-helpers-summary-template%}) and []({%slug validation-helpers-summary-appearance%}). +* [Basics](#basics) +* [Position](#position) +* [Template](#template) +* [Class](#class) -## Validation Helpers +## Basics -* [TelerikValidationSummary]({%slug validation-helpers-summary%}) -* [TelerikValidationMessage]({%slug validation-helpers-message%}) -* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) +To enable Telerik Validation Tooltip for a field in the form you should: +1. Provide a lambda expression in the `For` parameter that notifies the component for which property of the model the validation messages should render. +1. Populate the `TargetSelector` with a CSS selector that controls which elements the Tooltip will associate itself -## Integration +>caption Enable Telerik Validation Tooltip in a Form -* [Integration with the TelerikForm](#integration-with-the-telerikform) -* [Integration with the Microsoft EditForm](#integration-with-the-microsoft-editform) +````CSHTML +@* Use the TelerikValidationTooltip component to render validation messages and disable the built-in validation messages from the Telerik Form*@ + +@using System.ComponentModel.DataAnnotations + + + + + + + + + + + + + + + + + + +@code { + private Customer customer = new Customer(); -### Integration with the TelerikForm + public class Customer + { + [Required(ErrorMessage = "Please enter your name")] + [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")] + public string CustomerName { get; set; } -You can seamlessly integrate the validation helpers with the [Form Component]({%slug form-overview%}). In order to avoid doubling of validation message you should set the [ValidationMessageType]({%slug form-overview%}#features) parameter to `FormValidationMessageType.None`. + [Required(ErrorMessage = "Please enter your age")] + [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")] + public int CustomerAge { get; set; } + + [Required(ErrorMessage = "Please enter your email")] + [EmailAddress(ErrorMessage = "Enter a valid email address")] + public string EmailAddress { get; set; } + } +} +```` + +>caption The result from the code snippet above + +![Tooltip Basic Example](images/tooltip-example.png) + +## Position + +You can control the position of the validation tooltip through the `Position` paramter. It takes a member of the `TooltipPosition` enum: + +* `Top` - by default the validation tooltip will render on top of the editor +* `Bottom` +* `Right` +* `Left` ````CSHTML -@* Disable the default validation messages from the Telerik Form and use the validation helpers instead *@ +@* Change the rendering position of the validation tooltip *@ @using System.ComponentModel.DataAnnotations - + - - + + - - + + - - + + @code { - Person person = new Person(); + private Customer customer = new Customer(); - public class Person + public class Customer { - [Required] - public string Name { get; set; } + [Required(ErrorMessage = "Please enter your name")] + [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")] + public string CustomerName { get; set; } - [Required] - [Range(10,150, ErrorMessage ="The age should be between 10 and 150")] - public int? Age { get; set; } + [Required(ErrorMessage = "Please enter your age")] + [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")] + public int CustomerAge { get; set; } - [Required] - public bool IsMarried { get; set; } + [Required(ErrorMessage = "Please enter your email")] + [EmailAddress(ErrorMessage = "Enter a valid email address")] + public string EmailAddress { get; set; } } } ```` -### Integration with the Microsoft EditForm +>caption The result from the code snippet above + +![Tooltip Position example](images/tooltip-position-example.png) + +## Template + +Allows you to control the rendering of the validation tooltip. The `context` represents an `IEnumerable` collection of all messages for the property. ````CSHTML -@* Use the Telerik Validation Helpers inside an EditForm *@ +@* Use the Template to customize the rendering of the validation tooltip *@ -@using System.ComponentModel.DataAnnotations + + + + + + + + + + + + + + + + + + + +@code { + private Customer customer = new Customer(); + + public class Customer + { + [Required(ErrorMessage = "Please enter your name")] + [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")] + public string CustomerName { get; set; } + + [Required(ErrorMessage = "Please enter your age")] + [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")] + public int CustomerAge { get; set; } + + [Required(ErrorMessage = "Please enter your email")] + [EmailAddress(ErrorMessage = "Enter a valid email address")] + public string EmailAddress { get; set; } + } +} +```` + +>caption The result from the code snippet above - - +![Messages Template example](images/tooltip-template-example.png) - +## Class -

- - - -

+You can use the `Class` parameter to add a custom CSS class to the validation tooltip. -

- - - -

+````CSHTML +@* Use the Class parameter to underline the font of the validation message *@ + + -

- - - -

+@using System.ComponentModel.DataAnnotations - Submit - + + + + + + + + + + + + + + + + @code { - Person person = new Person(); + private Customer customer = new Customer(); - public class Person + public class Customer { - [Required] - public string Name { get; set; } + [Required(ErrorMessage = "Please enter your name")] + [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")] + public string CustomerName { get; set; } - [Required] - [Range(10, 150, ErrorMessage = "The age should be between 10 and 150")] - public int? Age { get; set; } + [Required(ErrorMessage = "Please enter your age")] + [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")] + public int CustomerAge { get; set; } - [Required] - public bool IsMarried { get; set; } + [Required(ErrorMessage = "Please enter your email")] + [EmailAddress(ErrorMessage = "Enter a valid email address")] + public string EmailAddress { get; set; } } } ```` +>caption The result from the code snippet above + +![Messages Class example](images/tooltip-class-example.png) + ## See Also * [Live Demo: Validation](https://demos.telerik.com/blazor-ui/validation/overview) -* [TelerikValidationSummary]({%slug validation-helpers-summary%}) -* [TelerikValidationMessage]({%slug validation-helpers-message%}) -* [TelerikValidationTooltip]({%slug validation-helpers-tooltip%}) +* [TelerikValidationSummary]({%slug validation-tools-summary%}) +* [TelerikValidationTooltip]({%slug validation-tools-message%}) * [Form Component]({%slug form-overview%}) From 090227cc9fc5894f871f2f7e4eb3ba29ad2f7b09 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Feb 2021 15:43:04 +0200 Subject: [PATCH 10/18] chore(validation-tools): minor improvements --- components/validation/message.md | 7 ++++++- components/validation/summary.md | 6 ++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/components/validation/message.md b/components/validation/message.md index bb91a453ee..f1df349977 100644 --- a/components/validation/message.md +++ b/components/validation/message.md @@ -5,7 +5,7 @@ description: Validation Tools - Message. slug: validation-tools-message tags: telerik,blazor,validation,tools,message published: True -position: 10 +position: 15 --- # Telerik Validation Message for Blazor @@ -66,6 +66,8 @@ To enable Telerik Validation Messages for a field in the form you should provide } ```` +>caption The result from the code snippet above + ![Messages Basic Example](images/messages-example.png) ## Template @@ -134,6 +136,7 @@ Allows you to control the rendering of the validation messages. The `context` re } } ```` +>caption The result from the code snippet above ![Messages Template example](images/messages-template-example.png) @@ -191,6 +194,8 @@ You can use the `Class` parameter to add a custom CSS class to the `k-form-error } ```` +>caption The result from the code snippet above + ![Messages Class example](images/messages-class-example.png) ## See Also diff --git a/components/validation/summary.md b/components/validation/summary.md index a89f305c19..baf0be5a4b 100644 --- a/components/validation/summary.md +++ b/components/validation/summary.md @@ -56,6 +56,8 @@ To enable Telerik Validation Summary in the form you should add the `caption The result from the code snippet above + ![Summary Basic Example](images/summary-example.png) ## Template @@ -108,6 +110,8 @@ Allows you to control the rendering of the validation summary. The `context` rep } ```` +>caption The result from the code snippet above + ![Summary Template example](images/summary-template-example.png) ## Class @@ -152,6 +156,8 @@ You can use the `Class` parameter to add a custom CSS class to the `k-validation } ```` +>caption The result from the code snippet above + ![Summary Class example](images/summary-class-example.png) ## See Also From 9e72dca562d91ba8c46d4a37c42ed47f1bcd6cac Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Feb 2021 15:46:10 +0200 Subject: [PATCH 11/18] chore(validation-tools): add the validation tools to the config file --- _config.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/_config.yml b/_config.yml index ea93e2d77b..df19fa3ae2 100644 --- a/_config.yml +++ b/_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: From c71054eb898625f2b75861079469febe550587ac Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Fri, 19 Feb 2021 15:53:51 +0200 Subject: [PATCH 12/18] chore(kb): update the validation error in tooltip kb article --- knowledge-base/common-validation-error-in-tooltip.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/knowledge-base/common-validation-error-in-tooltip.md b/knowledge-base/common-validation-error-in-tooltip.md index a54e28c8a8..afeb3e0057 100644 --- a/knowledge-base/common-validation-error-in-tooltip.md +++ b/knowledge-base/common-validation-error-in-tooltip.md @@ -18,12 +18,19 @@ Can you please advise me on how to display validation message as tooltip? ## Solution -This article contains two different approaches for implementing validation notifications with popups: +This article contains several different approaches for implementing validation notifications with popups: + +* [TelerikValidationTooltip](#telerikvalidationpopup) * [Validation Summary in a Popup](#validation-summary-in-a-popup) * [Per-Input Validation Popups](#per-input-validation-popups) + +### TelerikValidationTooltip + +You can use the [TelerikValidationTooltip]({%slug validation-tools-tooltip%}) to enable tooltip validation messages either in the [Telerik Form]({%slug form-overview%}) or in the Microsoft EditForm. + ### Validation Summary in a Popup There are several key aspects in implementing this: From fedef65aee510ec5f608759aca9d51969eead50e Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 19 Feb 2021 20:30:04 +0200 Subject: [PATCH 13/18] chore(form): notes on validation --- components/form/formitems/template.md | 4 ++-- components/form/overview.md | 10 +++++++--- components/form/validation.md | 2 ++ 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/components/form/formitems/template.md b/components/form/formitems/template.md index 120845fc8a..7e02fadd3b 100644 --- a/components/form/formitems/template.md +++ b/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: diff --git a/components/form/overview.md b/components/form/overview.md index 02850cbf5f..b44344febe 100644 --- a/components/form/overview.md +++ b/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 EditContext class. 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 diff --git a/components/form/validation.md b/components/form/validation.md index c9313b177f..2ffe9affa2 100644 --- a/components/form/validation.md +++ b/components/form/validation.md @@ -58,6 +58,8 @@ To enable validation in the Telerik Form for Blazor add the `` 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: From e2e1b570f39ba22db31269f1bb8e2a8ab57fe00a Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 19 Feb 2021 20:40:18 +0200 Subject: [PATCH 14/18] chore(validators): minor tweaks --- .../images/summary-class-example.png | Bin 11429 -> 13806 bytes components/validation/overview.md | 17 ++++++++++------- components/validation/summary.md | 6 +++--- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/components/validation/images/summary-class-example.png b/components/validation/images/summary-class-example.png index 75bff0d12d1538cb210d96313c21cba111727d50..e3d887066a62b040c272085e131139d741aa43e9 100644 GIT binary patch literal 13806 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 U>z8*3DZ9Wc1vU9{SEditContext like the EditForm provided from the framework. +The Telerik UI for Blazor provides different ways to customize the validation messages. They can be used together with the [Telerik Form]({%slug form-overview%}) or with any form that provides an EditContext like the `EditForm` provided by the framework. +#### This article contains the following sections -* [TelerikValidationSummary](#telerikvalidationsummary) * [Validation Tools](#validation-tools) * [Integration](#integration) * [Integration with the TelerikForm](#integration-with-the-telerikform) @@ -22,11 +22,13 @@ The Telerik UI for Blazor provides different ways to customize the validation me ## Validation Tools -* [TelerikValidationSummary]({%slug validation-tools-summary%}) -* [TelerikValidationMessage]({%slug validation-tools-message%}) -* [TelerikValidationTooltip]({%slug validation-tools-tooltip%}) +Telerik 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 adds customization options on top of the standard validation tools the frameworks provides - `ValidationSummary` and `ValidationMessage` +These components add customization options on top of the standard validation tools the frameworks provides - `ValidationSummary` and `ValidationMessage` ## Integration @@ -37,7 +39,7 @@ Here are two examples of integrating the Telerik validation extenders with forms ### Integration with the TelerikForm -You can seamlessly integrate the validation tools with the [Form Component]({%slug form-overview%}). In order to avoid doubling of validation message you should set the [ValidationMessageType]({%slug form-overview%}#features) parameter to `FormValidationMessageType.None`. +You can seamlessly integrate the validation tools with the [Form Component]({%slug form-overview%}). In order to avoid doubling of validation message you should set the [ValidationMessageType]({%slug form-overview%}#features) parameter of the form to `FormValidationMessageType.None`. You can also use them in the [templates with custom editors]({%slug form-formitems-template%}) that you can define with your own code. ````CSHTML @* Disable the default validation messages from the Telerik Form and use the validation tools instead *@ @@ -47,6 +49,7 @@ You can seamlessly integrate the validation tools with the [Form Component]({%sl + diff --git a/components/validation/summary.md b/components/validation/summary.md index baf0be5a4b..adb8461663 100644 --- a/components/validation/summary.md +++ b/components/validation/summary.md @@ -20,9 +20,9 @@ This article is separated in the following sections: ## Basics -To enable Telerik Validation Summary in the form you should add the `` to the validation configuration part. +To enable Telerik Validation Summary in the form you should add the `` to the validation configuration part. You can also add it directly to the standard `EditForm` component instead of the built-in `` component. ->caption Enable Telerik Validation Summary in a Form +>caption Enable Telerik Validation Summary in a Telerik Form ````CSHTML @* Enable the Telerik Validation Summary in the Telerik Form *@ @@ -62,7 +62,7 @@ To enable Telerik Validation Summary in the form you should add the `` collection of all messages for the form. +Allows you to control the rendering of the validation summary. The `context` represents an `IEnumerable` collection of all error messages for the form. ````CSHTML @* Use the Template to customize the rendering of the validation summary *@ From 788c53688e623c84192b3ea59ec8e6f5979dd099 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 19 Feb 2021 20:46:37 +0200 Subject: [PATCH 15/18] chore(validators): edit form example for summary --- .../images/summary-example-editform.png | Bin 0 -> 7020 bytes components/validation/summary.md | 44 ++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 components/validation/images/summary-example-editform.png diff --git a/components/validation/images/summary-example-editform.png b/components/validation/images/summary-example-editform.png new file mode 100644 index 0000000000000000000000000000000000000000..0ee5995c47bb80dba4294ccc16d5ec5b295cc2af GIT binary patch literal 7020 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 Enable Telerik Validation Summary in an EditForm + +````CSHTML +@* Enable the Telerik Validation Summary in the standard EditForm *@ + +@using System.ComponentModel.DataAnnotations + + + + + +
+ +
+ +
+ + + +@code { + private Customer customer = new Customer(); + + public class Customer + { + [Required(ErrorMessage = "Please enter your name")] + [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")] + public string CustomerName { get; set; } + + [Required(ErrorMessage = "Please enter your age")] + [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")] + public int CustomerAge { get; set; } + + [Required(ErrorMessage = "Please enter your email")] + [EmailAddress(ErrorMessage = "Enter a valid email address")] + public string EmailAddress { get; set; } + } +} +```` + +>caption The result from the code snippet above + +![Summary Basic Example](images/summary-example-editform.png) + + ## Template Allows you to control the rendering of the validation summary. The `context` represents an `IEnumerable` collection of all error messages for the form. From c8f955cbc37a715d1208a79ef7a85626677262e2 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 19 Feb 2021 20:54:37 +0200 Subject: [PATCH 16/18] chore(validators): minor fixes on screenshots, example for edit form --- .../validation/images/messages-example.png | Bin 7535 -> 10027 bytes .../images/validation-message-in-editform.png | Bin 0 -> 6137 bytes components/validation/message.md | 52 +++++++++++++++++- 3 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 components/validation/images/validation-message-in-editform.png diff --git a/components/validation/images/messages-example.png b/components/validation/images/messages-example.png index 7f1e803b133f1e0e6f8288a4f2523300266eb1d0..6009ddf8dc19069212934058a66a8c98996fbf4a 100644 GIT binary patch literal 10027 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 diff --git a/components/validation/images/validation-message-in-editform.png b/components/validation/images/validation-message-in-editform.png new file mode 100644 index 0000000000000000000000000000000000000000..06804e52b755d1caf5c2bc4ad2b0ac756b5ec373 GIT binary patch literal 6137 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 bU6Oa|#PVpZ#%z<6c`^fCQ=NJ(r}+N>7*>S= literal 0 HcmV?d00001 diff --git a/components/validation/message.md b/components/validation/message.md index f1df349977..7cb336042a 100644 --- a/components/validation/message.md +++ b/components/validation/message.md @@ -20,7 +20,7 @@ This article is separated in the following sections: ## Basics -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. +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. >caption Enable Telerik Validation Message in a Form @@ -70,6 +70,54 @@ To enable Telerik Validation Messages for a field in the form you should provide ![Messages Basic Example](images/messages-example.png) +>caption Enable Telerik Validation Message in an EditForm + +````CSHTML +@* Enable the Telerik Validation Message in the standard EditForm *@ + +@using System.ComponentModel.DataAnnotations + + + + + + +
+ + +
+ + +
+ + + +@code { + private Customer customer = new Customer(); + + public class Customer + { + [Required(ErrorMessage = "Please enter your name")] + [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")] + public string CustomerName { get; set; } + + [Required(ErrorMessage = "Please enter your age")] + [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")] + public int CustomerAge { get; set; } + + [Required(ErrorMessage = "Please enter your email")] + [EmailAddress(ErrorMessage = "Enter a valid email address")] + public string EmailAddress { get; set; } + } +} + +```` + +>caption The result from the code snippet above + +![Summary Basic Example](images/validation-message-in-editform.png) + + ## Template Allows you to control the rendering of the validation messages. The `context` represents an `IEnumerable` collection of all messages for the property. @@ -144,6 +192,8 @@ Allows you to control the rendering of the validation messages. The `context` re You can use the `Class` parameter to add a custom CSS class to the `k-form-error` span, that wraps the validation message. +This example adds a custom class and styling to the third message - for the Email Address. + ````CSHTML @* Use the Class parameter to change the font of the validation message *@ From 08b5422de008e350fff59a78e1942196c8618632 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 19 Feb 2021 21:02:51 +0200 Subject: [PATCH 17/18] chore(validators): tooltip tweaks; editform example --- .../images/tooltip-example-editform.png | Bin 0 -> 2040 bytes components/validation/tooltip.md | 56 ++++++++++++++++-- 2 files changed, 52 insertions(+), 4 deletions(-) create mode 100644 components/validation/images/tooltip-example-editform.png diff --git a/components/validation/images/tooltip-example-editform.png b/components/validation/images/tooltip-example-editform.png new file mode 100644 index 0000000000000000000000000000000000000000..72455d9500f21984d8f06d9a64fc3fb5cdfae6b3 GIT binary patch literal 2040 zcmbVNc{JPk77rdO8cUnTT1zF`)b=vySh`?@{9<{eEiDxdjndWxp-PZ>mRizUg26LE z%hQF%C{??e41(GkTZm;SRn3TMN@|}t=k>gI-n{qzcz@h`&;5SxJ>Pr3_nyx;)y>rr z0#*luKp+T!vB!z+l2}p>$cVLMaj&M>NRV-kb|7ZI=05VL>$WboAW(IN{5C;a?8}8< zE|WnZgq-nDDr%L#%)X*XCb3K)I$%S z-Y;?Xr$Y$$G68B~d}^F_j=CG3sMON%4rF7F0hegPrQH(GRw4j6h zE-VvjWBCubzZYU136Pq0$kdQ_;qGkKdhk9xaSwVzNs!FC?BU!Ya}_cghL~jnLX=`QUg=F0dFT4Vaj9i=5VBx^+?% z2ShB$a$S|Xf@Leg8>}?x?VFP=qPK|%*6*#ST{{afR%4M-mFt_`+|D<_l$hr6!;@4C zmGeS8_U60XVHog9DL89BBSZddiede)1V>bG_elcS&rqx2R&kw4S8_<6BeMmJn)PHzqn}M*r_*)_U3Ayyg8j$Ue%C=dwowKP2dhLTc<4`-@DK zV3m%rtk}<&aZ%1JzSFK9XEzU*?vH?gN47N&6c!n5`8sj#q{mV`IP=khIIQsO75`(; z9&AQ<2E?Q+#H(pNq;}cJDekX9Niq#Wso8};HSjXFI+kfyN@@l z&9G#HwPtrec6_L8GLm+}3S&I@H6%B*_ul6EoXG_P2ECq|o{q&W4GY zuS}lDLfId}Nt@nS&NmOEq8nGX_{B@F;AgG{OgjZZr0H~`f7&@%W>>8Yy~w*4ER4TM zqy<6XXG-fmi5{V&Y=ldh0Nd=x=sE16%V+nxI>NOy`4x3Ax>je4aM|I5G`*^!a(f32r zp)c;1$iSb;o6dk7`n}@SGi!}$ecSx8s&2JT9Yo*Jq3GJ0lrp1((A^@kFYsc_gl?xS z4*!2O%%nWW^yP}C%^ykO3un~G0g!-_#9Gy5L;WS*OOjmBR}+`*IWQUUpOe-%(Kznu zFD!Bwu`?R0x?7Q|m}~@M-16X%RuscpBX9H+OVn1o15+nAXJ_Jsi;o153gii5A>9i( z6J8wWdQ0kr-!Jr@+@Z=!4A{yRCr^*ZpE5*NH4Vz}a?J3S*||q-6g6_qw%Nwpda8rH z0f>l-CmSki&X>@(CK}&EOCbM3W&2fMKTKEewUG-#P1xd|Zv-Zf`EXB9@KpeU@ZWgv zON;-77XK4`O83dn2XiuEr3^HDXN~U}NhW7Az9Xlo6{_jkKww$J(ABXj-=>*1YB8~w z+p8*Z<45jHS;O4fNBJnpVGxjUkZxy``Ke0>IqZi9w40`K_lm(ySE$`b^JvzhkHu_f zp1g2jb5Il^%Dh=9Cl2>iZo)L66i8~@`7lk#bCz2Z$jX69v~P-}XPz0Ui{P2SyP zwiuoiUog5=IE=NxW>=;;Vyt?g0I5TxD#-KQ>?Gd9#9TZDRfD(?vrZ>C+6s$nIOH@w zKTr_N)27>%UdS3|cUvKx1reT=t?PH-Ny6(#f%~c-NtlK`5+Zle0oTdHfQ@Q6*a<4; za7+lajn(Kcqx{VIHD92E4>zW>)N1DVOqF2g?b$5K&N6Ri`M1?stkvF*k$pcpDs1- Yft2UQtr6^PK>RU-0JN(;)9z~g@9I;!+5i9m literal 0 HcmV?d00001 diff --git a/components/validation/tooltip.md b/components/validation/tooltip.md index 3e900b60fc..03aa83be2b 100644 --- a/components/validation/tooltip.md +++ b/components/validation/tooltip.md @@ -10,7 +10,7 @@ position: 20 # Telerik Validation Tooltip for Blazor -The Telerik Validation Tooltip for Blazor can render the validation errors as tooltips +The Telerik Validation Tooltip for Blazor can render the validation errors as tooltips pointing to the problematic input when you hover it. It acts like the ValidationMessage, but is a popup and not an inline element, so it takes up less space. This article is separated in the following sections: @@ -22,10 +22,13 @@ This article is separated in the following sections: ## Basics To enable Telerik Validation Tooltip for a field in the form you should: -1. Provide a lambda expression in the `For` parameter that notifies the component for which property of the model the validation messages should render. -1. Populate the `TargetSelector` with a CSS selector that controls which elements the Tooltip will associate itself ->caption Enable Telerik Validation Tooltip in a Form +1. 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 the standard `ValidationMessage`. +1. Populate the `TargetSelector` with a CSS selector that controls which element(s) the Tooltip will associate itself with. + +>caption Enable Telerik Validation Tooltip in a Telerik Form + +>tip The Telerik Form can provide tooltips out-of-the-box with a single setting - see the [Form Validation - Validation Message Type]({%slug form-validation%}#validation-message-type) section. The example below shows more advanced customizations. ````CSHTML @* Use the TelerikValidationTooltip component to render validation messages and disable the built-in validation messages from the Telerik Form*@ @@ -73,6 +76,51 @@ To enable Telerik Validation Tooltip for a field in the form you should: ![Tooltip Basic Example](images/tooltip-example.png) + +>caption Enable Telerik Validation Tooltip in an EditForm + +````CSHTML +@using System.ComponentModel.DataAnnotations + + + + + + +
+ + +
+ + +
+ + + +@code { + private Customer customer = new Customer(); + + public class Customer + { + [Required(ErrorMessage = "Please enter your name")] + [MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")] + public string CustomerName { get; set; } + + [Required(ErrorMessage = "Please enter your age")] + [Range(18, 120, ErrorMessage = "You should be at least 18 years old to place an order")] + public int CustomerAge { get; set; } + + [Required(ErrorMessage = "Please enter your email")] + [EmailAddress(ErrorMessage = "Enter a valid email address")] + public string EmailAddress { get; set; } + } +} +```` + +>caption The result from the code snippet above + +![Tooltip Basic Example](images/tooltip-example-editform.png) + ## Position You can control the position of the validation tooltip through the `Position` paramter. It takes a member of the `TooltipPosition` enum: From 73c4c38834cc6cd137adf7326540f39c6959f154 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Fri, 19 Feb 2021 21:12:13 +0200 Subject: [PATCH 18/18] chore(kb): minor tweaks on validationmessage as tooltip kb --- .../common-validation-error-in-tooltip.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/knowledge-base/common-validation-error-in-tooltip.md b/knowledge-base/common-validation-error-in-tooltip.md index afeb3e0057..68d0717443 100644 --- a/knowledge-base/common-validation-error-in-tooltip.md +++ b/knowledge-base/common-validation-error-in-tooltip.md @@ -20,22 +20,28 @@ Can you please advise me on how to display validation message as tooltip? This article contains several different approaches for implementing validation notifications with popups: -* [TelerikValidationTooltip](#telerikvalidationpopup) +* [Telerik Validation Tooltip Component](#telerikvalidationpopup) + +* [Telerik Form Component](#telerikform) * [Validation Summary in a Popup](#validation-summary-in-a-popup) -* [Per-Input Validation Popups](#per-input-validation-popups) +* [Per-Input Validation Popups](#per-input-validation-popups) - it is much easier to use the Telerik components listed above to get this functionality ### TelerikValidationTooltip You can use the [TelerikValidationTooltip]({%slug validation-tools-tooltip%}) to enable tooltip validation messages either in the [Telerik Form]({%slug form-overview%}) or in the Microsoft EditForm. +### TelerikForm + +The [Telerik Form]({%slug form-overview%}) component comes with a [popup validation mode]({%slug form-validation%}#validation-message-type) out-of-the-box. + ### Validation Summary in a Popup There are several key aspects in implementing this: -* A tooltip component. See this page for a Telerik one: https://feedback.telerik.com/blazor/1406095-tooltip-support. When it gets implemented, this code will become simpler. The current mockup stores the button coordinates when the mouse enters it. See the code comments for more details. +* A tooltip component that can be shown programmatically. See this page for a Telerik one: https://feedback.telerik.com/blazor/1494644-show-tooltip-programatically. When it gets implemented, this code will become simpler. The current mockup stores the button coordinates when the mouse enters it. See the code comments for more details. * An event that will show and hide the tooltip. In this sample, the `OnValidSubmit` and `OnInvalidSubmit` of the `EditForm` are used. * You need to place the validation summary component in the tooltip, which means the tooltip must be inside the form. @@ -198,7 +204,3 @@ This sample uses a tooltip component and mimics clicks on its targets to make it ```` -## Notes - -Showing individual `ValidationMessage` components for separate components and pointing the tooltip to them is beyond the scope of this article. While an `EditContext` will provide you with some events when validation and fields change, knowing whether a certain field is valid or not is not available out-of-the-box, and connecting this mockup to a particular location (that is, the `Top` and `Left` parameters) in the DOM will require JS Interop code that is highly dependent on the project, form and layout. -