chore(form):added form validation

form/remote-validation/WasmCustomValidation.sln

@@ -0,0 +1,37 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.31129.286
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "WasmCustomValidation.Server", "WasmCustomValidation\Server\WasmCustomValidation.Server.csproj", "{1223DE2A-08B2-4319-9024-5690B18BFFAF}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "WasmCustomValidation.Client", "WasmCustomValidation\Client\WasmCustomValidation.Client.csproj", "{F357039D-DD41-44AF-9B67-D4189BE10F84}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "WasmCustomValidation.Shared", "WasmCustomValidation\Shared\WasmCustomValidation.Shared.csproj", "{F03A79AE-B35D-4830-8D4C-EC313F1C9284}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{1223DE2A-08B2-4319-9024-5690B18BFFAF}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{1223DE2A-08B2-4319-9024-5690B18BFFAF}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{1223DE2A-08B2-4319-9024-5690B18BFFAF}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{1223DE2A-08B2-4319-9024-5690B18BFFAF}.Release|Any CPU.Build.0 = Release|Any CPU
+		{F357039D-DD41-44AF-9B67-D4189BE10F84}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{F357039D-DD41-44AF-9B67-D4189BE10F84}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{F357039D-DD41-44AF-9B67-D4189BE10F84}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{F357039D-DD41-44AF-9B67-D4189BE10F84}.Release|Any CPU.Build.0 = Release|Any CPU
+		{F03A79AE-B35D-4830-8D4C-EC313F1C9284}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{F03A79AE-B35D-4830-8D4C-EC313F1C9284}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{F03A79AE-B35D-4830-8D4C-EC313F1C9284}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{F03A79AE-B35D-4830-8D4C-EC313F1C9284}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {6F4EB78D-E923-4B93-8C9D-67FB2C401908}
+	EndGlobalSection
+EndGlobal

form/remote-validation/WasmCustomValidation/Client/App.razor

@@ -0,0 +1,10 @@
+<Router AppAssembly="@typeof(Program).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+    </Found>
+    <NotFound>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p>Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>

form/remote-validation/WasmCustomValidation/Client/Pages/Index.razor

@@ -0,0 +1,103 @@
+@page "/"
+
+@using System.Net
+@using System.Net.Http.Json
+@using WasmCustomValidation.Shared
+@inject HttpClient Http
+
+Try to fill all inputs except the "Description" when the "Classification" is set to Defense.
+<br />
+Try to submit with empty fields.
+<br/>
+This sample uses a Notification component to show the error message to supplement any data annotation validation.
+
+<TelerikForm Model="@myModel" OnValidSubmit="@HandleValidSubmit">
+    <FormValidation>
+        <TelerikNotification @ref="@Notification"
+                             HorizontalPosition="@NotificationHorizontalPosition.Center"
+                             VerticalPosition="@NotificationVerticalPosition.Top"
+                             Class="big-notification">
+        </TelerikNotification>
+        <CustomValidation @ref="customValidation" />
+        <ValidationSummary />
+    </FormValidation>
+</TelerikForm>
+
+@code {
+    private bool disabled;
+    private string message;
+    private string messageStyles = "visibility:hidden";
+    private CustomValidation customValidation;
+    private MyModel myModel = new() {};
+
+    TelerikNotification Notification { get; set; }
+
+    void ShowErrorNotification(string message)
+    {
+        Notification.Show(new NotificationModel { CloseAfter = 0, Text = message, ThemeColor = Telerik.Blazor.ThemeColors.Error });
+    }
+
+    private async Task HandleValidSubmit(EditContext editContext)
+    {
+        customValidation.ClearErrors();
+
+        try
+        {
+            var response = await Http.PostAsJsonAsync<MyModel>(
+                "MyValidation", (MyModel)editContext.Model);
+
+            var errors = await response.Content
+                .ReadFromJsonAsync<Dictionary<string, List<string>>>();
+
+            if (response.StatusCode == HttpStatusCode.BadRequest &&
+                errors.Count() > 0)
+            {
+                customValidation.DisplayErrors(errors);
+
+                foreach (var error in errors)
+                {
+                    foreach (var errorName in error.Value)
+                    {
+                        ShowErrorNotification(errorName);
+                    }
+                }
+            }
+            else if (!response.IsSuccessStatusCode)
+            {
+                throw new HttpRequestException(
+                $"Validation failed. Status Code: {response.StatusCode}");
+            }
+            else
+            {
+                disabled = true;
+                messageStyles = "color:green";
+                message = "The form has been processed.";
+            }
+        }
+        catch (Exception ex)
+        {
+            disabled = true;
+            messageStyles = "color:red";
+            message = "There was an error processing the form.";
+        }
+    }
+}
+
+<style>
+    .big-notification .k-notification-container .k-notification-wrap {
+        width: 330px;
+        height: 80px;
+        align-items: center;
+        font-size: 26px;
+        text-align: center;
+    }
+
+        .big-notification .k-notification-container .k-notification-wrap .k-icon.k-i-error::before {
+            font-size: 26px;
+        }
+
+    .big-notification {
+        z-index: 654321;
+    }
+</style>
+

