Customize CSS class name

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aspnet-client-validation",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Enables ASP.NET MVC client-side validation, without jQuery!",
   "main": "dist/aspnet-validation.js",
   "style": "dist/aspnet-validation.css",
@@ -13,7 +13,8 @@
   "author": "Ryan Elian, Phil Haack",
   "license": "MIT",
   "scripts": {
-    "build": "mkdir -p dist && cp src/aspnet-validation.css dist && webpack && webpack --config webpack.config.min.js"
+    "build": "cp src/aspnet-validation.css dist && webpack && webpack --config webpack.config.min.js",
+    "build-windows": "copy src\\aspnet-validation.css dist && webpack && webpack --config webpack.config.min.js"
   },
   "devDependencies": {
     "ts-loader": "^5.3.1",

script/build.ps1

@@ -1 +1 @@
-npm run build
+npm run build-windows

src/index.ts

@@ -734,8 +734,8 @@ export class ValidationService {
 
             for (let uid of uids) {
                 let input = this.elementByUID[uid] as HTMLInputElement;
-                input.classList.remove('input-validation-error');
-                input.classList.remove('input-validation-valid');
+                input.classList.remove(this.ValidationInputCssClassName);
+                input.classList.remove(this.ValidationInputValidCssClassName);
 
                 let spans = this.messageFor[input.name];
                 if (spans) {
@@ -869,12 +869,12 @@ export class ValidationService {
         if (spans) {
             for (let i = 0; i < spans.length; i++) {
                 spans[i].innerHTML = message;
-                spans[i].className = 'field-validation-error';
+                spans[i].className = this.ValidationMessageCssClassName;
             }
         }
 
-        input.classList.remove('input-validation-valid');
-        input.classList.add('input-validation-error');
+        input.classList.remove(this.ValidationInputValidCssClassName);
+        input.classList.add(this.ValidationInputCssClassName);
 
         let uid = this.getElementUID(input);
         this.summary[uid] = message;
@@ -890,12 +890,12 @@ export class ValidationService {
         if (spans) {
             for (let i = 0; i < spans.length; i++) {
                 spans[i].innerHTML = '';
-                spans[i].className = 'field-validation-valid';
+                spans[i].className = this.ValidationMessageValidCssClassName;
             }
         }
 
-        input.classList.remove('input-validation-error');
-        input.classList.add('input-validation-valid');
+        input.classList.remove(this.ValidationInputCssClassName);
+        input.classList.add(this.ValidationInputValidCssClassName);
 
         let uid = this.getElementUID(input);
         delete this.summary[uid];
@@ -1030,4 +1030,24 @@ export class ValidationService {
             }
         }
     }
+
+    /**
+     * Override CSS class name for input validation. Default: 'input-validation-error'
+     */
+     ValidationInputCssClassName = "input-validation-error";
+
+     /**
+      * Override CSS class name for valid input validation. Default: 'input-validation-valid'
+      */
+     ValidationInputValidCssClassName = "input-validation-valid";
+
+     /**
+      * Override CSS class name for field validation error. Default: 'field-validation-error'
+      */
+     ValidationMessageCssClassName = "field-validation-error";  
+
+     /**
+      * Override CSS class name for valid field validation. Default: 'field-validation-valid'
+      */
+     ValidationMessageValidCssClassName = "field-validation-valid";
 }

types/index.d.ts

@@ -259,4 +259,20 @@ export declare class ValidationService {
      */
     watch(root: HTMLElement): void;
     private observed;
+    /**
+     * Override CSS class name for input validation. Default: 'input-validation-error'
+     */
+    ValidationInputCssClassName: string;
+    /**
+     * Override CSS class name for valid input validation. Default: 'input-validation-valid'
+     */
+    ValidationInputValidCssClassName: string;
+    /**
+     * Override CSS class name for field validation error. Default: 'field-validation-error'
+     */
+    ValidationMessageCssClassName: string;
+    /**
+     * Override CSS class name for valid field validation. Default: 'field-validation-valid'
+     */
+    ValidationMessageValidCssClassName: string;
 }

yarn.lock

@@ -908,11 +908,6 @@
   "resolved" "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz"
   "version" "3.5.2"
 
-"[email protected]":
-  "integrity" "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
-  "resolved" "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz"
-  "version" "1.0.0"
-
 "fill-range@^4.0.0":
   "integrity" "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc="
   "resolved" "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz"
@@ -999,11 +994,6 @@
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
-"fsevents@~2.1.2":
-  "integrity" "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ=="
-  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz"
-  "version" "2.1.3"
-
 "get-caller-file@^2.0.1":
   "integrity" "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
   "resolved" "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"