Handle manually after change to show red border on cell if data invalid

#1

Hi,

Is there a way I can manually add a red border to a cell if the data that was entered did not pass my own validation? Currently, I’m using beforeChange. Inside the callback, I process the new data, my own validation, and all. What I want to achieve is that, if for example, the validation failed, I would mark that cell with a red border, and maybe still stay on that cell – will not proceed to other cell if Enter was pressed, etc.

Thanks!

#2

Hi @hugh

If it comes to the border for invalid cells you have two approaches.
The first one is an override existence class .htInvalid by .handsontable table td.htInvalid { background-color: white !important; border: 1px solid red !important; } - https://jsfiddle.net/aoyqtv3d/

The second one is to use your own class in invalidCellClassName hot options. Here is a link to our docs - https://handsontable.com/docs/7.4.2/Options.html#invalidCellClassName and to the demo - https://jsfiddle.net/614kgrez/2/

If it comes to the second concern the simplest way is use an allowInvalid in the validator options - https://jsfiddle.net/p98qhc4s/

Here is a link to our docs about validation - https://handsontable.com/docs/7.4.2/demo-data-validation.html

#3

Hi @piotr.nowak,

Thanks for those solutions and demos!

However, I’m not using your own validators, I want to use another library. For example, I want to use validatorJS, after I validate using validatorJS and it failed, how can I set that specific cell border color red? Without using your own validator.

And this will not be only limited to validatorJS, what if I want to use additional libraries. So, this is not regarding the validators that I will use, but the goal is how to set that specific cell manually without going through the HandsOnTable’s validator.

Thanks you.

#4

In your situation, the best option I think is to listen to hook afterValidate - https://handsontable.com/docs/7.4.2/Hooks.html#event:afterValidate

If it not valid, isValid is set to false, you have to apply a mentioned CSS class to show that given cell has no valid data.

#5

Hi @piotr.nowak, @aleksandra_budnik,

Thank you for your reply and solution. However, upon reading the description for afterValidate it will only fire if there is a validator function defined

45%20PM
Screen Shot 2020-07-21 at 9.34.45 PM.png1520×286 29.3 KB

I will just recap here that I will not set any validator like you have used in the demo, for an instance this one:

22%20PM
Screen Shot 2020-07-21 at 9.35.22 PM.png974×112 22.1 KB

I’m using my own validator on the fly, inside the beforeChange call, that’s why I’m asking if there is a way I can - manually - change the cell’s border being edited (if validation failed). Like setting the cell meta or any way that functions similarly.

Thank you and hoping for your positive response! :slight_smile:

#6

Ok. I understand your issue.

If you have a validation error, you could use setCellMeta inside beforeChange to set a className for instance to .highlight--error.
In CSS area define this class as .highlight--error { background-color: white !important; border: 1px solid red !important; }.

It should work well I suppose.

#7

HI @piotr.nowak,

Thanks!

#8

You welcome.

Please let me know if it helped.

#9

This topic seems to be covered. If you’d have any additional questions feel free to create a new topic or send me (support@handsontable.com) an email.

#10