Merge pull request #122 from xsustek/feat/custom_highlight

Ability to specify custom highlight / unhighlight functions

Author: haacked

README.MD

@@ -288,6 +288,15 @@ v.ValidationMessageValidCssClassName   = 'valid-feedback';             // change
 v.bootstrap();
 ```
 
+## Customizing highlight and unhighlight functions
+
+```js
+var v = new aspnetValidation.ValidationService();
+v.highlight = function (input, errorClass, validClass) { ... };
+v.unhighlight = function (input, errorClass, validClass) { ... };
+v.bootstrap();
+```
+
 ## Logging
 
 There is a rudimentary logging infrastructure in place if you want to get more insight into what the library is doing.

dist/aspnet-validation.js

@@ -1199,7 +1199,7 @@ var ValidationService = /** @class */ (function () {
                 this.swapClasses(spans[i], this.ValidationMessageCssClassName, this.ValidationMessageValidCssClassName);
             }
         }
-        this.swapClasses(input, this.ValidationInputCssClassName, this.ValidationInputValidCssClassName);
+        this.highlight(input, this.ValidationInputCssClassName, 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).
             var inputs = input.form.querySelectorAll(validatableSelector("[name=\"".concat(input.name, "\"]")));
@@ -1223,7 +1223,7 @@ var ValidationService = /** @class */ (function () {
                 this.swapClasses(spans[i], this.ValidationMessageValidCssClassName, this.ValidationMessageCssClassName);
             }
         }
-        this.swapClasses(input, this.ValidationInputValidCssClassName, this.ValidationInputCssClassName);
+        this.unhighlight(input, this.ValidationInputCssClassName, this.ValidationInputValidCssClassName);
         // Removing an error from one input should also remove it from others with the same name (i.e. for radio button and checkbox lists).
         if (input.form) {
             var inputs = input.form.querySelectorAll(validatableSelector("[name=\"".concat(input.name, "\"]")));
@@ -1439,6 +1439,24 @@ var ValidationService = /** @class */ (function () {
             }
         }
     };
+    /**
+     * Highlights invalid element by adding errorClass CSS class and removing validClass CSS class
+     * @param input Element to modify
+     * @param errorClass Class to add
+     * @param validClass Class to remove
+     */
+    ValidationService.prototype.highlight = function (input, errorClass, validClass) {
+        this.swapClasses(input, errorClass, validClass);
+    };
+    /**
+     * Unhighlight valid element by removing errorClass CSS class and adding validClass CSS class
+     * @param input Element to modify
+     * @param errorClass Class to remove
+     * @param validClass Class to add
+     */
+    ValidationService.prototype.unhighlight = function (input, errorClass, validClass) {
+        this.swapClasses(input, validClass, errorClass);
+    };
     return ValidationService;
 }());
 

dist/aspnet-validation.min.js

@@ -1,6 +1,6 @@
 {
   "name": "aspnet-client-validation",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Enables ASP.NET MVC client-side validation, without jQuery!",
   "main": "dist/aspnet-validation.js",
   "style": "dist/aspnet-validation.css",

dist/aspnet-validation.min.js.map

@@ -1252,7 +1252,7 @@ export class ValidationService {
             }
         }
 
-        this.swapClasses(input,
+        this.highlight(input,
             this.ValidationInputCssClassName,
             this.ValidationInputValidCssClassName);
 
@@ -1287,9 +1287,9 @@ export class ValidationService {
             }
         }
 
-        this.swapClasses(input,
-            this.ValidationInputValidCssClassName,
-            this.ValidationInputCssClassName);
+        this.unhighlight(input,
+            this.ValidationInputCssClassName,
+            this.ValidationInputValidCssClassName);
 
         // Removing an error from one input should also remove it from others with the same name (i.e. for radio button and checkbox lists).
         if (input.form) {
@@ -1513,6 +1513,26 @@ export class ValidationService {
         }
     }
 
+    /**
+     * Highlights invalid element by adding errorClass CSS class and removing validClass CSS class
+     * @param input Element to modify
+     * @param errorClass Class to add
+     * @param validClass Class to remove
+     */
+    highlight(input : ValidatableElement, errorClass: string, validClass: string) {
+        this.swapClasses(input, errorClass, validClass);
+    }
+
+    /**
+     * Unhighlight valid element by removing errorClass CSS class and adding validClass CSS class
+     * @param input Element to modify
+     * @param errorClass Class to remove
+     * @param validClass Class to add
+     */
+    unhighlight(input: ValidatableElement, errorClass: string, validClass: string) {
+        this.swapClasses(input, validClass, errorClass);
+    }
+
     /**
      * Override CSS class name for input validation error. Default: 'input-validation-error'
      */

package-lock.json

@@ -353,6 +353,20 @@ export declare class ValidationService {
      */
     watch(root?: ParentNode): void;
     private observed;
+    /**
+     * Highlights invalid element by adding errorClass CSS class and removing validClass CSS class
+     * @param input Element to modify
+     * @param errorClass Class to add
+     * @param validClass Class to remove
+     */
+    highlight(input: ValidatableElement, errorClass: string, validClass: string): void;
+    /**
+     * Unhighlight valid element by removing errorClass CSS class and adding validClass CSS class
+     * @param input Element to modify
+     * @param errorClass Class to remove
+     * @param validClass Class to add
+     */
+    unhighlight(input: ValidatableElement, errorClass: string, validClass: string): void;
     /**
      * Override CSS class name for input validation error. Default: 'input-validation-error'
      */