Add a demo to show how to display asp-validaiton-summary on field cha…

…nges.

src/Presentation/DL.NetCore.EmptySolution.Web.UI/Controllers/UserController.cs

@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+
+namespace DL.NetCore.EmptySolution.Web.UI.Controllers
+{
+    public class UserController : Controller
+    {
+        public IActionResult Invite()
+        {
+            return View();
+        }
+    }
+}

src/Presentation/DL.NetCore.EmptySolution.Web.UI/Models/User/InviteUserViewModel.cs

@@ -0,0 +1,18 @@
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+
+namespace DL.NetCore.EmptySolution.Web.UI.Models.User
+{
+    public class InviteUserViewModel
+    {
+        [DisplayName("Email Address")]
+        [Required(ErrorMessage = "Please provide the invitee's Email Address")]
+        [EmailAddress(ErrorMessage = "Please provide a valid email address")]
+        [StringLength(254, ErrorMessage = "Maximum email address length exceeded")]
+        public string EmailAddress { get; set; }
+
+        [DisplayName("Display Name")]
+        [Required(ErrorMessage = "Please provide the invitee's display name")]
+        public string DisplayName { get; set; }
+    }
+}

src/Presentation/DL.NetCore.EmptySolution.Web.UI/Views/Home/Index.cshtml

@@ -10,7 +10,7 @@
 </div>
 <div class="row">
     <div class="col-lg-4">
-        <div class="card">
+        <div class="card mb-3">
             <div class="card-body">
                 <h5>Integrate with DataTables.js</h5>
                 <p class="card-text">
@@ -23,7 +23,7 @@
         </div>
     </div>
     <div class="col-lg-4">
-        <div class="card">
+        <div class="card mb-3">
             <div class="card-body">
                 <h5>Search with query parameters</h5>
                 <p class="card-text">
@@ -36,7 +36,7 @@
         </div>
     </div>
     <div class="col-lg-4">
-        <div class="card">
+        <div class="card mb-3">
             <div class="card-body">
                 <h5>Tag Helper asp-validation-summary</h5>
                 <p class="card-text">
@@ -48,4 +48,17 @@
             </div>
         </div>
     </div>
+    <div class="col-lg-4">
+        <div class="card mb-3">
+            <div class="card-body">
+                <h5>Display asp-validation-summary on field change</h5>
+                <p class="card-text">
+                    Demo on how to display the validation summary when a field changes instead of on form submit.
+                </p>
+                <a asp-area="" asp-controller="user" asp-action="invite">
+                    Invite a user
+                </a>
+            </div>
+        </div>
+    </div>
 </div>

src/Presentation/DL.NetCore.EmptySolution.Web.UI/Views/User/Invite.cshtml

@@ -0,0 +1,46 @@
+@model DL.NetCore.EmptySolution.Web.UI.Models.User.InviteUserViewModel
+@{
+    ViewBag.Title = "Invite User";
+}
+
+<h2>Invite User</h2>
+<div class="row">
+    <div class="col-md-6">
+        <h5>Simple Way: reuse asp-message-for</h5>
+        <form asp-area="" asp-controller="user" asp-action="invite"
+              data-ajax="true"
+              data-ajax-method="POST"
+              data-ajax-begin="onBegin"
+              data-ajax-complete="onComplete">
+            <div class="form-group">
+                <label asp-for="EmailAddress"></label>
+                <input asp-for="EmailAddress" class="form-control" />
+            </div>
+            <div class="form-group">
+                <label asp-for="DisplayName"></label>
+                <input asp-for="DisplayName" class="form-control" />
+            </div>
+
+            <div class="form-group clientside-validation-summary">
+                <span asp-validation-for="EmailAddress" class="text-danger"></span>
+                <span asp-validation-for="DisplayName" class="text-danger"></span>
+            </div>
+
+            <button type="submit" class="btn btn-primary">Invite</button>
+        </form>
+    </div>
+</div>
+
+@section scripts {
+    <script type="text/javascript">
+        $(function () {
+            window.onBegin = function () {
+
+            };
+
+            window.onComplete = function () {
+
+            };
+        });
+    </script>
+}

src/Presentation/DL.NetCore.EmptySolution.Web.UI/assets/css/extra/_validations.scss

@@ -1,4 +1,14 @@
 .validation-summary-errors,
 .field-validation-error {
     font-size: .9rem;
+}
+
+.clientside-validation-summary {
+    display: flex;
+    flex-flow: column nowrap;
+
+    .field-validation-error > span:before {
+        content: "*";
+        padding-right: .3rem;
+    }
 }

src/Presentation/DL.NetCore.EmptySolution.Web.UI/assets/css/global.css

@@ -7211,3 +7211,10 @@ label.required:not(.custom-control-label):after {
 .validation-summary-errors,
 .field-validation-error {
   font-size: .9rem; }
+
+.clientside-validation-summary {
+  display: flex;
+  flex-flow: column nowrap; }
+  .clientside-validation-summary .field-validation-error > span:before {
+    content: "*";
+    padding-right: .3rem; }