@tanstack/form-core 0.41.3 → 0.41.4

package/src/FieldApi.ts

@@ -989,12 +989,15 @@ export class FieldApi<
    */
   validate = (
     cause: ValidationCause,
+    opts?: { skipFormValidation?: boolean },
   ): ValidationError[] | Promise<ValidationError[]> => {
     // If the field is pristine, do not validate
     if (!this.state.meta.isTouched) return []
 
     // Attempt to sync validate first
-    const { fieldsErrorMap } = this.form.validateSync(cause)
+    const { fieldsErrorMap } = opts?.skipFormValidation
+      ? { fieldsErrorMap: {} as never }
+      : this.form.validateSync(cause)
     const { hasErrored } = this.validateSync(
       cause,
       fieldsErrorMap[this.name] ?? {},
@@ -1008,7 +1011,9 @@ export class FieldApi<
     }
 
     // No error? Attempt async validation
-    const formValidationResultPromise = this.form.validateAsync(cause)
+    const formValidationResultPromise = opts?.skipFormValidation
+      ? Promise.resolve({})
+      : this.form.validateAsync(cause)
     return this.validateAsync(cause, formValidationResultPromise)
   }
 

package/src/FormApi.ts

@@ -722,7 +722,7 @@ export class FormApi<
   }
 
   /**
-   * Validates form and all fields in using the correct handlers for a given validation cause.
+   * Validates all fields using the correct handlers for a given validation cause.
    */
   validateAllFields = async (cause: ValidationCause) => {
     const fieldValidationPromises: Promise<ValidationError[]>[] = [] as any
@@ -735,7 +735,9 @@ export class FormApi<
         // Validate the field
         fieldValidationPromises.push(
           // Remember, `validate` is either a sync operation or a promise
-          Promise.resolve().then(() => fieldInstance.validate(cause)),
+          Promise.resolve().then(() =>
+            fieldInstance.validate(cause, { skipFormValidation: true }),
+          ),
         )
         // If any fields are not touched
         if (!field.instance.state.meta.isTouched) {
@@ -1076,9 +1078,19 @@ export class FormApi<
       this.baseStore.setState((prev) => ({ ...prev, isSubmitting: false }))
     }
 
-    // Validate form and all fields
     await this.validateAllFields('submit')
 
+    if (!this.state.isFieldsValid) {
+      done()
+      this.options.onSubmitInvalid?.({
+        value: this.state.values,
+        formApi: this,
+      })
+      return
+    }
+
+    await this.validate('submit')
+
     // Fields are invalid, do not submit
     if (!this.state.isValid) {
       done()