fix(form): show error at the end if inputs are not valid

[NicoSerranoP]

Problem

The Form component uses pages for forms that have multiple sections. In each section the inputs already alert the user about some conditions (e.g.: you need a valid eth address, this field needs at least 3 words, etc).

The problem happens in the end. If the user ignored the warnings of each input in each section, then the form is not valid and cannot be submitted. When the user press the submit button nothing happens (no alert).

Solution

Detect if the form has any validation errors and tell the user that when he presses the submit button. That way the user will know he needs to trace back and find the input validation error.

Extras

1. Delete "Applications" from top navbar
2. "Create New Application" button in each round sends to the /rounds/[roundId]/new page

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
maci-platform	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 10, 2024 2:05am

[kittybest]

Great! Thanks! Just thinking about some details:

1. I think clicking the ImageUpload somehow trigger the submit function, so if there's any errors on the page, the error would be fixed at the bottom of the form, maybe check the button type of ImageUpload
2. even after I fixed the errors (e.g. fix the length of the name) the error is stilly displayed
3. just suggestion, thinking about changing those error reminder to other color rather than just black
4. another suggestion, also thinking about move the errorMessage to alignRight under the submit buttons
5. Also thinking about should we also check the restrictions before clicking Next?

[0xmad]

@NicoSerranoP thanks, just one comment

[NicoSerranoP]

Great! Thanks! Just thinking about some details:

1. I think clicking the ImageUpload somehow trigger the submit function, so if there's any errors on the page, the error would be fixed at the bottom of the form, maybe check the button type of ImageUpload
2. even after I fixed the errors (e.g. fix the length of the name) the error is stilly displayed
3. just suggestion, thinking about changing those error reminder to other color rather than just black
4. another suggestion, also thinking about move the errorMessage to alignRight under the submit buttons
5. Also thinking about should we also check the restrictions before clicking Next?

• 1. I think it is not doing that anymore. Could you check again? 😊
• 2. I used a timer that will delete the message after 5s (I cannot detect the changes of the previous page form without drastically changing the component instruction)
• 3. should we use red in all <ErrorMessage> ?
• 4. Done
• 5. Blocked: I don't know how to do this in a generic mode (the steps and pages are set in each specific form component)

[kittybest]

Great! Thanks! Just thinking about some details:

1. I think clicking the ImageUpload somehow trigger the submit function, so if there's any errors on the page, the error would be fixed at the bottom of the form, maybe check the button type of ImageUpload
2. even after I fixed the errors (e.g. fix the length of the name) the error is stilly displayed
3. just suggestion, thinking about changing those error reminder to other color rather than just black
4. another suggestion, also thinking about move the errorMessage to alignRight under the submit buttons
5. Also thinking about should we also check the restrictions before clicking Next?

• 1. I think it is not doing that anymore. Could you check again? 😊
• 2. I used a timer that will delete the message after 5s (I cannot detect the changes of the previous page form without drastically changing the component instruction)
• 3. should we use red in all <ErrorMessage> ?
• 4. Done
• 5. Blocked: I don't know how to do this in a generic mode (the steps and pages are set in each specific form component)

This 5th one is not required, just a suggestion, no need to spend much time on it.
And for the condition mentioned in 1st one, let me add a video:
https://drive.google.com/file/d/18jyLWRraw03LilH_H2KstTuCEfVG7HwF/view?usp=sharing

[NicoSerranoP]

@kittybest @0xmad @ctrlc03 I fixed two ui issues that are being addressed at #407 as well. I think the only component that would give us conflict when merging that branch is ../interface/src/features/applications/components/ApplicationsToApprove.tsx :)

[kittybest]

Currently lgtm, thanks a lot! plz rebase and fix the conflicts

[NicoSerranoP]

I think we need @0xmad 's approval for the code changes request

[kittybest]

@NicoSerranoP There's still prettier and commitlint check not passed.
So you need to:

1. run pnpm lint:ts in the package first
2. squash the commits, that there wouldn't be any Merge branch 'main' into fix/validation-errors-in-form anymore, which is causing the commitlint error.
3. to merge main branch in the future, please use rebase instead of merge