Accessing form data before submit

Forge Forge Custom UI and UI kit (beta)
#1

I’m creating a custom field where you shall be able to add multiple links to issues on another web site. I need to verify that the issues exists before submitting but can’t find any way to access the components inside the CustomFieldEdit. I’m currently rendering the following

<CustomFieldEdit>
    <Select label='Project' name="projectSelect">
        {projects.map((p) => <Option label={p.name} value={p.name} />)}
    </Select>
    <TextField label="Work Item" type="number" name="projectWorkItem" />
    <Button onClick={onFindWorkItem} text="Find" icon='editor-search' />
</CustomFieldEdit>

How can I in the function onFindWorkItem connected to the onClick event on the button access the value from the Select component and the TextField?

#2

Hi @ChristoferHellqvist ,

I don’t think UI kit supports any validation prior to form submission. I suspect you will have to bind a function to the CustomFieldEdit onSubmit prop. The function should be called with the form data.

<CustomFieldEdit onSubmit={onSubmit} ...

Regards,
Dugald

#3

Ok, so there are not really a good solution for me to be able to add multiple links and verify their target without performing a submit for the whole field?

The only way I find to cancel the submit is to return something that wont validate but that will force the form to reload and show a message on the screen that its not validating.

#4

@ChristoferHellqvist ,

Remember with UI kit, logic always runs in Forge functions in the back end. With Custom UI, however, you can run logic in the front end.

Regards,
Dugald