Consider adding highlight/unhighlight events

[sussexrick]

I would love to replace our jQuery ASP.NET validation with this, but I can't because it's lacking the highlight and unhighlight events that we rely upon.

They're part of jQuery Validation rather than Microsoft's jQuery Unobtrusive Validation, and they let you run extra code at the time a field becomes valid or invalid.

Our use case for this is that we need error messages to be replicated in an Error summary similar to ASP.NET validation summary as well as next to the field, and we need to prepend "Error: " to the page title when there is an error. These changes make error messages more accessible to assistive technology users.

Would you consider adding support for them?

[haacked]

I’d accept a PR for them!

[enkelmedia]

Hi!

I was looking for the same thing as we have wrapping divs where we want to set a class when the field is invalid.

@haacked still up for a PR?

Not sure when I can find the time but if I do in the near future, what kind of event would we want? CustomEvent on the form like the validation event or more of a "global" event?

In our use case I think that the best option is a "global" event where we pass the validated field (element) as a argument and it's validation state.

{
valid : true/false,
element : reference to element
}

Any feedback would be appreciated before I get my hands dirty =D

Cheers!

Edit:
Another option could also be to pass the event handler as an function-option during bootstrap, that might be cleaner?

[dahlbyk]

Suggest adding public highlight/unhighlight methods to ValidationService, aligned with jQuery Validation (receiving element, errorClass, validClass), extracted from here:

aspnet-client-validation/src/index.ts

Lines 1052 to 1054 in ab9ef9c

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

and here:

aspnet-client-validation/src/index.ts

Lines 1087 to 1089 in ab9ef9c

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

Bonus points for also extracting equivalent (un)highlightMessage and (un)highlightSummary the other places we use this.swapClasses().

Usage would be:

const service = new aspnetValidation.ValidationService(console);
service.highlight = function (input, errorClass, validClass) { ... };
service.unhighlight = function (input, errorClass, validClass) { ... };
service.highlightMessage = function (span, errorClass, validClass) { ... };
service.unhighlightMessage = function (span, errorClass, validClass) { ... };
service.highlightSummary = function (el, errorClass, validClass) { ... };
service.unhighlightSummary = function (el, errorClass, validClass) { ... };
service.bootstrap();

[xsustek]

Hi @haacked

I have tried to implement this feature in PR #122.