From 5dcaae2c78dd7b0a9e1b49f8c9bba8967c53cd65 Mon Sep 17 00:00:00 2001
From: jizai1125 <1414589221@qq.com>
Date: Fri, 10 Jan 2025 14:42:12 +0800
Subject: [PATCH] feat(form): add `on-validate` prop, closes #5883

---
 CHANGELOG.en-US.md                                 |  6 ++++++
 CHANGELOG.zh-CN.md                                 |  6 ++++++
 src/form/demos/enUS/index.demo-entry.md            |  1 +
 src/form/demos/enUS/partially-apply-rules.demo.vue | 12 ++++++++++--
 src/form/demos/zhCN/index.demo-entry.md            |  1 +
 src/form/demos/zhCN/partially-apply-rules.demo.vue | 12 ++++++++++--
 src/form/index.ts                                  |  1 +
 src/form/src/Form.tsx                              |  9 ++++++---
 src/form/src/FormItem.tsx                          |  9 ++++++---
 src/form/src/interface.ts                          |  4 ++--
 10 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index e3aafc826d9..320aa3d8892 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+### NEXT_VERSION
+
+### Features
+
+- `n-form` adds `on-validate` prop, closes [#5883](https://github.com/tusen-ai/naive-ui/issues/5883).
+
 ## 2.41.0
 
 ### Breaking Changes
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index dd6c97db9d9..d7474385eb8 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+### NEXT_VERSION
+
+### Features
+
+- `n-form` 新增 `on-validate` 属性, 关闭 [#5883](https://github.com/tusen-ai/naive-ui/issues/5883)
+
 ## 2.41.0
 
 `2025-01-05`
diff --git a/src/form/demos/enUS/index.demo-entry.md b/src/form/demos/enUS/index.demo-entry.md
index 7410e05aee9..f029dc55769 100644
--- a/src/form/demos/enUS/index.demo-entry.md
+++ b/src/form/demos/enUS/index.demo-entry.md
@@ -47,6 +47,7 @@ feedback-style.vue
 | require-mark-placement | `'left' \| 'right' \| 'right-hanging'` | `'right'` | Require mark placement | `'right-hanging'` 2.24.0 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size. |  |
 | validate-messages | `FormValidateMessages` | `undefined` | Validation messages of `async-validator`. | 2.27.0 |
+| on-validate | `(path: string \| undefined, result: FormItemValidateResult) => void` | `-` | Callback executed after any form item is validated | NEXT_VERSION |
 
 #### FormItemRule Type
 
diff --git a/src/form/demos/enUS/partially-apply-rules.demo.vue b/src/form/demos/enUS/partially-apply-rules.demo.vue
index f8340c66b82..a0c8f6dbb57 100644
--- a/src/form/demos/enUS/partially-apply-rules.demo.vue
+++ b/src/form/demos/enUS/partially-apply-rules.demo.vue
@@ -5,7 +5,7 @@ During the validation, you may not want to validate all items. You can use the s
 </markdown>
 
 <script lang="ts">
-import type { FormInst } from 'naive-ui'
+import type { FormInst, FormItemValidateResult } from 'naive-ui'
 import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
@@ -34,6 +34,9 @@ export default defineComponent({
           }
         )
       },
+      handleValidate(path: string | undefined, result: FormItemValidateResult) {
+        console.log('validate', path, result)
+      },
       formInstRef,
       model: ref({
         fieldA: '',
@@ -70,7 +73,12 @@ export default defineComponent({
         Restore validation
       </n-button>
     </n-space>
-    <n-form ref="formInstRef" :model="model" :rules="rules">
+    <n-form
+      ref="formInstRef"
+      :model="model"
+      :rules="rules"
+      @validate="handleValidate"
+    >
       <n-form-item label="Min length 3" path="fieldA">
         <n-input v-model:value="model.fieldA" />
       </n-form-item>
diff --git a/src/form/demos/zhCN/index.demo-entry.md b/src/form/demos/zhCN/index.demo-entry.md
index 82b07a1a3a8..95d01168665 100644
--- a/src/form/demos/zhCN/index.demo-entry.md
+++ b/src/form/demos/zhCN/index.demo-entry.md
@@ -47,6 +47,7 @@ feedback-style.vue
 | require-mark-placement | `'left' \| 'right' \| 'right-hanging'` | `'right'` | 必填星号的位置 | `'right-hanging'` 2.24.0 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |  |
 | validate-messages | `FormValidateMessages` | `undefined` | `async-validator` 的默认验证信息 | 2.27.0 |
+| on-validate | `(path: string \| undefined, result: FormItemValidateResult) => void` | `-` | 任一表项被校验后执行的回调 | NEXT_VERSION |
 
 #### FormItemRule Type
 
diff --git a/src/form/demos/zhCN/partially-apply-rules.demo.vue b/src/form/demos/zhCN/partially-apply-rules.demo.vue
index f7633fbcc1f..0191b78a38e 100644
--- a/src/form/demos/zhCN/partially-apply-rules.demo.vue
+++ b/src/form/demos/zhCN/partially-apply-rules.demo.vue
@@ -5,7 +5,7 @@
 </markdown>
 
 <script lang="ts">
-import type { FormInst } from 'naive-ui'
+import type { FormInst, FormItemValidateResult } from 'naive-ui'
 import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
@@ -34,6 +34,9 @@ export default defineComponent({
           }
         )
       },
+      handleValidate(path: string | undefined, result: FormItemValidateResult) {
+        console.log('validate', path, result)
+      },
       formInstRef,
       model: ref({
         fieldA: '',
@@ -70,7 +73,12 @@ export default defineComponent({
         清空验证
       </n-button>
     </n-space>
-    <n-form ref="formInstRef" :model="model" :rules="rules">
+    <n-form
+      ref="formInstRef"
+      :model="model"
+      :rules="rules"
+      @validate="handleValidate"
+    >
       <n-form-item label="最短长度为 3" path="fieldA">
         <n-input v-model:value="model.fieldA" />
       </n-form-item>
diff --git a/src/form/index.ts b/src/form/index.ts
index 78c902a4924..2dbf4929584 100644
--- a/src/form/index.ts
+++ b/src/form/index.ts
@@ -22,6 +22,7 @@ export type {
   FormInst,
   FormItemInst,
   FormItemRule,
+  FormItemValidateResult,
   FormRules,
   FormValidationError
 } from './src/interface'
diff --git a/src/form/src/Form.tsx b/src/form/src/Form.tsx
index 5877c43f092..b972555e506 100644
--- a/src/form/src/Form.tsx
+++ b/src/form/src/Form.tsx
@@ -4,7 +4,7 @@ import type { FormTheme } from '../styles'
 import type {
   FormInst,
   FormItemInst,
-  FormItemInternalValidateResult,
+  FormItemValidateResult,
   FormRules,
   FormValidateCallback,
   FormValidateMessages,
@@ -62,7 +62,10 @@ export const formProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
-  validateMessages: Object as PropType<Partial<FormValidateMessages>>
+  validateMessages: Object as PropType<Partial<FormValidateMessages>>,
+  onValidate: Function as PropType<
+    (path: string | undefined, result: FormItemValidateResult) => void
+  >
 } as const
 
 export type FormSetupProps = ExtractPropTypes<typeof formProps>
@@ -94,7 +97,7 @@ export default defineComponent({
       return await new Promise<{ warnings: ValidateError[][] | undefined }>(
         (resolve, reject) => {
           const formItemValidationPromises: Array<
-            Promise<FormItemInternalValidateResult>
+            Promise<FormItemValidateResult>
           > = []
           for (const key of keysOf(formItems)) {
             const formItemInstances = formItems[key]
diff --git a/src/form/src/FormItem.tsx b/src/form/src/FormItem.tsx
index bc068e76411..a57f7383988 100644
--- a/src/form/src/FormItem.tsx
+++ b/src/form/src/FormItem.tsx
@@ -3,11 +3,11 @@ import type { ExtractPublicPropTypes } from '../../_utils'
 import type {
   FormItemInst,
   FormItemInternalValidate,
-  FormItemInternalValidateResult,
   FormItemRule,
   FormItemRuleValidator,
   FormItemRuleValidatorParams,
   FormItemValidateOptions,
+  FormItemValidateResult,
   LabelAlign,
   LabelPlacement,
   ShouldRuleBeApplied,
@@ -262,7 +262,7 @@ export default defineComponent({
         r => r.level === 'warning'
       )
 
-      const validationResult: FormItemInternalValidateResult = {
+      const validationResult: FormItemValidateResult = {
         valid: true,
         errors: undefined,
         warnings: undefined
@@ -277,7 +277,7 @@ export default defineComponent({
       const warningValidator = new Schema({
         [mergedPath]: activeWarningRules as RuleItem[]
       })
-      const { validateMessages } = NForm?.props || {}
+      const { validateMessages, onValidate } = NForm?.props || {}
       if (validateMessages) {
         validator.messages(validateMessages)
         warningValidator.messages(validateMessages)
@@ -339,6 +339,9 @@ export default defineComponent({
         validationWarnedRef.value = !!validationResult.warnings
       }
 
+      if (onValidate && activeRules.length > 0) {
+        onValidate(path, validationResult)
+      }
       return validationResult
     }
     function handleContentBlur(): void {
diff --git a/src/form/src/interface.ts b/src/form/src/interface.ts
index 29aab98788d..9dbfaddd70b 100644
--- a/src/form/src/interface.ts
+++ b/src/form/src/interface.ts
@@ -44,7 +44,7 @@ export interface FormItemValidateOptions {
   options?: ValidateOption
 }
 
-export interface FormItemInternalValidateResult {
+export interface FormItemValidateResult {
   valid: boolean
   errors: ValidateError[] | undefined
   warnings: ValidateError[] | undefined
@@ -54,7 +54,7 @@ export type FormItemInternalValidate = (
   trigger: ValidationTrigger | string | null | undefined,
   shouldRuleBeApplied?: ShouldRuleBeApplied,
   options?: ValidateOption
-) => Promise<FormItemInternalValidateResult>
+) => Promise<FormItemValidateResult>
 
 export type FormItemValidate = ((options: FormItemValidateOptions) => Promise<{
   warnings: ValidateError[] | undefined