How to validate form outside of form tag?

[nency-7span]

In address form component I have CustomFieldForm, CheckoutForm components which checks data from api and display fields accordingly. On next button i want to validate if all fields are valid or not and display required message in each field, If validate I also want to get values they entered in the form. CustomFieldForm have Item component from which dynamic base form components are being imported.

//address.vue
<template v-if="enabledCustomFields.length > 0">
  <CustomFieldForm
    ref="customFieldForm"
    :enabled-fields="enabledCustomFields"
  />
</template>

<template v-if="enabledCheckoutFields.length > 0">
  <CheckoutForm
    ref="checkoutForm"
    :enabled-fields="enabledCheckoutFields"
  />
</template>

<template #action>
  <Btn @click="next()" />
</template>

//components/custom-field/Form.vue
<div v-for="field in enabledFields" :key="`field--${field.id}`">
  <FormField :label="field.name">               //  this custom component I was using to display error messages in nuxt 2
    <CustomFieldItem v-model="state[field.id]" :field="field" />
  </FormField>
</div>

//components/custom-field/Item.vue
<template>
  <component
    v-bind="attrs"
    :is="$options.components['f' + field.inputType]"
    :modelValue="modelValue"
    @update:modelValue="modelValue = $event"
    @selectedInput="$emit('update:modelValue', $event)"
  />
</template>

<script>
import {
  FormTextbox,
  FormTextarea,
  FormSelect,
  FormRadioGroup,
  FormCheckboxGroup,
  FormDate,
  FormMap,
} from '#components'
const components = {
  ftext: FormTextbox,
  ftextarea: FormTextarea,
  fdropdown: FormSelect,
  fradio: FormRadioGroup,
  fcheckbox: FormCheckboxGroup,
  fdate: FormDate,
  fmap: FormMap,
}
...
</script>