feat: validate support dirty (#625)

Author: zombieJ

src/interface.ts

@@ -137,6 +137,8 @@ export interface ValidateOptions {
    * e.g. [['a']] will validate ['a'] , ['a', 'b'] and ['a', 1].
    */
   recursive?: boolean;
+  /** Validate when a field is dirty (validated or touched) */
+  dirty?: boolean;
 }
 
 export type ValidateFields<Values = any> = {

src/useForm.ts

@@ -887,7 +887,7 @@ export class FormStore {
     const TMP_SPLIT = String(Date.now());
     const validateNamePathList = new Set<string>();
 
-    const recursive = options?.recursive;
+    const { recursive, dirty } = options || {};
 
     this.getFieldEntities(true).forEach((field: FieldEntity) => {
       // Add field if not provide `nameList`
@@ -900,6 +900,11 @@ export class FormStore {
         return;
       }
 
+      // Skip if only validate dirty field
+      if (dirty && !field.isFieldDirty()) {
+        return;
+      }
+
       const fieldNamePath = field.getNamePath();
       validateNamePathList.add(fieldNamePath.join(TMP_SPLIT));
 

tests/common/timeout.ts

@@ -1,5 +1,15 @@
+import { act } from '@testing-library/react';
+
 export default async (timeout: number = 10) => {
   return new Promise<void>(resolve => {
     setTimeout(resolve, timeout);
   });
 };
+
+export async function waitFakeTime(timeout: number = 10) {
+  await act(async () => {
+    await Promise.resolve();
+    jest.advanceTimersByTime(timeout);
+    await Promise.resolve();
+  });
+}

tests/validate.test.tsx

@@ -5,7 +5,7 @@ import Form, { Field, useForm } from '../src';
 import type { FormInstance, ValidateMessages } from '../src/interface';
 import { changeValue, getInput, matchError } from './common';
 import InfoField, { Input } from './common/InfoField';
-import timeout from './common/timeout';
+import timeout, { waitFakeTime } from './common/timeout';
 
 describe('Form.Validate', () => {
   it('required', async () => {
@@ -1033,4 +1033,60 @@ describe('Form.Validate', () => {
 
     jest.useRealTimers();
   });
+
+  it('dirty', async () => {
+    jest.useFakeTimers();
+
+    const formRef = React.createRef<FormInstance>();
+
+    const Demo = ({ touchMessage, validateMessage }) => (
+      <Form ref={formRef}>
+        <InfoField name="touch" rules={[{ required: true, message: touchMessage }]}>
+          <Input />
+        </InfoField>
+        <InfoField name="validate" rules={[{ required: true, message: validateMessage }]}>
+          <Input />
+        </InfoField>
+        <InfoField name="noop" rules={[{ required: true, message: 'noop' }]}>
+          <Input />
+        </InfoField>
+      </Form>
+    );
+
+    const { container, rerender } = render(
+      <Demo touchMessage="touch" validateMessage="validate" />,
+    );
+
+    fireEvent.change(container.querySelectorAll('input')[0], {
+      target: {
+        value: 'light',
+      },
+    });
+    fireEvent.change(container.querySelectorAll('input')[0], {
+      target: {
+        value: '',
+      },
+    });
+
+    formRef.current.validateFields(['validate']);
+
+    await waitFakeTime();
+    matchError(container.querySelectorAll<HTMLDivElement>('.field')[0], `touch`);
+    matchError(container.querySelectorAll<HTMLDivElement>('.field')[1], `validate`);
+    matchError(container.querySelectorAll<HTMLDivElement>('.field')[2], false);
+
+
+    // Revalidate
+    rerender(
+      <Demo touchMessage="new_touch" validateMessage="new_validate" />,
+    );
+    formRef.current.validateFields({ dirty: true });
+
+    await waitFakeTime();
+    matchError(container.querySelectorAll<HTMLDivElement>('.field')[0], `new_touch`);
+    matchError(container.querySelectorAll<HTMLDivElement>('.field')[1], `new_validate`);
+    matchError(container.querySelectorAll<HTMLDivElement>('.field')[2], false);
+
+    jest.useRealTimers();
+  });
 });