mindofbeholder
mindofbeholder15mo ago

App field validation question

Is it possible to utilize a frontend script to create custom field validations and show custom errors on screen? eg I have 3 fields. The first is always required, and at least one of the other two fields must be filled in, but not necessarily both. I want to be able to create a script that validates this configuration and throws a custom error/toast noti based on the completed fields. Can this be done current state? I'm using the self hosted variant if that makes a difference here.
21 Replies
mindofbeholder
mindofbeholder15mo ago
bump
Sindre
Sindre15mo ago
Are you thinking with the current form component or just with input, text and button component. You can def create this yourself using button input and text.
mindofbeholder
mindofbeholder15mo ago
I was thinking with current form component.
Sindre
Sindre15mo ago
I'm not that familiar with it so can't say, but as far as I know, it's not possible. It's not documented anywhere at least.
mindofbeholder
mindofbeholder15mo ago
Yea I couldn't find anything that would permit me to throw a custom toast/error. The only thing I can thing to do is to create a separate button that does validation but even then I can't think of how to make it display an error or toast noti.
Sindre
Sindre15mo ago
Have you checked out the "submit form"? with that you should be able to get a toast. I prop did not read your first question good enought I was thinking inline error on a spes input. You should be able to create a toast or display an text error message as a text component around it, but not inside the (submit) form itself
mindofbeholder
mindofbeholder15mo ago
I'll check it out. Thanks for the suggestion.
rubenf
rubenf15mo ago
Sorry i might be missing something obvious but you could connect your frontend script to the output 'values' of your form and then for every change you validate it you display the validation in a text field in red if there is any output I might be missing something obvious
mindofbeholder
mindofbeholder15mo ago
No but it's really obvious when you put it like that... Still missing a toast but I suppose the red would be a sufficient substitute. I'll try both approaches.
Sindre
Sindre15mo ago
with ruben approch you can validate before they click send.. but maybe it will be a bit hard to know when to trigger correctly. With my suggestion you should be able to get a toast. I think all designers would think both approaches are horrible and would like to make input field with red outlining and a red text right below it. But you should be able to get something to work
mindofbeholder
mindofbeholder15mo ago
I fully agree but I didn't think that would be possible. I imagine I might be able to find a way to combine the two approaches.
rubenf
rubenf15mo ago
yes we should add validation per field in the json form probably a runnable input that given the output would be able to show pretty errors on the correct field as you suggested @sindresvendby
mindofbeholder
mindofbeholder15mo ago
That would be awesome.
rubenf
rubenf15mo ago
or second solution, we open an api just for form to unvalidate a field but I like the first approach more, it's a little bit more principled I have lots of ideas of improvements for everywhere, but so little time ahah
mindofbeholder
mindofbeholder15mo ago
If i'm understanding correctly, the suggested solution is being able to make it so that you can use a runnable to call against a field and flag it as validated or not-validated with an error under the field?
rubenf
rubenf15mo ago
you would validate the full form but depending on the output the error would be different something like output could be: {field1: "ugly input", field2: "try again"}, and it would display it exactly at those fields
mindofbeholder
mindofbeholder15mo ago
Oh perfect.
rubenf
rubenf15mo ago
a validated input would be return undefined
Sindre
Sindre15mo ago
it could be from the runnable itself. that you have a predefined key there
No description
rubenf
rubenf15mo ago
but I think it's cleaner to do it as an api we do a single displayError({field1: foo}, component) function technically many components especially inputs could all display errors so this would be pretty generic and displayError(undefined) would reset it but yeah will try a few things when I get to it