Component validation within js code doesn't work expectedly

Community Show & Tell
, ,
1

Hi retool community!

I faced some component validation issue.
In JS environment I'm trying to run component_input.validate() and check if it's valid or not.

input_component.validate();
if (input_component.invalid) {
  return;    
}
my_query.trigger();

I run this snippet on button click.
The issue is when input_component is empty and this is the first run input_component.invalid is false despite on UI it becomes in red. Once I click a button that triggers this snippet one more time input_component.invalid is true.
I tried await input_component.validate() but this doesn't help.

Maybe I do something wrong or there is some workaround.
Any help is appreciated.

2

Hey @dimamarksman!

References to components typically aren't updated until a script finishes executing to improve script performance, you can change this in the advanced settings of your query, however!

You might also try using an event handler to trigger the query:

Do either of those options work?

3

Hi @Kabirdas!

The first option totally works for me!

Thank you very much for your help!

4