diff --git a/README.MD b/README.MD index 2114dad..fb1e723 100644 --- a/README.MD +++ b/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. diff --git a/src/index.ts b/src/index.ts index ad1a309..e3472b7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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' */