Proper validation CustomFieldEdit

Forge Forge UI Kit and Custom UI
,
1

Hi there,

we’re currently switching from CustomUI to UI Kit with the CustomFieldEdit.

I wonder what’s the proper way to do a validation and show an error message to the user.

So far I went with something like this (following the pattern used in CustomUI)

export function EditFooField({fieldValue}: {fieldValue: string}) {
	const [value, setValue] = useState<string | undefined>(fieldValue);

	const [error, setError] = useState<string | undefined>();
	useEffect(() => {
		const validationState = isValid(value); // <-- some validation
		setError(validationState === ValidationStatus.VALID ? undefined : validationState);
	}, [value]);

	const onSubmit = useCallback(() => {
		if (!error) view.submit(value); // <-- don't submit an invalid value
	}, [value, error]);

	return <CustomFieldEdit onSubmit={onSubmit}>
		<Textfield
			value={value}
			isInvalid={!!error} // <-- make it red
			onChange={(e) => setValue(e.target.value)}
		/>
        {/* show error message */}
		{error && <ErrorMessage>error</ErrorMessage>}
	</CustomFieldEdit>;