Merge pull request #62 from haacked/fix-firefox-submit

Fix Firefox post-validation `submit` handling
haacked · Jul 30, 2023 · d910bd3 · d910bd3
2 parents f09bb57 + 630663d
commit d910bd3
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 23 deletions.
diff --git a/DemoWeb.csproj b/DemoWeb.csproj
@@ -8,6 +8,8 @@
   </PropertyGroup>
 
   <Target Name="CopyFiles">
+    <Exec Command="npm run build" />
+
     <ItemGroup>
       <!-- Because this ItemGroup is inside the target, this will enumerate
            all files just before calling Copy. If the ItemGroup were outside

diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml
@@ -109,9 +109,21 @@
     </form>
 </fieldset>
 
+@section scripts {
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            console.log('Listening to Form 4')
+            document.getElementById('prevent-default').addEventListener('submit', function (e) {
+                e.preventDefault();
+                let data = new FormData(e.currentTarget);
+                alert(new URLSearchParams(data));
+            });
+        });
+    </script>
+}
 <fieldset>
-    <legend>Form 4</legend>
-    <form method="post">
+    <legend>Form 4 (<code>preventDefault()</code>)</legend>
+    <form method="post" id="prevent-default">
         <div class="form-field">
             <label asp-for="Input.SomeRequiredField"></label>
             <input asp-for="Input.SomeRequiredField"/>

diff --git a/Pages/Shared/_Layout.cshtml b/Pages/Shared/_Layout.cshtml
@@ -12,8 +12,9 @@
 <script src="/dist/aspnet-validation.js"></script>
 <script>
     const service = new aspnetValidation.ValidationService(console);
-    service.bootstrap();
+    service.bootstrap(console.log);
 </script>
+@RenderSection("scripts", required: false)
 
 </body>
 </html>
diff --git a/dist/aspnet-validation.js b/dist/aspnet-validation.js
@@ -859,18 +859,30 @@ var ValidationService = /** @class */ (function () {
             }
             validating = true;
             _this.logger.log('Validating', form);
-            validate.then(function (success) {
-                _this.logger.log('Validated (success = %s)', success, form);
-                if (callback) {
-                    callback(success);
-                    return;
-                }
-                var validationEvent = new CustomEvent('validation', {
-                    detail: { valid: success }
+            validate.then(function (success) { return __awaiter(_this, void 0, void 0, function () {
+                var validationEvent;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.logger.log('Validated (success = %s)', success, form);
+                            if (callback) {
+                                callback(success);
+                                return [2 /*return*/];
+                            }
+                            validationEvent = new CustomEvent('validation', {
+                                detail: { valid: success }
+                            });
+                            form.dispatchEvent(validationEvent);
+                            // Firefox fix: redispatch 'submit' after finished handling this event
+                            return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 0); })];
+                        case 1:
+                            // Firefox fix: redispatch 'submit' after finished handling this event
+                            _a.sent();
+                            this.handleValidated(form, success, e);
+                            return [2 /*return*/];
+                    }
                 });
-                form.dispatchEvent(validationEvent);
-                _this.handleValidated(form, success, e);
-            }).catch(function (error) {
+            }); }).catch(function (error) {
                 _this.logger.log('Validation error', error);
             }).finally(function () {
                 validating = false;

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.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aspnet-client-validation",
-  "version": "0.8.13",
+  "version": "0.8.14",
   "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
@@ -779,7 +779,6 @@ export class ValidationService {
      * @returns
      */
     isFieldValid = (field: HTMLElement, prevalidate: boolean = true, callback?: ValidatedCallback) => {
-
         if (prevalidate) {
             let form = field.closest("form");
             if (form != null) {
@@ -846,7 +845,7 @@ export class ValidationService {
             validating = true;
             this.logger.log('Validating', form);
 
-            validate.then(success => {
+            validate.then(async success => {
                 this.logger.log('Validated (success = %s)', success, form);
                 if (callback) {
                     callback(success);
@@ -859,6 +858,8 @@ export class ValidationService {
                     });
                 form.dispatchEvent(validationEvent);
 
+                // Firefox fix: redispatch 'submit' after finished handling this event
+                await new Promise(resolve => setTimeout(resolve, 0));
                 this.handleValidated(form, success, e);
             }).catch(error => {
                 this.logger.log('Validation error', error);
@@ -963,7 +964,6 @@ export class ValidationService {
         let renderedMessages = [];
         let ul = document.createElement('ul');
         for (let key in this.summary) {
-
             // It could be that the message we are rendering belongs to one of a fieldset of multiple inputs that's not selected,
             // even if another one in the fieldset is. In that case the fieldset is valid, and we shouldn't render the message.
             const matchingElement = this.elementByUID[key];
@@ -1054,7 +1054,6 @@ export class ValidationService {
             this.ValidationInputValidCssClassName);
 
         if (input.form) {
-
             // Adding an error to one input should also add it to others with the same name (i.e. for radio button and checkbox lists).
             const inputs = input.form.querySelectorAll(`input[name="${input.name}"]`);
             for (let i = 0; i < inputs.length; i++) {
@@ -1112,7 +1111,6 @@ export class ValidationService {
      */
     createValidator(input: ValidatableElement, directives: ValidationDirective) {
         return async () => {
-
             // only validate visible fields
             if (!this.isHidden(input)) {
                 for (let key in directives) {
@@ -1153,7 +1151,6 @@ export class ValidationService {
 
             this.removeError(input);
             return true;
-
         };
     }