feat(form): add on-validate prop, closes #5883

CHANGELOG.en-US.md

@@ -30,6 +30,7 @@
 - `n-form-item` add `feedback-vertical` prop and `feedback-crosswise` prop
 - `n-split` supports setting the pixel value size.
 - `n-scrollbar` adds `content-style` and `content-class` props, closes [#4497](https://github.com/tusen-ai/naive-ui/issues/4497).
+- `n-form` adds `on-validate` prop, closes [#5883](https://github.com/tusen-ai/naive-ui/issues/5883).
 
 ## 2.38.1
 

CHANGELOG.zh-CN.md

@@ -30,6 +30,7 @@
 - `n-form-item` 新增 `feedback-vertical` 和 `feedback-crosswise` 属性
 - `n-split` 支持设置像素值大小
 - `n-scrollbar` 新增 `content-style` 和 `content-class` 属性，关闭 [#4497](https://github.com/tusen-ai/naive-ui/issues/4497)
+- `n-form` 新增 `on-validate` 属性, 关闭 [#5883](https://github.com/tusen-ai/naive-ui/issues/5883)
 
 ## 2.38.1
 

src/form/demos/enUS/index.demo-entry.md

@@ -57,13 +57,14 @@ feedback-position.vue
 </n-alert>
 
 | Property | Type | Description | Version |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | asyncValidator | `(rule: FormItemRule, value: any, callback: (error?: Error) => void) => void` | Asynchronous validation in the form of a callback. |  |
 | message | `string` | Text to show when validation fails. |  |
 | renderMessage | `() => VNodeChild` | Render function or message. | 2.29.1 |
 | required | `boolean` | Is it required. |  |
 | trigger | `string \| Array<string>` | Trigger type. |  |
 | validator | `(rule: FormItemRule, value: any) => boolean \| Error` | Validation rule. |  |
+| on-validate | `(path: string \| undefined, result: FormItemValidateResult) => void` | `-` | triggers after any form item is validated | NEXT_VERSION |
 
 #### FormValidateMessages Type
 

src/form/demos/zhCN/index.demo-entry.md

@@ -47,6 +47,7 @@ feedback-position.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
 

src/form/index.ts

@@ -17,7 +17,8 @@ export type {
   FormItemInst,
   FormItemRule,
   FormRules,
-  FormValidationError
+  FormValidationError,
+  FormItemValidateResult
 } from './src/interface'
 
 // deprecated

src/form/src/Form.tsx

@@ -22,7 +22,7 @@ import type {
   FormInst,
   Size,
   FormValidateMessages,
-  FormItemInternalValidateResult
+  FormItemValidateResult
 } from './interface'
 import { type ExtractPublicPropTypes, keysOf } from '../../_utils'
 import { formInjectionKey, formItemInstsInjectionKey } from './context'
@@ -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]

src/form/src/FormItem.tsx

@@ -49,7 +49,7 @@ import type {
   FormItemValidateOptions,
   FormItemInst,
   FormItemInternalValidate,
-  FormItemInternalValidateResult,
+  FormItemValidateResult,
   FeedBackPositonCrosswise,
   FeedBackPositonVertical
 } from './interface'
@@ -93,7 +93,8 @@ export const formItemProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
-  labelProps: Object as PropType<LabelHTMLAttributes>
+  labelProps: Object as PropType<LabelHTMLAttributes>,
+  onValidate: Function as PropType<(errors: ValidateError[]) => void>
 } as const
 
 export type FormItemSetupProps = ExtractPropTypes<typeof formItemProps>
@@ -337,7 +338,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)
@@ -363,7 +364,7 @@ export default defineComponent({
         })
       }
 
-      const validationResult: FormItemInternalValidateResult = {
+      const validationResult: FormItemValidateResult = {
         valid: true,
         errors: undefined,
         warnings: undefined
@@ -405,7 +406,9 @@ export default defineComponent({
       ) {
         restoreValidation()
       }
-
+      if (onValidate && activeRules.length > 0) {
+        onValidate(path, validationResult)
+      }
       return validationResult
     }
     provide(formItemInjectionKey, {

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