fixing magic code input error

[pory-gone]

Description

fix #2511

I modified form.js

MultiInput now uses useFormikContext() to read submitCount.
The logic for displaying the aggregate error has been changed: the error is only shown if there has been at least one attempt to submit, using the condition formik.submitCount > 0 along with meta.touched && meta.error.

Screenshots

2025-09-11-17-43-52.mp4

Additional Context

The error appears only after the first submission with an incomplete/incorrect code; while typing the 6 digits it is not shown.
After the first failed submission, errors like "required" and "must be 6 alphanumeric characters" will display with the same behavior as before. If this isn't correct, I'll make the necessary changes.

Checklist

Are your changes backward compatible? Please answer below:
Yes

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
7/10

For frontend changes: Tested on mobile, light and dark mode? Please answer below:
NaN

Did you introduce any new environment variables? If so, call them out explicitly here:
NaN

Did you use AI for this? If so, how much did it assist you?
I didn't use AI for this, all manual research.

[huumn]

this change impacts every form on the site but it's meant to address one is particular

[ekzyis]

this change impacts every form on the site but it's meant to address one is particular

Oh, right, only tested /email (with manually removing the code to disable the input without a callback)

Wait, are you sure? The code is inside MultiInput which is only ever used for the /email page.

Ideally this would just work like any other form, but I didn't realize we are actually using it with our Form component, so not sure why it's immediately validating unlike any other form. /cc @Soxasora

So the fix would include finding out why it's not already working.

[Soxasora]

MultiInput calls InputInner n times, I couldn't possibly use the errors given by each of them so I muted them via hideError.
In general, setting a formik field and going to another, makes formik return meta.touched === true, considering that we have 6 fields but they're merged into 1 onChange via handleChange, each change will trigger it.

Using formik.submitCount > 0 is a nice way to solve this considering that it will only affect MultiInput and we already use it on InputInner.

note: I also thought it was a bug that we didn't validate in real time for other forms, but it makes sense. In this case the purpose was to provide an immediate response in a PIN-like scenario

history: MultiInput was literally bolted with sticky tacks on InputInner to provide immediate relief for PWA users, but in the future a refactor should take care of this