In my Nuxt Vue FormKit form, each element has its own validation, so I am not in need of a summary or aggregate error message at the bottom of the form -- yet I cannot seem to remove the summary message: "Sorry, not all fields are filled out correctly" at the bottom of the form.

form and error message at the bottom

I have tried changing the properties of the main form element (id="changeEmailForm"), but to no avail. Here is my code:

<template>
  <div class="w-full">
    <!-- actions:false opts out of the default submit button -->
    <FormKit
      id="changeEmailForm"
      v-slot="{ state }"
      type="form"
      :actions="false"
      @submit="changeEmail"
    >
      <Card
        class="border !border-red-400 !border-opacity-25 dark:!border-red-200 dark:!border-opacity-25"
      >
        <CardHeader>
          <div class="flex justify-between items-center">
            <CardTitle class="text-base">Email</CardTitle>
            <Button
              size="sm"
              :variant="'secondary'"
              @click="showContent = !showContent"
            >
              <span v-if="showContent" class="px-3"><ChevronUp /></span>
              <span v-else>Change Email</span>
            </Button>
          </div>
        </CardHeader>
        <CardContent v-if="showContent">
          <div class="mt-2">
            <FormKit
              v-model="passwordInput"
              type="password"
              name="password"
              label="Current Password"
              validation="required"
              suffix-icon="eyeClosed"
              @suffix-icon-click="toggleHidePassword"
            />
            <div class="grid col-span-1">
              <FormKit
                v-model="emailInput"
                type="email"
                name="email"
                label="Email"
                validation="required"
                validation-visibility="submit"
              />
            </div>
          </div>
          <!-- no button if username exists already - can only be set once -->
          <div v-if="state.dirty" class="mt-2">
            <div class="flex justify-between">
              <div />
              <div v-if="state.dirty">
                <Button
                  type="submit"
                  size="sm"
                  :disabled="
                    !state.valid || userStore.user.emailAddress === emailInput
                  "
                  >Verify New Email
                </Button>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </FormKit>
  </div>
</template>