Is there a way to auto select and focus on a cell if invalid data?

Tags: #<Tag:0x00007f8b28c90cb0>
#1

Hi,

In my previous question, I was able to achieve what I want which is to manually set a cell’s border color to red if the data is invalid. I’m using my own validator and not using the validator setting inside column. Thanks for your help, guys.

So,since I’m using my own validator on the fly, and I was already able to apply red border to the cell if the data is invalid. What I want to achieve now is this:

  1. For example the user, double clicks a cell, and change data from goodEmail@sample.com to badEmail.com
  2. Obviously, my custom validator would output an error coz that is not a valid email
  3. So I would mark that current cell as invalid and apply red border to it
  4. This is the part which I want to ask: how can I prevent default events (default behavior after pressing Enter is that it would go to next cell, right?) and just stay on that current invalid cell.

So that’s my goal for now. If that cell is still invalid, the user cannot click (single or double click or edit) another cell. It will stay on that current invalid cell until the user types in a valid data.

After a valid data is typed in, it will revert back to normal. I hope my explanation is clear.

Thanks for the time!

#2

Hi @hugh

I’m wondering what do you mean by using my own validator on the fly?

Can you determine your own validator as we did in this demo - https://jsfiddle.net/3y8v5cqj/?
It’s no matter is it your validator or from an external source. All you need is to define in columns settings - `{validator: yourValidator, allowInvalid: false}.

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

#3

Hi @piotr.nowak,

Thanks so much for your patience :slight_smile:

Ahm okay, I will try to explain myself clearly. Coz I was trying to avoid mentioning specific modules. So here is my real case:

  1. For example the user edits row number 3, on column 2 and let’s say this is the Email column
  2. After the user press enter or clicks another column beforeChange would trigger
  3. Inside beforeChange I would then set the state, coz I’m using React, that will hold all the row’s data. So if have 5 columns, it would get all data for that row number 3 using getDataAtRow.
  4. After that, I would send that state to the FormIO component which will validate those data. And FormIO component does not provide any function or class that you can use and set inside columns settings. That’s what I meant by I’m using a validator on the fly. It is not tied to something. All I can get from the formio are results if data are valid or invalid.
  5. So this is the part why I need to know how I can manually set everything by not using the columns settings.

Thanks!

#4

It is hard to achieve your requirement if your FormIO component can’t be connected with our validator.
Admittedly it exposes a change event, and inside in you have isValid props. So it could be used in our validator to stop in the cell.
If you could isolate validator from FormIO then we can to connect it with our validator.

Can you show your implementation? It could be easier to find a solution.
However, the easiest way may be to create your own validator I think.

#5