Merge pull request #32 from dahlbyk/handleValidated

Extract `handleValidated`
haacked · Feb 14, 2023 · 4abfdc4 · 4abfdc4
2 parents da04d3c + c3a6e18
commit 4abfdc4
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 61 deletions.
diff --git a/dist/aspnet-validation.js b/dist/aspnet-validation.js
@@ -458,9 +458,31 @@ var ValidationService = /** @class */ (function () {
             var formUID = _this.getElementUID(form);
             var formValidationEvent = _this.elementEvents[formUID];
             if (formValidationEvent) {
-                formValidationEvent(null, callback);
+                formValidationEvent(undefined, callback);
             }
         };
+        /**
+         * Handler for validated form submit events.
+         * Default calls `submitValidForm(form)` on success
+         * and `focusFirstInvalid(form)` on failure.
+         * @param form The form that has been validated.
+         * @param success The validation result.
+         */
+        this.handleValidated = function (form, success) {
+            if (success) {
+                _this.submitValidForm(form);
+            }
+            else {
+                _this.focusFirstInvalid(form);
+            }
+        };
+        /**
+         * Calls `requestSubmit()` on the provided form.
+         * @param form The validated form to submit
+         */
+        this.submitValidForm = function (form) {
+            form.requestSubmit();
+        };
         /**
          * Focuses the first invalid element within the provided form
          * @param form
@@ -678,7 +700,7 @@ var ValidationService = /** @class */ (function () {
     ValidationService.prototype.getFormValidationTask = function (formUID) {
         var formInputUIDs = this.formInputs[formUID];
         if (!formInputUIDs || formInputUIDs.length === 0) {
-            return null;
+            return Promise.resolve(true);
         }
         var formValidators = [];
         for (var i = 0; i < formInputUIDs.length; i++) {
@@ -694,7 +716,7 @@ var ValidationService = /** @class */ (function () {
      */
     ValidationService.prototype.shouldValidate = function (e) {
         // Skip client-side validation if the form has been submitted via a button that has the "formnovalidate" attribute.
-        return !(e !== null && e['submitter'] && e['submitter']['formNoValidate']);
+        return !(e && e['submitter'] && e['submitter']['formNoValidate']);
     };
     /**
      * Tracks a <form> element as parent of an input UID. When the form is submitted, attempts to validate the said input asynchronously.
@@ -739,30 +761,15 @@ var ValidationService = /** @class */ (function () {
             _this.logger.log('Validating', form);
             validate.then(function (success) {
                 _this.logger.log('Validated (success = %s)', success, form);
-                var isProgrammaticValidate = !e;
-                if (success) {
-                    if (isProgrammaticValidate) {
-                        callback(true);
-                        return;
-                    }
-                    var validationEvent_1 = new CustomEvent('validation', {
-                        detail: { valid: true }
-                    });
-                    form.dispatchEvent(validationEvent_1);
-                    //Resubmit the form here, after the async validation is completed.
-                    form.requestSubmit();
+                if (callback) {
+                    callback(success);
                     return;
                 }
                 var validationEvent = new CustomEvent('validation', {
-                    detail: { valid: false }
+                    detail: { valid: success }
                 });
                 form.dispatchEvent(validationEvent);
-                if (isProgrammaticValidate) {
-                    callback(false);
-                }
-                else {
-                    _this.focusFirstInvalid(form);
-                }
+                _this.handleValidated(form, success);
             }).catch(function (error) {
                 _this.logger.log('Validation error', error);
             }).finally(function () {

diff --git a/dist/aspnet-validation.min.js b/dist/aspnet-validation.min.js
diff --git a/dist/aspnet-validation.min.js.map b/dist/aspnet-validation.min.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aspnet-client-validation",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Enables ASP.NET MVC client-side validation, without jQuery!",
   "main": "dist/aspnet-validation.js",
   "style": "dist/aspnet-validation.css",

diff --git a/src/index.ts b/src/index.ts
@@ -49,6 +49,11 @@ export type ValidationDirective = {
  */
 export type ValidationProvider = (value: string, element: HTMLInputElement, params: StringKeyValuePair) => boolean | string | Promise<boolean | string>;
 
+/**
+ * Callback to receive the result of validating a form.
+ */
+export type ValidatedCallback = (success: boolean) => void;
+
 /**
  * A callback method signature that kickstarts a new validation task for an input element, as a Boolean Promise.
  */
@@ -385,7 +390,7 @@ export class ValidationService {
     /**
      * A key-value map for element UID to its trigger element (submit event for <form>, input event for <textarea> and <input>).
      */
-    private elementEvents: { [id: string]: (e: Event, callback?: Function) => any } = {};
+    private elementEvents: { [id: string]: (e?: Event, callback?: ValidatedCallback) => void } = {};
 
     /**
      * A key-value map of input UID to its validation error message.
@@ -572,7 +577,7 @@ export class ValidationService {
     private getFormValidationTask(formUID: string) {
         let formInputUIDs = this.formInputs[formUID];
         if (!formInputUIDs || formInputUIDs.length === 0) {
-            return null;
+            return Promise.resolve(true);
         }
 
         let formValidators: Validator[] = [];
@@ -591,14 +596,37 @@ export class ValidationService {
      * @param form
      * @param callback
      */
-    validateForm = (form: HTMLFormElement, callback: Function) => {
+    validateForm = (form: HTMLFormElement, callback?: ValidatedCallback) => {
         let formUID = this.getElementUID(form);
         let formValidationEvent = this.elementEvents[formUID];
         if (formValidationEvent) {
-            formValidationEvent(null, callback);
+            formValidationEvent(undefined, callback);
         }
     }
 
+    /**
+     * Handler for validated form submit events.
+     * Default calls `submitValidForm(form)` on success
+     * and `focusFirstInvalid(form)` on failure.
+     * @param form The form that has been validated.
+     * @param success The validation result.
+     */
+    handleValidated = (form: HTMLFormElement, success: boolean) => {
+        if (success) {
+            this.submitValidForm(form);
+        }
+        else {
+            this.focusFirstInvalid(form);
+        }
+    }
+
+    /**
+     * Calls `requestSubmit()` on the provided form.
+     * @param form The validated form to submit
+     */
+    submitValidForm = (form: HTMLFormElement) => {
+        form.requestSubmit();
+    }
 
     /**
      * Focuses the first invalid element within the provided form
@@ -624,7 +652,7 @@ export class ValidationService {
      * @param callback
      * @returns
      */
-    isValid = (form: HTMLFormElement, prevalidate: boolean = true, callback: Function) => {
+    isValid = (form: HTMLFormElement, prevalidate: boolean = true, callback?: ValidatedCallback) => {
         if (prevalidate) {
             this.validateForm(form, callback);
         }
@@ -641,7 +669,7 @@ export class ValidationService {
      * @param callback
      * @returns
      */
-    isFieldValid = (field: HTMLElement, prevalidate: boolean = true, callback: Function) => {
+    isFieldValid = (field: HTMLElement, prevalidate: boolean = true, callback?: ValidatedCallback) => {
 
         if (prevalidate) {
             let form = field.closest("form");
@@ -658,9 +686,9 @@ export class ValidationService {
      * Returns true if the event triggering the form submission indicates we should validate the form.
      * @param e
      */
-    private shouldValidate(e: Event) {
+    private shouldValidate(e?: Event) {
         // Skip client-side validation if the form has been submitted via a button that has the "formnovalidate" attribute.
-        return !(e !== null && e['submitter'] && e['submitter']['formNoValidate']);
+        return !(e && e['submitter'] && e['submitter']['formNoValidate']);
     }
 
     /**
@@ -686,7 +714,7 @@ export class ValidationService {
         }
 
         let validating = false;
-        let cb = (e: Event, callback?: Function) => {
+        let cb = (e?: Event, callback?: ValidatedCallback) => {
             // Prevent recursion
             if (validating) {
                 return;
@@ -712,36 +740,18 @@ export class ValidationService {
 
             validate.then(success => {
                 this.logger.log('Validated (success = %s)', success, form);
-                let isProgrammaticValidate = !e;
-                if (success) {
-                    if (isProgrammaticValidate) {
-                        callback(true);
-                        return;
-                    }
-                    const validationEvent = new CustomEvent('validation',
-                        {
-                            detail: { valid: true }
-                        });
-                    form.dispatchEvent(validationEvent);
-
-                    //Resubmit the form here, after the async validation is completed.
-                    form.requestSubmit();
-
+                if (callback) {
+                    callback(success);
                     return;
                 }
 
                 const validationEvent = new CustomEvent('validation',
                     {
-                        detail: { valid: false }
+                        detail: { valid: success }
                     });
                 form.dispatchEvent(validationEvent);
 
-                if (isProgrammaticValidate) {
-                    callback(false);
-                }
-                else {
-                    this.focusFirstInvalid(form);
-                }
+                this.handleValidated(form, success);
             }).catch(error => {
                 this.logger.log('Validation error', error);
             }).finally(() => {

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -32,6 +32,10 @@ export declare type ValidationDirective = {
  * Promise return signifies asynchronous plugin behavior, with same behavior as Boolean or String.
  */
 export declare type ValidationProvider = (value: string, element: HTMLInputElement, params: StringKeyValuePair) => boolean | string | Promise<boolean | string>;
+/**
+ * Callback to receive the result of validating a form.
+ */
+export declare type ValidatedCallback = (success: boolean) => void;
 /**
  * Contains default implementations for ASP.NET Core MVC validation attributes.
  */
@@ -167,7 +171,20 @@ export declare class ValidationService {
      * @param form
      * @param callback
      */
-    validateForm: (form: HTMLFormElement, callback: Function) => void;
+    validateForm: (form: HTMLFormElement, callback?: ValidatedCallback) => void;
+    /**
+     * Handler for validated form submit events.
+     * Default calls `submitValidForm(form)` on success
+     * and `focusFirstInvalid(form)` on failure.
+     * @param form The form that has been validated.
+     * @param success The validation result.
+     */
+    handleValidated: (form: HTMLFormElement, success: boolean) => void;
+    /**
+     * Calls `requestSubmit()` on the provided form.
+     * @param form The validated form to submit
+     */
+    submitValidForm: (form: HTMLFormElement) => void;
     /**
      * Focuses the first invalid element within the provided form
      * @param form
@@ -180,15 +197,15 @@ export declare class ValidationService {
      * @param callback
      * @returns
      */
-    isValid: (form: HTMLFormElement, prevalidate: boolean, callback: Function) => boolean;
+    isValid: (form: HTMLFormElement, prevalidate?: boolean, callback?: ValidatedCallback) => boolean;
     /**
      * Returns true if the provided field is valid, and then calls the callback. The form will be validated before checking, unless prevalidate is set to false
      * @param form
      * @param prevalidate
      * @param callback
      * @returns
      */
-    isFieldValid: (field: HTMLElement, prevalidate: boolean, callback: Function) => boolean;
+    isFieldValid: (field: HTMLElement, prevalidate?: boolean, callback?: ValidatedCallback) => boolean;
     /**
      * Returns true if the event triggering the form submission indicates we should validate the form.
      * @param e