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.
![](data:image/png;base64,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)
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