form/remote-validation/WasmCustomValidation/Client/Program.cs

@@ -0,0 +1,22 @@
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.DependencyInjection;
+using System;
+using System.Net.Http;
+using System.Threading.Tasks;
+
+namespace WasmCustomValidation.Client
+{
+    public class Program
+    {
+        public static async Task Main(string[] args)
+        {
+            var builder = WebAssemblyHostBuilder.CreateDefault(args);
+            builder.RootComponents.Add<App>("#app");
+            builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+
+            builder.Services.AddTelerikBlazor();
+
+            await builder.Build().RunAsync();
+        }
+    }
+}

form/remote-validation/WasmCustomValidation/Client/Properties/launchSettings.json

@@ -0,0 +1,27 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:55337/",
+      "sslPort": 44377
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "WasmCustomValidation.Client": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "https://localhost:5001;http://localhost:5000"
+    }
+  }
+} 

form/remote-validation/WasmCustomValidation/Client/Shared/CustomValidation.cs

@@ -0,0 +1,50 @@
+using System;
+using System.Collections.Generic;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+
+namespace WasmCustomValidation.Shared
+{
+    public class CustomValidation : ComponentBase
+    {
+        private ValidationMessageStore messageStore;
+
+        [CascadingParameter]
+        private EditContext CurrentEditContext { get; set; }
+
+        protected override void OnInitialized()
+        {
+            if (CurrentEditContext == null)
+            {
+                throw new InvalidOperationException(
+                    $"{nameof(CustomValidation)} requires a cascading " +
+                    $"parameter of type {nameof(EditContext)}. " +
+                    $"For example, you can use {nameof(CustomValidation)} " +
+                    $"inside an {nameof(EditForm)}.");
+            }
+
+            messageStore = new(CurrentEditContext);
+
+            CurrentEditContext.OnValidationRequested += (s, e) =>
+                messageStore.Clear();
+            CurrentEditContext.OnFieldChanged += (s, e) =>
+                messageStore.Clear(e.FieldIdentifier);
+        }
+
+        public void DisplayErrors(Dictionary<string, List<string>> errors)
+        {
+            foreach (var err in errors)
+            {
+                messageStore.Add(CurrentEditContext.Field(err.Key), err.Value);
+            }
+
+            CurrentEditContext.NotifyValidationStateChanged();
+        }
+
+        public void ClearErrors()
+        {
+            messageStore.Clear();
+            CurrentEditContext.NotifyValidationStateChanged();
+        }
+    }
+}

form/remote-validation/WasmCustomValidation/Client/Shared/MainLayout.razor

@@ -0,0 +1,17 @@
+@layout TelerikLayout
+
+@inherits LayoutComponentBase
+
+<div class="sidebar">
+    <NavMenu />
+</div>
+
+<div class="main">
+    <div class="top-row px-4">
+        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
+    </div>
+
+    <div class="content px-4">
+        @Body
+    </div>
+</div>

form/remote-validation/WasmCustomValidation/Client/Shared/NavMenu.razor

@@ -0,0 +1,27 @@
+<div class="top-row pl-4 navbar navbar-dark">
+    <a class="navbar-brand" href="">WasmCustomValidation</a>
+    <button class="navbar-toggler" @onclick="ToggleNavMenu">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+</div>
+
+<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
+    <ul class="nav flex-column">
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <span class="oi oi-home" aria-hidden="true"></span> Home
+            </NavLink>
+        </li>
+    </ul>
+</div>
+
+@code {
+    bool collapseNavMenu = true;
+
+    string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+}

form/remote-validation/WasmCustomValidation/Client/Shared/TelerikLayout.razor

@@ -0,0 +1,5 @@
+@inherits LayoutComponentBase
+
+<TelerikRootComponent>
+    @Body
+</TelerikRootComponent>

form/remote-validation/WasmCustomValidation/Client/WasmCustomValidation.Client.csproj

@@ -0,0 +1,16 @@
+
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+  <PropertyGroup>
+    <TargetFramework>net5.0</TargetFramework>
+  </PropertyGroup>
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="5.0.6" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0" PrivateAssets="all" />
+    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
+    <PackageReference Include="Telerik.UI.for.Blazor" Version="2.24.0" />
+  </ItemGroup>
+  <ItemGroup>
+    <ProjectReference Include="..\Shared\WasmCustomValidation.Shared.csproj" />
+  </ItemGroup>
+</Project>

form/remote-validation/WasmCustomValidation/Client/_Imports.razor

@@ -0,0 +1,10 @@
+@using System.Net.Http
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.JSInterop
+@using System.Net.Http.Json
+@using WasmCustomValidation.Client
+@using WasmCustomValidation.Client.Shared
+@using Telerik.Blazor
+@using Telerik.Blazor.Components