feat(Form): add validate-on error-input

Adds `error-input` option to the validate on prop to validate on input
only when the field has an error.

Resolves #2599

docs/content/3.components/form.md

@@ -98,6 +98,7 @@ The Form component automatically triggers validation when an input emits an `inp
 - Validation on `input` occurs **as you type**.
 - Validation on `change` occurs when you **commit to a value**.
 - Validation on `blur` happens when an input **loses focus**.
+- Validation on `error-input` happens when as you type on an input with an error.
 
 You can control when validation happens this using the `validate-on` prop.
 

playground/app/pages/components/form-field.vue

@@ -5,9 +5,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
 
 const feedbacks = [
   { description: 'This is a description' },
-  { error: true },
   { error: 'This is an error' },
-  { errors: ['This is an error', 'This is another error', 'This one is not visible'], maxErrors: 2 },
   { hint: 'This is a hint' },
   { help: 'Help! I need somebody!' },
   { required: true }
@@ -16,7 +14,7 @@ const feedbacks = [
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ms-[-92px]">
+    <div class="flex flex-col gap-4 ms-[-38px]">
       <div v-for="(feedback, count) in feedbacks" :key="count" class="flex items-center">
         <UFormField v-bind="feedback" label="Email" name="email">
           <UInput placeholder="john@lennon.com" />

playground/app/pages/components/form.vue

@@ -57,7 +57,7 @@ const disabled = ref(false)
     <div class="border border-default rounded-lg">
       <div class="py-2 px-4 flex gap-4 items-center">
         <UFormField label="Validate on" class="flex items-center gap-2">
-          <USelectMenu v-model="validateOn" :items="['input', 'change', 'blur']" multiple class="w-48" />
+          <USelectMenu v-model="validateOn" :items="['input', 'change', 'blur', 'error-input']" multiple class="w-48" />
         </UFormField>
         <UCheckbox v-model="disabled" label="Disabled" />
       </div>

src/runtime/components/Form.vue

@@ -2,7 +2,7 @@
 import type { DeepReadonly } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/form'
-import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId, InferInput, InferOutput, FormData } from '../types/form'
+import type { FormSchema, FormError, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId, InferInput, InferOutput, FormData, FormValidateOn } from '../types/form'
 import type { ComponentConfig } from '../types/utils'
 
 type FormConfig = ComponentConfig<typeof theme, AppConfig, 'form'>
@@ -23,7 +23,8 @@ export interface FormProps<S extends FormSchema, T extends boolean = true> {
    * The list of input events that trigger the form validation.
    * @defaultValue `['blur', 'change', 'input']`
    */
-  validateOn?: FormInputEvents[]
+  validateOn?: FormValidateOn[]
+
   /** Disable all inputs inside the form. */
   disabled?: boolean
   /**
@@ -77,7 +78,7 @@ type O = InferOutput<S>
 
 const props = withDefaults(defineProps<FormProps<S, T>>(), {
   validateOn() {
-    return ['input', 'blur', 'change'] as FormInputEvents[]
+    return ['input', 'blur', 'change'] as FormValidateOn[]
   },
   validateOnInputDelay: 300,
   attach: true,
@@ -110,12 +111,14 @@ onMounted(async () => {
       nestedForms.value.set(event.formId, { validate: event.validate })
     } else if (event.type === 'detach') {
       nestedForms.value.delete(event.formId)
-    } else if (props.validateOn?.includes(event.type) && !loading.value) {
+    } else if (props.validateOn?.includes(event.type as FormValidateOn) && !loading.value) {
       if (event.type !== 'input') {
         await _validate({ name: event.name, silent: true, nested: false })
       } else if (event.eager || blurredFields.has(event.name)) {
         await _validate({ name: event.name, silent: true, nested: false })
       }
+    } else if (props.validateOn?.includes('error-input') && errors.value?.find(e => e.name === event.name)) {
+      await _validate({ name: event.name, silent: true, nested: false })
     }
 
     if (event.type === 'blur') {

src/runtime/components/FormField.vue

@@ -19,20 +19,6 @@ export interface FormFieldProps {
   description?: string
   help?: string
   error?: string | boolean
-
-  /**
-   * An array of errors for this field.
-   * Note that only one error is displayed by default. You can use `maxErrors` to control the number of displayed errors.
-   * @defaultValue `1`
-   */
-  errors?: string[]
-
-  /**
-   * The maximum number of errors to display. If `false` or negative, display all available errors.
-   * @defaultValue `1`
-   */
-  maxErrors?: number | false
-
   hint?: string
   /**
    * @defaultValue 'md'
@@ -56,7 +42,7 @@ export interface FormFieldSlots {
   description(props: { description?: string }): any
   help(props: { help?: string }): any
   error(props: { error?: string | boolean }): any
-  default(props: { error?: string | boolean, errors?: string[] }): any
+  default(props: { error?: string | boolean }): any
 }
 </script>
 
@@ -68,7 +54,7 @@ import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFo
 import { tv } from '../utils/tv'
 import type { FormError, FormFieldInjectedOptions } from '../types/form'
 
-const props = withDefaults(defineProps<FormFieldProps>(), { maxErrors: 1 })
+const props = defineProps<FormFieldProps>()
 const slots = defineSlots<FormFieldSlots>()
 
 const appConfig = useAppConfig() as FormField['AppConfig']
@@ -80,24 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.formField ||
 
 const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
 
-const errors = computed(() =>
-  (props.error && typeof props.error === 'string' ? [props.error] : props.errors)
-  || formErrors?.value?.flatMap((error) => {
-    if (!error.name) return []
-    if (error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern))) {
-      return [error.message]
-    }
-    return []
-  }))
-
-const error = computed(() => errors.value?.[0] ?? props.error)
-
-const displayedErrors = computed(() =>
-  props.maxErrors === false
-  || (!!props.maxErrors && props.maxErrors < 0)
-    ? errors.value
-    : errors.value?.slice(0, props.maxErrors)
-)
+const error = computed(() => props.error || formErrors?.value?.find(error => error.name && (error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern))))?.message)
 
 const id = ref(useId())
 // Copies id's initial value to bind aria-attributes such as aria-describedby.
@@ -144,16 +113,9 @@ provide(formFieldInjectionKey, computed(() => ({
     </div>
 
     <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
-      <slot :error="error" :errors="errors" />
+      <slot :error="error" />
 
-      <template v-if="(typeof error === 'string' && error)">
-        <div v-for="err in displayedErrors" :id="`${ariaId}-error`" :key="err" :class="ui.error({ class: props.ui?.error })">
-          <slot name="error" :error="err">
-            {{ err }}
-          </slot>
-        </div>
-      </template>
-      <div v-else-if="!!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
+      <div v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
         <slot name="error" :error="error">
           {{ error }}
         </slot>

src/runtime/types/form.ts

@@ -46,6 +46,8 @@ export type FormData<S extends FormSchema, T extends boolean = true> = T extends
 
 export type FormInputEvents = 'input' | 'blur' | 'change' | 'focus'
 
+export type FormValidateOn = 'input' | 'blur' | 'change' | 'error-input'
+
 export interface FormError<P extends string = string> {
   name?: P
   message: string

test/components/Checkbox.spec.ts

@@ -4,7 +4,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/checkbox'
 import { renderForm } from '../utils/form'
 import { mount, flushPromises } from '@vue/test-utils'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('Checkbox', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -58,7 +58,7 @@ describe('Checkbox', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/CheckboxGroup.spec.ts

@@ -5,7 +5,7 @@ import theme from '#build/ui/checkbox-group'
 import themeCheckbox from '#build/ui/checkbox'
 import { flushPromises, mount } from '@vue/test-utils'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('CheckboxGroup', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -65,7 +65,7 @@ describe('CheckboxGroup', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/FormField.spec.ts

@@ -68,10 +68,6 @@ describe('FormField', () => {
     ['with required', { props: { label: 'Username', required: true } }],
     ['with help', { props: { help: 'Username must be unique' } }],
     ['with error', { props: { error: 'Username is already taken' } }],
-    ['with multiple errors', { props: { errors: ['Username is already taken', 'This should not be visible'] } }],
-    ['with maxErrors', { props: { maxErrors: 2, errors: ['Username is already taken', 'This should be visible'] } }],
-    ['with maxErrors negative', { props: { maxErrors: -1, errors: ['Username is already taken', 'This should be visible', 'This should be visible'] } }],
-    ['with maxErrors false', { props: { maxErrors: false, errors: ['Username is already taken', 'This should be visible', 'This should be visible'] } }],
     ['with hint', { props: { hint: 'Use letters, numbers, and special characters' } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Username', description: 'Enter your username', size } }]),
     ['with as', { props: { as: 'section' } }],

test/components/Input.spec.ts

@@ -4,8 +4,8 @@ import Input, { type InputProps, type InputSlots } from '../../src/runtime/compo
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 
+import type { FormValidateOn } from '~/src/module'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
 
 describe('Input', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -104,7 +104,7 @@ describe('Input', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[], eagerValidation?: boolean) {
+    async function createForm(validateOn?: FormValidateOn[], eagerValidation?: boolean) {
       const wrapper = await renderForm({
         props: {
           validateOn,
@@ -160,6 +160,18 @@ describe('Input', () => {
       expect(wrapper.text()).not.toContain('Error message')
     })
 
+    test('validate on error-input works', async () => {
+      const { input, wrapper } = await createForm(['error-input', 'blur'], true)
+      await input.setValue('value')
+      expect(wrapper.text()).not.toContain('Error message')
+
+      await input.trigger('blur')
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue('valid')
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
     test('validate on input without eager validation works', async () => {
       const { input, wrapper } = await createForm(['input'])
 

test/components/InputMenu.spec.ts

@@ -4,7 +4,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 import { renderForm } from '../utils/form'
 import { flushPromises, mount } from '@vue/test-utils'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 import { expectEmitPayloadType } from '../utils/types'
 
 describe('InputMenu', () => {
@@ -110,7 +110,7 @@ describe('InputMenu', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/InputNumber.spec.ts

@@ -5,7 +5,7 @@ import { reactive } from 'vue'
 import InputNumber, { type InputNumberProps, type InputNumberSlots } from '../../src/runtime/components/InputNumber.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input-number'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 import { renderForm } from '../utils/form'
 
 describe('InputNumber', () => {
@@ -61,7 +61,7 @@ describe('InputNumber', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         state: reactive({ value: 0 }),
         props: {

test/components/PinInput.spec.ts

@@ -5,7 +5,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/pin-input'
 
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('PinInput', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -65,7 +65,7 @@ describe('PinInput', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/RadioGroup.spec.ts

@@ -4,7 +4,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/radio-group'
 import { flushPromises, mount } from '@vue/test-utils'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('RadioGroup', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -67,7 +67,7 @@ describe('RadioGroup', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/Select.spec.ts

@@ -4,7 +4,7 @@ import Select, { type SelectProps, type SelectSlots } from '../../src/runtime/co
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 import { expectEmitPayloadType } from '../utils/types'
 
 describe('Select', () => {
@@ -107,7 +107,7 @@ describe('Select', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/SelectMenu.spec.ts

@@ -4,7 +4,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 import { renderForm } from '../utils/form'
 import { flushPromises, mount } from '@vue/test-utils'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 import { expectEmitPayloadType } from '../utils/types'
 
 describe('SelectMenu', () => {
@@ -113,7 +113,7 @@ describe('SelectMenu', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/Slider.spec.ts

@@ -4,7 +4,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/slider'
 import { flushPromises, mount } from '@vue/test-utils'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('Slider', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -52,7 +52,7 @@ describe('Slider', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/Switch.spec.ts

@@ -4,7 +4,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/switch'
 import { flushPromises, mount } from '@vue/test-utils'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('Switch', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -55,7 +55,7 @@ describe('Switch', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/Textarea.spec.ts

@@ -4,7 +4,7 @@ import Textarea, { type TextareaProps, type TextareaSlots } from '../../src/runt
 import ComponentRender from '../component-render'
 import theme from '#build/ui/textarea'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('Textarea', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -107,7 +107,7 @@ describe('Textarea', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[], eagerValidation?: boolean) {
+    async function createForm(validateOn?: FormValidateOn[], eagerValidation?: boolean) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/__snapshots__/FormField-vue.spec.ts.snap

@@ -148,59 +148,6 @@ exports[`FormField > renders with label slot correctly 1`] = `
 </div>"
 `;
 
-exports[`FormField > renders with maxErrors correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-  <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
-    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
-  </div>
-</div>"
-`;
-
-exports[`FormField > renders with maxErrors false correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-  <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
-    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
-    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
-  </div>
-</div>"
-`;
-
-exports[`FormField > renders with maxErrors negative correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-  <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
-    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
-    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
-  </div>
-</div>"
-`;
-
-exports[`FormField > renders with multiple errors correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-  <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
-  </div>
-</div>"
-`;
-
 exports[`FormField > renders with required correctly 1`] = `
 "<div class="text-sm">
   <div class="">

test/components/__snapshots__/FormField.spec.ts.snap

@@ -148,59 +148,6 @@ exports[`FormField > renders with label slot correctly 1`] = `
 </div>"
 `;
 
-exports[`FormField > renders with maxErrors correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-  <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
-    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
-  </div>
-</div>"
-`;
-
-exports[`FormField > renders with maxErrors false correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-  <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
-    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
-    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
-  </div>
-</div>"
-`;
-
-exports[`FormField > renders with maxErrors negative correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-  <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
-    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
-    <div id="v-0-0-error" class="mt-2 text-error">This should be visible</div>
-  </div>
-</div>"
-`;
-
-exports[`FormField > renders with multiple errors correctly 1`] = `
-"<div class="text-sm">
-  <div class="">
-    <!--v-if-->
-    <!--v-if-->
-  </div>
-  <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
-  </div>
-</div>"
-`;
-
 exports[`FormField > renders with required correctly 1`] = `
 "<div class="text-sm">
   <div class="">