Goal:
I want to have red bordering around fields that the user has not filled-in yet, and update the border to green as the user has filled-in data on the in-line edit/add of grid row.

I have tried so by adding a script to add and remove a class on the onclick, onkeyup, and onpaste events (depending on the controller).
Issues:
- The assigned classes get reset upon clicking out of the control, so the CSS class I assign gets removed. I think an event is overwriting the classes for the parent spans.
- I can't load the script upon going on edit/add mode. I tried running the script and passing Ids in the OnGridActionComplete "Add" action, but was not successful.
Is there a different way of doing this? I originally thought I could use the native validation controls, but couldn't find something to make it dynamic to update the bordering as the user types. It doesn't have to be a JavaScript solution, but ideally I'd want to have something I can call on multiple sections of the website, even outside a grid.
Some of the controls my grid has are:
- SfTextBox
- SfDatePicker
- SfDropDownList