Merge pull request #68 from haacked/andrewlock-add-novalidate

Automatically set novalidate on closest form
haacked · Nov 4, 2023 · 1545f4c · 1545f4c
2 parents 76643aa + f46ad49
commit 1545f4c
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 15 deletions.
diff --git a/Pages/Shared/_Layout.cshtml b/Pages/Shared/_Layout.cshtml
@@ -12,7 +12,7 @@
 <script src="/dist/aspnet-validation.js"></script>
 <script>
     const service = new aspnetValidation.ValidationService(console);
-    service.bootstrap(console.log);
+    service.bootstrap();
 </script>
 @RenderSection("scripts", required: false)
 

diff --git a/dist/aspnet-validation.js b/dist/aspnet-validation.js
@@ -625,6 +625,14 @@ var ValidationService = /** @class */ (function () {
             var fieldUID = _this.getElementUID(field);
             return _this.summary[fieldUID] === undefined;
         };
+        /**
+         * Options for this instance of @type {ValidationService}.
+         */
+        this.options = {
+            root: document.body,
+            watch: false,
+            addNoValidate: true,
+        };
         /**
          * Override CSS class name for input validation error. Default: 'input-validation-error'
          */
@@ -884,6 +892,13 @@ var ValidationService = /** @class */ (function () {
         var add = (this.formInputs[formUID].indexOf(inputUID) === -1);
         if (add) {
             this.formInputs[formUID].push(inputUID);
+            if (this.options.addNoValidate) {
+                this.logger.log('Setting novalidate on form', form);
+                form.setAttribute('novalidate', 'novalidate');
+            }
+            else {
+                this.logger.log('Not setting novalidate on form', form);
+            }
         }
         else {
             this.logger.log("Form input for UID '%s' is already tracked", inputUID);
@@ -1254,17 +1269,18 @@ 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 elemets.
      */
     ValidationService.prototype.bootstrap = function (options) {
         var _this = this;
-        options = options || {};
+        Object.assign(this.options, options);
         this.addMvcProviders();
         var document = window.document;
-        var root = options.root || document.body;
+        var root = this.options.root;
         var init = function () {
             _this.scan(root);
             // Watch for further mutations after initial scan
-            if (options.watch) {
+            if (_this.options.watch) {
                 _this.watch(root);
             }
         };

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.9.1",
+  "version": "0.9.2",
   "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
@@ -403,6 +403,15 @@ export class MvcValidationProviders {
     }
 }
 
+/**
+ * Configuration for @type {ValidationService}.
+ */
+export interface ValidationServiceOptions {
+    watch: boolean;
+    root: ParentNode;
+    addNoValidate: boolean;
+}
+
 /**
  * Responsible for managing the DOM elements and running the validation providers.
  */
@@ -863,6 +872,14 @@ export class ValidationService {
         let add = (this.formInputs[formUID].indexOf(inputUID) === -1);
         if (add) {
             this.formInputs[formUID].push(inputUID);
+
+            if (this.options.addNoValidate) {
+                this.logger.log('Setting novalidate on form', form);
+                form.setAttribute('novalidate', 'novalidate');
+            }
+            else {
+                this.logger.log('Not setting novalidate on form', form);
+            }
         }
         else {
             this.logger.log("Form input for UID '%s' is already tracked", inputUID);
@@ -1264,21 +1281,31 @@ export class ValidationService {
         }
     }
 
+    /**
+     * Options for this instance of @type {ValidationService}.
+     */
+    private options: ValidationServiceOptions = {
+        root: document.body,
+        watch: false,
+        addNoValidate: true,
+    }
+
     /**
      * 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 elemets.
      */
-    bootstrap(options?: { watch?: boolean, root?: ParentNode }) {
-        options = options || {};
+    bootstrap(options?: Partial<ValidationServiceOptions>) {
+        Object.assign(this.options, options);
 
         this.addMvcProviders();
         let document = window.document;
-        const root = options.root || document.body;
+        const root = this.options.root;
         const init = () => {
             this.scan(root);
 
             // Watch for further mutations after initial scan
-            if (options.watch) {
+            if (this.options.watch) {
                 this.watch(root);
             }
         }

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -92,6 +92,14 @@ export declare class MvcValidationProviders {
      */
     remote: ValidationProvider;
 }
+/**
+ * Configuration for @type {ValidationService}.
+ */
+export interface ValidationServiceOptions {
+    watch: boolean;
+    root: ParentNode;
+    addNoValidate: boolean;
+}
 /**
  * Responsible for managing the DOM elements and running the validation providers.
  */
@@ -305,14 +313,16 @@ export declare class ValidationService {
      * @param removeClass Class to remove
      */
     private swapClasses;
+    /**
+     * Options for this instance of @type {ValidationService}.
+     */
+    private options;
     /**
      * 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 elemets.
      */
-    bootstrap(options?: {
-        watch?: boolean;
-        root?: ParentNode;
-    }): void;
+    bootstrap(options?: Partial<ValidationServiceOptions>): void;
     /**
      * Scans the provided root element for any validation directives and attaches behavior to them.
      */