Update how invalid input messages are displayed and handled

[juancwu]

Description

Currently invalid input error messages are shown in a big block on top of the application form. The invalid input messages should be shown right below the input itself.

Example of how we can update our wrapper components:

// Using chakra components
<Field.Root required={required} invalid={!!error}>
	<Field.Label>
		{label}
		{required && <Field.RequiredIndicator />}
	</Field.Label>
	<Input {...props} />
	<Field.HelperText>{description}</Field.HelperText>
	<Field.ErrorText>{error}</Field.ErrorText>
</Field.Root>

Blocked by

#563

Screenshots

How it is right now:

How it should look like:

Checklist

Before submitting this ticket, make sure this ticket:

• Is labelled properly - if this is a refactor, add the label!
• Has the correct project assigned to it.
• Has an assigned milestone.

And lastly:

• Once someone picks up this ticket, make sure to assign it.