App: Required input fields
What is the recommended way of validating input fields when a button is clicked and before the underlying script/flow is called?
For example, I have an app with:
- several text inputs
- a button that triggers a script using the values from the text input fields
- each of the text inputs should be non-empty for the script to run correctly
I want to validate that the text inputs are non empty when a user clicks a button but BEFORE we call the script.
21 Replies
@tl_jacob why not use "live" validation instead and put the constraint on the form itself?
ah I haven't tried the form UI component! I've just been adding text inputs to containers. Thanks @rubenf !
@rubenf is it possible to use the Select or Multiselect components in a Form component? If not, is there a recommended workaround for using those components and maintaining the "live" validation of the form?
it's possible yes, string + enum, and array + array of string + multiselect
Okay I got Single select to work, but I'm having a small issue with Multiselect. Ideally I could link selected values to underlying IDs, but the array + array of string approach doesn't allow that (see screenshot). Am I approaching this incorrectly?
right now we don't support label + value for static multiselect
@rubenf okay understood! I need my multiselect + select fields to be dynamic based on other inputs. e.g. Selecting a company from the "company" drop down changes the options in the "office location" drop down. My current approach has been to wire together individual text/number/multiselect/select components.
If we don't go with the Form approach, going back to my original question, is there a way to do some live validation?
An approach I'm considering is to just create a custom frontend script that is recomputed anytime any of the fields changes. I think that will work, but just wanted to check to see if there are any other well-known/recommended approaches
@tl_jacob ah yes you can make them dynamic, but you need to make the jsonschema an expression you dynamically fill
not sure it works with "Dynamic Enum" for multi-select. If it doesn't we will add to backlog
@rubenf cool! I can confirm that Dynamic Enum does not appear to work with multi-select. It would be really nice to support label + value for multiselect too please 🙏
I can take a look
@tl_jacob the enum can be dynamic, but just not with label + value:
but it's normal, we can't handle multiple label with same values. But you should be able to do your own mapping
nvm we even support it:
@rubenf hmm my options are rendering as [object Object]
Select array
And items are strings
Then fill dynamic enums like me
@rubenf ah looked like a verison issue. I upgraded to 1.549.1 from 1.500.1 and multiselect works. However, single select shows [object Object] still
I will look it up
fixed on latest
amazing thank you so much @rubenf !