Improved compatibility with Razor Pages BindProperty model. Add form reset event.

Author: ryanelian

dist/aspnet-validation.js

@@ -1,9 +1,9 @@
 {
   "name": "aspnet-validation",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Enables ASP.NET Core MVC client-side validation, without JQuery!",
   "main": "./dist/aspnet-validation.js",
-  "types": "./typings/index.d.ts",
+  "types": "./types/index.d.ts",
   "repository": "https://github.com/ryanelian/aspnet-validation",
   "bugs": {
     "url": "https://github.com/ryanelian/aspnet-validation/issues"
@@ -15,7 +15,7 @@
     "build": "webpack && webpack --config webpack.config.min.js"
   },
   "devDependencies": {
-    "ts-loader": "^3.0.2",
+    "ts-loader": "^3.0.3",
     "typescript": "^2.5.3",
     "webpack": "^3.8.1"
   }

dist/aspnet-validation.min.js

@@ -346,6 +346,11 @@ export class ValidationService {
      */
     private elementUIDs: ElementUID[] = [];
 
+    /**
+     * A key-value collection of UID to Element for quick lookup. 
+     */
+    private elementByUID: { [uid: string]: Element } = {};
+
     /**
      * A key-value collection of input UIDs for a <form> UID.
      */
@@ -429,13 +434,13 @@ export class ValidationService {
 
         for (let i = 0; i < validationMessageElements.length; i++) {
             let e = validationMessageElements[i];
-            let id = e.getAttribute('data-valmsg-for');
+            let name = e.getAttribute('data-valmsg-for');
 
-            if (!this.messageFor[id]) {
-                this.messageFor[id] = [];
+            if (!this.messageFor[name]) {
+                this.messageFor[name] = [];
             }
 
-            this.messageFor[id].push(e);
+            this.messageFor[name].push(e);
         }
     }
 
@@ -514,6 +519,7 @@ export class ValidationService {
             node: node,
             uid: uid
         });
+        this.elementByUID[uid] = node;
         return uid;
     }
 
@@ -574,6 +580,24 @@ export class ValidationService {
         };
 
         form.addEventListener('submit', cb);
+        form.addEventListener('reset', e => {
+            let uids = this.formInputs[formUID];
+
+            for (let uid of uids) {
+                let input = this.elementByUID[uid] as HTMLInputElement;
+                input.classList.remove('input-validation-error');
+
+                let spans = this.messageFor[input.name];
+                if (spans) {
+                    for (let i = 0; i < spans.length; i++) {
+                        spans[i].innerHTML = '';
+                    }
+                }
+
+                delete this.summary[uid];
+            }
+            this.renderSummary();
+        });
         this.elementEvents[formUID] = cb;
     }
 
@@ -679,7 +703,7 @@ export class ValidationService {
      * @param message 
      */
     addError(input: HTMLInputElement, message: string) {
-        let spans = this.messageFor[input.id];
+        let spans = this.messageFor[input.name];
         if (spans) {
             for (let i = 0; i < spans.length; i++) {
                 spans[i].innerHTML = message;
@@ -700,7 +724,7 @@ export class ValidationService {
      * @param input 
      */
     removeError(input: HTMLInputElement) {
-        let spans = this.messageFor[input.id];
+        let spans = this.messageFor[input.name];
         if (spans) {
             for (let i = 0; i < spans.length; i++) {
                 spans[i].innerHTML = '';

dist/aspnet-validation.min.js.map

@@ -87,6 +87,10 @@ export declare class ValidationService {
      * A list of managed elements, each having a randomly assigned unique identifier (UID).
      */
     private elementUIDs;
+    /**
+     * A key-value collection of UID to Element for quick lookup.
+     */
+    private elementByUID;
     /**
      * A key-value collection of input UIDs for a <form> UID.
      */

package.json

@@ -1,6 +1,6 @@
 let tsconfigOverride = {
     declaration: true,
-    declarationDir: 'typings',
+    declarationDir: 'types',
     sourceMap: false,
     noEmit: false
 };

src/index.ts

@@ -200,8 +200,8 @@ brorand@^1.0.1:
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
 
 browserify-aes@^1.0.0, browserify-aes@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.0.tgz#1d2ad62a8b479f23f0ab631c1be86a82dbccbe48"
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.1.tgz#38b7ab55edb806ff2dcda1a7f1620773a477c49f"
   dependencies:
     buffer-xor "^1.0.3"
     cipher-base "^1.0.0"
@@ -291,8 +291,8 @@ center-align@^0.1.1:
     lazy-cache "^1.0.3"
 
 chalk@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.2.0.tgz#477b3bf2f9b8fd5ca9e429747e37f724ee7af240"
   dependencies:
     ansi-styles "^3.1.0"
     escape-string-regexp "^1.0.5"
@@ -1762,8 +1762,8 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
 supports-color@^4.0.0, supports-color@^4.2.1:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.4.0.tgz#883f7ddabc165142b2a61427f3352ded195d1a3e"
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
   dependencies:
     has-flag "^2.0.0"
 
@@ -1808,9 +1808,9 @@ tough-cookie@~2.3.0:
   dependencies:
     punycode "^1.4.1"
 
-ts-loader@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-3.0.2.tgz#e4aa476f54c4197bee0251cd53a783ed3665a629"
+ts-loader@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-3.0.3.tgz#2b25865c220529093f40c997e81197444955e652"
   dependencies:
     chalk "^2.0.1"
     enhanced-resolve "^3.0.0"