unobtrusive-validation - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

index.d.ts

@@ -5,5 +5,11 @@ interface IFormElement extends HTMLElement {
 }
-export declare const validators: ((element: IFormElement) => boolean)[];
-export declare var failed_validation_handler: (e: Event) => void;
-export declare var successful_validation_handler: (e: Event) => void;
+/**
+ * List of handlers that will be executed after validation is finished for the submitted form.
+ * You can use them to hide/show a spinner or do some additional work.
+ */
+export declare const form_validation_handlers: ((evt: Event, succeeded: boolean) => void)[];
+/**
+ * List of validators used by the library to validate form elements
+ */
+export declare const form_validators: ((element: IFormElement) => boolean)[];
 export {};

index.js

@@ -12,3 +12,11 @@ (function (global, factory) {
    */
-  var validators = [];
+  /**
+   * List of handlers that will be executed after validation is finished for the submitted form.
+   * You can use them to hide/show a spinner or do some additional work.
+   */
+  var form_validation_handlers = [];
+  /**
+   * List of validators used by the library to validate form elements
+   */
+  var form_validators = [];
   function getElementValue(element) {
@@ -38,4 +46,4 @@ return element.value;
       var success = true;
-      for (var _i = 0, validators_1 = validators; _i < validators_1.length; _i++) {
-          var validator = validators_1[_i];
+      for (var _i = 0, form_validators_1 = form_validators; _i < form_validators_1.length; _i++) {
+          var validator = form_validators_1[_i];
           success = success && validator(element);
@@ -168,6 +176,12 @@ }
   }
-  validators.push(requiredValidator);
-  validators.push(lengthValidator);
-  validators.push(regexValidator);
-  validators.push(rangeValidator);
+  form_validators.push(requiredValidator);
+  form_validators.push(lengthValidator);
+  form_validators.push(regexValidator);
+  form_validators.push(rangeValidator);
+  function executeHandlers(evt, succeeded) {
+      for (var _i = 0, form_validation_handlers_1 = form_validation_handlers; _i < form_validation_handlers_1.length; _i++) {
+          var handler = form_validation_handlers_1[_i];
+          handler(evt, succeeded);
+      }
+  }
   window.addEventListener('DOMContentLoaded', function () {
@@ -178,15 +192,7 @@ var elements = document.querySelectorAll('form');
               if (!validateForm(form)) {
-                  if (failed_validation_handler) {
-                      failed_validation_handler(ev);
-                  }
+                  executeHandlers(ev, false);
                   ev.preventDefault();
                   return;
               }
-              if (successful_validation_handler) {
-                  successful_validation_handler(ev);
-              }
-              var buttons = form.querySelectorAll("button[data-prevent-double-submit]");
-              [].forEach.call(buttons, function (button) {
-                  button.setAttribute("disabled", "disabled");
-              });
+              executeHandlers(ev, true);
           });
@@ -196,3 +202,4 @@ });
 
-  exports.validators = validators;
+  exports.form_validation_handlers = form_validation_handlers;
+  exports.form_validators = form_validators;
 
@@ -199,0 +206,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

index.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["unobtrusive-validation"]={})}(this,(function(t){"use strict";var e=[];function a(t){return t.value}function n(t){return document.querySelector("span[data-valmsg-for='"+t.getAttribute("name")+"']")}function r(t){var e=n(t);if(e){for(;e.firstChild;){var a=e.firstChild,r=a.parentNode;r&&r.removeChild(a)}e.classList.add("data-validation-valid")}}function i(t){for(var a=!0,n=0,i=e;n<i.length;n++){var u=i[n];a=a&&u(t)}return a&&r(t),a}function u(t,e){r(t);var a=n(t);a&&(a.textContent=e,a.classList.add("field-validation-error"))}function d(t){var e=!0,a=t.getAttribute("data-submitted");a||t.setAttribute("data-submitted","true");var n=t.querySelectorAll("input, textarea, select");return[].forEach.call(n,(function(t){if("hidden"!==t.type){a||function(t){if("TEXTAREA"!==t.nodeName){if("INPUT"===t.nodeName){var e=t;if("text"===e.type||"password"===e.type)return void e.addEventListener("keyup",(function(){i(e)}))}if("SELECT"===t.nodeName){var a=t;a.addEventListener("change",(function(){i(a)}))}}else t.addEventListener("keyup",(function(){i(t)}))}(t);var n=i(t);e=e&&n}})),e}e.push((function(t){var e=t.getAttribute("data-val-required");return!(e&&!a(t).trim())||(u(t,e),!1)})),e.push((function(t){var e=t.getAttribute("data-val-length"),n=t.getAttribute("data-val-length-min"),r=t.getAttribute("data-val-length-max"),i=a(t);if(e&&i){if(r){var d=parseInt(r,10);if(i.length>d)return u(t,e),!1}if(n){var o=parseInt(n,10);if(i.length<o)return u(t,e),!1}}return!0})),e.push((function(t){var e=t.getAttribute("data-val-regex"),n=t.getAttribute("data-val-regex-pattern"),r=a(t);return!(e&&n&&r&&!r.match("^"+n+"$"))||(u(t,e),!1)})),e.push((function(t){var e=t.getAttribute("data-val-range"),n=t.getAttribute("data-val-range-min"),r=t.getAttribute("data-val-range-max"),i=a(t);if(e&&function(t){return!isNaN(t)&&Number.isInteger(parseFloat(t))}(i)){var d=parseInt(i,10);if(n)if(d<parseInt(n,10))return u(t,e),!1;if(r)if(d>parseInt(r,10))return u(t,e),!1}return!0})),window.addEventListener("DOMContentLoaded",(function(){var t=document.querySelectorAll("form");[].forEach.call(t,(function(t){t.addEventListener("submit",(function(e){if(!d(t))return failed_validation_handler&&failed_validation_handler(e),void e.preventDefault();successful_validation_handler&&successful_validation_handler(e);var a=t.querySelectorAll("button[data-prevent-double-submit]");[].forEach.call(a,(function(t){t.setAttribute("disabled","disabled")}))}))}))})),t.validators=e,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["unobtrusive-validation"]={})}(this,(function(t){"use strict";var e=[],n=[];function r(t){return t.value}function a(t){return document.querySelector("span[data-valmsg-for='"+t.getAttribute("name")+"']")}function i(t){var e=a(t);if(e){for(;e.firstChild;){var n=e.firstChild,r=n.parentNode;r&&r.removeChild(n)}e.classList.add("data-validation-valid")}}function u(t){for(var e=!0,r=0,a=n;r<a.length;r++){var u=a[r];e=e&&u(t)}return e&&i(t),e}function o(t,e){i(t);var n=a(t);n&&(n.textContent=e,n.classList.add("field-validation-error"))}function d(t){var e=!0,n=t.getAttribute("data-submitted");n||t.setAttribute("data-submitted","true");var r=t.querySelectorAll("input, textarea, select");return[].forEach.call(r,(function(t){if("hidden"!==t.type){n||function(t){if("TEXTAREA"!==t.nodeName){if("INPUT"===t.nodeName){var e=t;if("text"===e.type||"password"===e.type)return void e.addEventListener("keyup",(function(){u(e)}))}if("SELECT"===t.nodeName){var n=t;n.addEventListener("change",(function(){u(n)}))}}else t.addEventListener("keyup",(function(){u(t)}))}(t);var r=u(t);e=e&&r}})),e}function f(t,n){for(var r=0,a=e;r<a.length;r++){(0,a[r])(t,n)}}n.push((function(t){var e=t.getAttribute("data-val-required");return!(e&&!r(t).trim())||(o(t,e),!1)})),n.push((function(t){var e=t.getAttribute("data-val-length"),n=t.getAttribute("data-val-length-min"),a=t.getAttribute("data-val-length-max"),i=r(t);if(e&&i){if(a){var u=parseInt(a,10);if(i.length>u)return o(t,e),!1}if(n){var d=parseInt(n,10);if(i.length<d)return o(t,e),!1}}return!0})),n.push((function(t){var e=t.getAttribute("data-val-regex"),n=t.getAttribute("data-val-regex-pattern"),a=r(t);return!(e&&n&&a&&!a.match("^"+n+"$"))||(o(t,e),!1)})),n.push((function(t){var e=t.getAttribute("data-val-range"),n=t.getAttribute("data-val-range-min"),a=t.getAttribute("data-val-range-max"),i=r(t);if(e&&function(t){return!isNaN(t)&&Number.isInteger(parseFloat(t))}(i)){var u=parseInt(i,10);if(n)if(u<parseInt(n,10))return o(t,e),!1;if(a)if(u>parseInt(a,10))return o(t,e),!1}return!0})),window.addEventListener("DOMContentLoaded",(function(){var t=document.querySelectorAll("form");[].forEach.call(t,(function(t){t.addEventListener("submit",(function(e){if(!d(t))return f(e,!1),void e.preventDefault();f(e,!0)}))}))})),t.form_validation_handlers=e,t.form_validators=n,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.min.js.map

index.ts

@@ -12,6 +12,12 @@ /*
 
-export const validators: ((element: IFormElement) => boolean)[] = [];
+/**
+ * List of handlers that will be executed after validation is finished for the submitted form.
+ * You can use them to hide/show a spinner or do some additional work.
+ */
+export const form_validation_handlers: ((evt: Event, succeeded: boolean) => void)[] = [];
 
-export declare var failed_validation_handler: (e: Event) => void;
-export declare var successful_validation_handler: (e: Event) => void;
+/**
+ * List of validators used by the library to validate form elements
+ */
+export const form_validators: ((element: IFormElement) => boolean)[] = [];
 
@@ -46,3 +52,3 @@ function getElementValue(element: IFormElement): string {
     let success = true;
-    for (const validator of validators) {
+    for (const validator of form_validators) {
         success = success && validator(element);
@@ -188,7 +194,13 @@ }
 
-validators.push(requiredValidator);
-validators.push(lengthValidator);
-validators.push(regexValidator);
-validators.push(rangeValidator);
+form_validators.push(requiredValidator);
+form_validators.push(lengthValidator);
+form_validators.push(regexValidator);
+form_validators.push(rangeValidator);
 
+function executeHandlers(evt: Event, succeeded: boolean) {
+    for (let handler of form_validation_handlers) {
+        handler(evt, succeeded);
+    }
+}
+
 window.addEventListener('DOMContentLoaded', function() {
@@ -200,5 +212,3 @@ var elements = document.querySelectorAll<HTMLFormElement>('form');
             if (!validateForm(form)) {
-                if (failed_validation_handler) {
-                    failed_validation_handler(ev);
-                }
+                executeHandlers(ev, false);
                 ev.preventDefault();
@@ -208,12 +218,5 @@ return;
 
-            if (successful_validation_handler) {
-                successful_validation_handler(ev);
-            }
-
-            var buttons = form.querySelectorAll("button[data-prevent-double-submit]");
-            [].forEach.call(buttons, function(button: HTMLButtonElement) {
-                button.setAttribute("disabled", "disabled");
-            });
+            executeHandlers(ev, true);
         });
     });
 });

package.json

 {
   "name": "unobtrusive-validation",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Lightweight unobtrusive ASP.NET validation without dependencies",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -5,3 +5,3 @@ # Unobtrusive validation library without dependencies
 
-The library is compatible with unobtrusive validation library used in ASP.NET, but it doesn't require JQuery library.
+The library is compatible with unobtrusive validation library used in `ASP.NET`, but it doesn't require JQuery.
 
@@ -14,2 +14,28 @@ Use the following command to install the library:
 
+You will also need to include the provided stylesheet located in the `index.css` file. As an alternative you can define the class `.field-validation-error` directly in your codebase without importing the file.
+
+## Execute a function after validation
+
+You can execute a function after validation to perform some additional work. For example, you can show/hide a spinner that prevents double submits:
+
+```javascript
+    // if you use a module bundler
+
+    import { form_validation_handlers } from 'unobtrusive-validation';
+
+    form_validation_handlers.push(function(evt, succeeded) {
+        if (!succeeded) {
+            hideSpinner();
+        }
+    });
+
+    // without using a module bundler
+
+    window["unobtrusive-validation"].form_validation_handlers.push(function(evt, succeeded) {
+        if (!succeeded) {
+            hideSpinner();
+        }
+    });
+```
+
 ## License
@@ -16,0 +42,0 @@

No alert changes

Improved metrics

Total package byte prevSize

45631

increased by1.35%

Lines of code

445

increased by3.49%

Number of lines in readme file

62

increased by72.22%

Worsened metrics

Number of package files

12

decreased by-7.69%

No dependency changes