Only the first of multiple registered text inputs is validated on submit (criteriaMode:all, storyblok + Next 14)

[arkhamz]

Background:
We are having issues with form validation on an application form whose input properties (name,type,id,placeholder) come from the storyblok content management system.

Issue:

We loop through the CMS input field data, and then render custom input components with required validation. When submitting the form with empty fields, only the first input field gets validated. If you enter valid data into the first field, the form can still be submitted even though the rest (with required validation) are empty. The errors object also only contains that first input. We're pretty new to this and have looked through the existing discussions but couldn't find a relevant one, apologies if this is a duplicate question.

//useForm initialisation
const {
    register,
    formState: { errors, isSubmitting, isValid },
    handleSubmit,
    control,
    reset,
  } = useForm({
    mode: 'onSubmit',
    criteriaMode: 'all',
  });

<form
            className="c-application-form__form-container"
            onSubmit={handleSubmit(onSubmitHandler)}
            autoComplete="off"
          >
            <fieldset>
              {generalFields?.length ? (
                <div className="c-text-field__container --full-width-input c-application-form__line-break" />
              ) : null}
              {generalFields?.length
                ? generalFields.map((nestedBlok) => (
                    <StoryblokComponent
                      blok={nestedBlok}
                      key={nestedBlok._uid}
                      register={register}
                      errors={errors}
                      control={control}
                      Controller={Controller}
                      translate={translate}
                    />
                  ))
                : null}
            </fieldset>
          </form>


Example of rendered input:

 <input
          type={type}
          id={name}
          placeholder={placeholder}
          {...register(name, {
            required:
              validators &&
              validators?.find((findReq) => findReq.component === 'required')
                ? true
                : false,
            pattern:
              type === 'email' &&
              /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
          })}
          className={`${errorClass ? 'error' : ''}`}
        />
        
        
        ```

[arkhamz]

Closing due to finding the error (conditional rendering of the form/form inputs interrupting the input registering).