Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to specify custom highlight / unhighlight functions #122

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions README.MD
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
28 changes: 24 additions & 4 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1252,7 +1252,7 @@ export class ValidationService {
}
}

this.swapClasses(input,
this.highlight(input,
this.ValidationInputCssClassName,
this.ValidationInputValidCssClassName);

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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'
*/
Expand Down