#97 Delayed Validation Sample

Pages/Demos/DelayedValidation.cshtml

@@ -0,0 +1,28 @@
+@page
+@model DemoWeb.Pages.Demos.DelayedValidation
+@{
+    Layout = "Shared/_Layout";
+}
+
+<div asp-validation-summary="All">
+    <span>Please correct the following errors</span>
+</div>
+
+<fieldset>
+    <legend>Required Email input with delayed validation.</legend>
+    <form method="post">
+        <div class="form-field">
+            <label asp-for="EmailAddress"></label>
+            <input asp-for="EmailAddress" />
+            <span asp-validation-for="EmailAddress"></span>
+        </div>
+        <input type="submit" value="Submit"/>
+    </form>
+</fieldset>
+
+@section Scripts {
+    <script>
+        const service = new aspnetValidation.ValidationService(console);
+        service.bootstrap({ delayedValidation: true });
+    </script>
+}

Pages/Demos/DelayedValidation.cshtml.cs

@@ -0,0 +1,14 @@
+using System.ComponentModel.DataAnnotations;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.AspNetCore.Mvc.Rendering;
+
+namespace DemoWeb.Pages.Demos;
+
+public class DelayedValidation : PageModel
+{
+    [BindProperty]
+    [Required]
+    [EmailAddress]
+    public string? EmailAddress { get; set; }
+}

Pages/Index.cshtml

@@ -14,6 +14,7 @@
     <li><a asp-page="Demos/FormAction">Form Action</a></li>
     <li><a asp-page="Demos/DisabledInputsWithWatch">Disabled inputs (<code>{watch: true}</code>)</a></li>
     <li><a asp-page="Demos/DisabledInputsNoWatch">Disabled inputs (no watch)</a></li>
+    <li><a asp-page="Demos/DelayedValidation">Delayed Validation</a></li>
 </ul>
 
 @if (Model.StatusMessage != null) {

dist/aspnet-validation.js

@@ -690,6 +690,7 @@ var ValidationService = /** @class */ (function () {
             root: document.body,
             watch: false,
             addNoValidate: true,
+            delayedValidation: false,
         };
         /**
          * Override CSS class name for input validation error. Default: 'input-validation-error'
@@ -1096,6 +1097,12 @@ var ValidationService = /** @class */ (function () {
                         validate = this.validators[uid];
                         if (!validate)
                             return [2 /*return*/, true];
+                        if (this.options.delayedValidation &&
+                            event && event.type === 'input' &&
+                            !input.classList.contains(this.ValidationInputCssClassName)) {
+                            // When delayedValidation=true, "input" only takes it back to valid. "Change" can make it invalid.
+                            return [2 /*return*/, true];
+                        }
                         this.logger.log('Validating', { event: event });
                         _a.label = 1;
                     case 1:
@@ -1120,9 +1127,17 @@ var ValidationService = /** @class */ (function () {
                 cb(event, callback);
             }, _this.debounce);
         };
-        var validateEvent = input.dataset.valEvent || input instanceof HTMLSelectElement ? 'change' : 'input';
-        input.addEventListener(validateEvent, cb.debounced);
-        cb.remove = function () { return input.removeEventListener(validateEvent, cb.debounced); };
+        var validateEvent = input.dataset.valEvent || input instanceof HTMLSelectElement ? 'change' :
+            (this.options.delayedValidation ? 'input change' : 'input');
+        var events = validateEvent.split(' ');
+        events.forEach(function (eventName) {
+            input.addEventListener(eventName, cb.debounced);
+        });
+        cb.remove = function () {
+            events.forEach(function (eventName) {
+                input.removeEventListener(eventName, cb.debounced);
+            });
+        };
         this.inputEvents[uid] = cb;
     };
     ValidationService.prototype.removeInput = function (input) {
@@ -1378,6 +1393,7 @@ var ValidationService = /** @class */ (function () {
      * Load default validation providers and scans the entire document when ready.
      * @param options.watch If set to true, a MutationObserver will be used to continuously watch for new elements that provide validation directives.
      * @param options.addNoValidate If set to true (the default), a novalidate attribute will be added to the containing form in validate elements.
+     * @param options.delayedValidation If set to false (the default), validation happens while user inputs. If set to true, validation happens on blur, unless input is already invalid, in which case it will validate on input to indicate the value is valid as soon as possible.
      */
     ValidationService.prototype.bootstrap = function (options) {
         var _this = this;

src/index.ts

@@ -1076,7 +1076,7 @@ export class ValidationService {
                 !input.classList.contains(this.ValidationInputCssClassName)
             ) {
                 // When delayedValidation=true, "input" only takes it back to valid. "Change" can make it invalid.
-                return;
+                return true;
             }
 
             this.logger.log('Validating', { event });

types/index.d.ts

@@ -99,6 +99,7 @@ export interface ValidationServiceOptions {
     watch: boolean;
     root: ParentNode;
     addNoValidate: boolean;
+    delayedValidation: boolean;
 }
 /**
  * Responsible for managing the DOM elements and running the validation providers.
@@ -335,6 +336,7 @@ export declare class ValidationService {
      * Load default validation providers and scans the entire document when ready.
      * @param options.watch If set to true, a MutationObserver will be used to continuously watch for new elements that provide validation directives.
      * @param options.addNoValidate If set to true (the default), a novalidate attribute will be added to the containing form in validate elements.
+     * @param options.delayedValidation If set to false (the default), validation happens while user inputs. If set to true, validation happens on blur, unless input is already invalid, in which case it will validate on input to indicate the value is valid as soon as possible.
      */
     bootstrap(options?: Partial<ValidationServiceOptions>): void;
     /**