fix: should run validation on submit and clear error if a valid value is entered

packages/form-core/src/FieldApi.ts

@@ -332,10 +332,15 @@ export class FieldApi<
   validateSync = (value = this.state.value, cause: ValidationCause) => {
     const { onChange, onBlur } = this.options
     const validate =
-      cause === 'submit' ? undefined : cause === 'change' ? onChange : onBlur
+      cause === 'submit'
+        ? onChange
+          ? onChange
+          : onBlur
+        : cause === 'change'
+        ? onChange
+        : onBlur
 
     if (!validate) return
-
     // Use the validationCount for all field instances to
     // track freshness of the validation
     const validationCount = (this.getInfo().validationCount || 0) + 1
@@ -373,6 +378,18 @@ export class FieldApi<
         },
       }))
     }
+    /* when we have an error for onSubmit in the state , we want   
+    to clear the error as soon as the user enters a valid value in the field 
+    */
+    if (this.state.meta.errorMap['onSubmit'] && cause !== 'submit' && !error) {
+      this.setMeta((prev) => ({
+        ...prev,
+        errorMap: {
+          ...prev.errorMap,
+          [getErrorMapKey('submit')]: undefined,
+        },
+      }))
+    }
 
     // If a sync error is encountered for the errorMapKey (eg. onChange), cancel any async validation
     if (this.state.meta.errorMap[errorMapKey]) {

packages/form-core/src/tests/FormApi.spec.ts

@@ -668,4 +668,67 @@ describe('form api', () => {
       onMount: 'Please enter a different value',
     })
   })
+
+  it('should validate fields on Submit', async () => {
+    const form = new FormApi({
+      defaultValues: {
+        firstName: '',
+        lastName: '',
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'firstName',
+      onChange: (v) => (v.length > 0 ? undefined : 'first name is required'),
+    })
+
+    const lastNameField = new FieldApi({
+      form,
+      name: 'lastName',
+      onChange: (v) => (v.length > 0 ? undefined : 'last name is required'),
+    })
+
+    field.mount()
+    lastNameField.mount()
+
+    await form.handleSubmit()
+    expect(form.state.isFieldsValid).toEqual(false)
+    expect(form.state.canSubmit).toEqual(false)
+    expect(form.state.fieldMeta['firstName'].errors).toEqual([
+      'first name is required',
+    ])
+    expect(form.state.fieldMeta['lastName'].errors).toEqual([
+      'last name is required',
+    ])
+  })
+
+  it('should clear onSubmit error when a valid value is entered ', async () => {
+    const form = new FormApi({
+      defaultValues: {
+        firstName: '',
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'firstName',
+      onChange: (v) => (v.length > 0 ? undefined : 'first name is required'),
+    })
+
+    field.mount()
+
+    await form.handleSubmit()
+    expect(form.state.isFieldsValid).toEqual(false)
+    expect(form.state.canSubmit).toEqual(false)
+    expect(form.state.fieldMeta['firstName'].errorMap['onSubmit']).toEqual(
+      'first name is required',
+    )
+    field.handleChange('test')
+    expect(form.state.isFieldsValid).toEqual(true)
+    expect(form.state.canSubmit).toEqual(true)
+    expect(
+      form.state.fieldMeta['firstName'].errorMap['onSubmit'],
+    ).toBeUndefined()
+  })
 })