Only validate touched/dirty fields

[Micnubinub]

What's the best way to validate only the dirty fields in onBlur when only using one schema at the form level? i.e. If I both values are invalid, but only val1 has been touched the error should only be on value 1. However when the user tries to submit, then we do a full validate

const form = useAppForm({
    canSubmitWhenInvalid: false,
    defaultValues: {
	    val1: '',
	    val2: ''
    } ,
    validators: {
	    onBlur: Schema
    }
})

<form.AppForm>
	<form.AppField
		name='val1'
		children={(field) => (
			<field.TextInput label='V 1' />
		)}
	/>
      <form.AppField
		name='val1'
		children={(field) => (
			<field.TextInput label='V 2' />
		)}
	/>
</form.AppForm>

[LeCarbonator]

There's two requirements you have for showing errors:

• isTouched: It must be touched (blurred or changed). If it should only be blurred, use isBlurred instead.
• The user may have tried submitting without touching the field. Check for submissionAttempts > 0

Since you're using field components, you should use useStore to ensure it's reactive.

const isTouched = useStore(field.store, state => state.meta.isTouched)
const submissionAttempts = useStore(field.form.store, state => state.submissionAttempts)

const showError = isTouched || submissionAttempts > 0