From c6680b391c04fb2ead4d2f794ca9a46903d11ae5 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sun, 31 Jan 2021 22:21:07 +0100
Subject: [PATCH 01/10] Added dirty flag

---
 __tests__/suits/Area.test.tsx        | 18 ++++++++++++++++
 __tests__/suits/Provider.test.tsx    | 20 ++++++++++++++++++
 src/AreaScope.ts                     |  4 ++++
 src/ProviderScope.ts                 |  4 ++++
 src/components/ValidatorArea.tsx     |  3 ++-
 src/components/ValidatorProvider.tsx | 31 +++++++++++++++++++---------
 6 files changed, 69 insertions(+), 11 deletions(-)

diff --git a/__tests__/suits/Area.test.tsx b/__tests__/suits/Area.test.tsx
index 08700d9..b241374 100644
--- a/__tests__/suits/Area.test.tsx
+++ b/__tests__/suits/Area.test.tsx
@@ -320,5 +320,23 @@ describe('test ValidatorProvider', () => {
         area.find('input').at(0).simulate('blur');
         await tick();
         expect(logFn).toHaveBeenCalled();
+    });
+
+    it('should indicate whether the area is dirty', async () => {
+        const area = mount(
+            <ValidatorArea rules="required">
+                {({ dirty }) => (
+                    <>
+                        <input name="test" value="" />
+                        <div>{dirty ? 'yes' : 'no'}</div>
+                    </>
+                )}
+            </ValidatorArea>
+        );
+
+        area.find('input').at(0).simulate('blur');
+        await tick();
+        expect(area.find('div').text()).toBe('yes');
+
     })
 })
diff --git a/__tests__/suits/Provider.test.tsx b/__tests__/suits/Provider.test.tsx
index a4aafc0..57fe1d2 100644
--- a/__tests__/suits/Provider.test.tsx
+++ b/__tests__/suits/Provider.test.tsx
@@ -142,4 +142,24 @@ describe('test ValidatorProvider', () => {
         await tick();
         expect(mockFn).toHaveBeenCalled()
     });
+
+    it('should indicate whether the area is dirty', async () => {
+        const provider = mount<ValidatorProvider, ValidatorProviderProps>(
+            <ValidatorProvider>
+                {({ dirty }) => (
+                    <>
+                        <ValidatorArea name="test1" rules="required">
+                            <input value="1" />
+                        </ValidatorArea>
+                        <div>{dirty ? 'yes' : 'no'}</div>
+                    </>
+                )}
+            </ValidatorProvider>
+        );
+
+        provider.find('input').at(0).simulate('blur');
+        await tick();
+        expect(provider.find('div').text()).toBe('no');
+
+    })
 })
diff --git a/src/AreaScope.ts b/src/AreaScope.ts
index e48ac56..2723cf9 100644
--- a/src/AreaScope.ts
+++ b/src/AreaScope.ts
@@ -3,4 +3,8 @@ export interface AreaScope {
      * The errors after validating the area
      */
     errors: string[];
+    /**
+     * Flag indicating the area is dirty
+     */
+    dirty: boolean;
 }
diff --git a/src/ProviderScope.ts b/src/ProviderScope.ts
index 287fefe..3dc081e 100644
--- a/src/ProviderScope.ts
+++ b/src/ProviderScope.ts
@@ -3,4 +3,8 @@ export interface ProviderScope {
      * Validate all areas in the provider and call callback when valid
      */
     validate: (onValidated?: () => void) => Promise<void>;
+    /**
+     * Flag indicating one or more areas are dirty
+     */
+    dirty: boolean;
 }
diff --git a/src/components/ValidatorArea.tsx b/src/components/ValidatorArea.tsx
index 6f1258d..a924eb0 100644
--- a/src/components/ValidatorArea.tsx
+++ b/src/components/ValidatorArea.tsx
@@ -202,7 +202,8 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
         const { errors } = this.state;
 
         return {
-            errors
+            errors,
+            dirty: this.dirty
         };
     }
 
diff --git a/src/components/ValidatorProvider.tsx b/src/components/ValidatorProvider.tsx
index cbd9110..8b1435d 100644
--- a/src/components/ValidatorProvider.tsx
+++ b/src/components/ValidatorProvider.tsx
@@ -12,13 +12,15 @@ export interface ValidatorProviderProps {
 
 interface ValidatorProviderState {
     areas: Record<string, ValidatorArea>;
-    errors: Messages
+    errors: Messages;
+    dirty: boolean;
 }
 
 export class ValidatorProvider extends React.Component<ValidatorProviderProps, ValidatorProviderState> {
     public readonly state: ValidatorProviderState = {
         areas: {},
-        errors: {}
+        errors: {},
+        dirty: false
     }
 
     /**
@@ -45,13 +47,21 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
     private async validate(onValidated?: () => void): Promise<void> {
         const { areas } = this.state;
 
-        const dirtyAreas = (await Promise.all(Object.values(areas)
-            .map((area) => area.validate())
-        )).filter((clean) => !clean);
-
-        if (!dirtyAreas.length && onValidated) {
-            onValidated();
-        }
+        this.setState({
+            dirty: false
+        }, async (): Promise<void> => {
+            const dirtyAreas = (await Promise.all(Object.values(areas)
+                .map((area) => area.validate())
+            )).filter((clean: boolean) => !clean);
+
+            if (!dirtyAreas.length && onValidated) {
+                onValidated();
+            } else {
+                this.setState({
+                    dirty: true
+                })
+            }
+        });
     }
 
     /**
@@ -59,7 +69,8 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
      */
     private getScopedProperties(): ProviderScope {
         return {
-            validate: (onValidated?: () => void): Promise<void> => this.validate(onValidated)
+            validate: (onValidated?: () => void): Promise<void> => this.validate(onValidated),
+            dirty: this.state.dirty
         };
     }
 

From 66db57c2aa1d2929050cef5e70e6b2ba52eab62e Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Wed, 3 Feb 2021 08:23:24 +0100
Subject: [PATCH 02/10] Moved dirty to state

---
 src/components/ValidatorArea.tsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/ValidatorArea.tsx b/src/components/ValidatorArea.tsx
index a924eb0..ad61605 100644
--- a/src/components/ValidatorArea.tsx
+++ b/src/components/ValidatorArea.tsx
@@ -18,6 +18,7 @@ export interface ValidatorAreaPropsWithDefault extends ValidatorAreaProps {
 
 interface ValidatorAreaState {
     errors: string[];
+    dirty: boolean;
 }
 
 interface ValidatorAreaComponentsProps {
@@ -41,16 +42,12 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
      */
     private inputRefs: HTMLElement[] = [];
 
-    /**
-     * Indicates whether the area is dirty
-     */
-    private dirty = false;
-
     /**
      * @inheritDoc
      */
     public readonly state: ValidatorAreaState = {
-        errors: []
+        errors: [],
+        dirty: false
     }
 
     /**
@@ -74,8 +71,8 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
      */
     public validate(ref?: HTMLElement): Promise<boolean> {
         return new Promise<boolean>((resolve) => {
-            this.dirty = false;
             this.setState(() => ({
+                dirty: false,
                 errors: []
             }), () => {
                 const {
@@ -94,11 +91,10 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
                 )).setArea(this);
 
                 validator.validate().then((passed) => {
-                    this.dirty = !passed;
-
                     if (!passed) {
                         this.setState({
-                            errors: validator.getErrors()
+                            errors: validator.getErrors(),
+                            dirty: true
                         }, () => {
                             resolve(false);
                         })
@@ -199,11 +195,11 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
      * Returns the properties accessible in the area component scope
      */
     private getScopedProperties(): AreaScope {
-        const { errors } = this.state;
+        const { errors, dirty } = this.state;
 
         return {
             errors,
-            dirty: this.dirty
+            dirty
         };
     }
 

From 47d9632f3c67756ded754c2363436ef5d8916af6 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Wed, 3 Feb 2021 08:41:44 +0100
Subject: [PATCH 03/10] WIP pending

---
 __tests__/suits/Area.test.tsx    | 107 +++++++++++++++++++++----------
 src/AreaScope.ts                 |   4 ++
 src/components/ValidatorArea.tsx |  31 ++++++---
 3 files changed, 99 insertions(+), 43 deletions(-)

diff --git a/__tests__/suits/Area.test.tsx b/__tests__/suits/Area.test.tsx
index b241374..5590b0d 100644
--- a/__tests__/suits/Area.test.tsx
+++ b/__tests__/suits/Area.test.tsx
@@ -17,13 +17,31 @@ describe('test ValidatorProvider', () => {
                 return 'not passed';
             }
         });
-        Validator.extend('required', required)
+        Validator.extend('required', required);
+
+        jest.useFakeTimers();
+    });
+    Validator.extend('long_wait', {
+        async passed(): Promise<boolean> {
+            return new Promise((resolve: (value: boolean) => void): void => {
+                setTimeout(() => {
+                    resolve(true);
+                }, 100);
+            })
+        },
+        message(): string {
+            return 'test';
+        }
+    })
+
+    afterEach(() => {
+        jest.useRealTimers();
     });
 
     it('should render input', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea>
-                <input name="test" />
+                <input name="test"/>
             </ValidatorArea>
         );
 
@@ -34,7 +52,7 @@ describe('test ValidatorProvider', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea>
                 {() => (
-                    <input name="test" />
+                    <input name="test"/>
                 )}
             </ValidatorArea>
         );
@@ -65,8 +83,8 @@ describe('test ValidatorProvider', () => {
                     <>
                         <><input/></>
                         <div>
-                            <input />
-                            <input />
+                            <input/>
+                            <input/>
                             <><input/></>
                         </div>
                     </>
@@ -80,7 +98,7 @@ describe('test ValidatorProvider', () => {
     it('should apply rules on blur', async () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea rules="passes_not">
-                <input name="test" value="test" />
+                <input name="test" value="test"/>
             </ValidatorArea>
         );
 
@@ -92,7 +110,7 @@ describe('test ValidatorProvider', () => {
     it('should not apply rules on blur when non-blurrable element', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea rules="passes_not" name="test">
-                <canvas />
+                <canvas/>
             </ValidatorArea>
         );
 
@@ -103,10 +121,10 @@ describe('test ValidatorProvider', () => {
     it('should render error when area dirty', async () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea rules="passes_not">
-                {({ errors }) => {
+                {({errors}) => {
                     return (
                         <>
-                            <input name="test" value="test" />
+                            <input name="test" value="test"/>
                             {!!errors.length && <div>{errors[0]}</div>}
                         </>
                     );
@@ -125,7 +143,7 @@ describe('test ValidatorProvider', () => {
 
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea rules="passes_not">
-                <input name="test" onBlur={mockFn} value="test" />
+                <input name="test" onBlur={mockFn} value="test"/>
             </ValidatorArea>
         );
 
@@ -146,15 +164,15 @@ describe('test ValidatorProvider', () => {
 
         const provider = mount<ValidatorProvider, ValidatorProviderProps>(
             <ValidatorProvider rules="test_all">
-                {({ validate }: ProviderScope) => (
+                {({validate}: ProviderScope) => (
                     <>
                         <ValidatorArea name="test1">
-                            <input value="test" />
+                            <input value="test"/>
                         </ValidatorArea>
                         <ValidatorArea>
-                            <input value="test" name="test2" />
+                            <input value="test" name="test2"/>
                         </ValidatorArea>
-                        <button onClick={() => validate(mockFn)} />
+                        <button onClick={() => validate(mockFn)}/>
                     </>
                 )}
             </ValidatorProvider>
@@ -169,7 +187,7 @@ describe('test ValidatorProvider', () => {
         Validator.extend('test_specific', (validator: Validator) => ({
             passed(): boolean {
                 return validator.refs('test1').length === 2
-                && validator.refs('test2').length === 1;
+                    && validator.refs('test2').length === 1;
             },
             message(): string {
                 return 'test';
@@ -179,16 +197,16 @@ describe('test ValidatorProvider', () => {
 
         const provider = mount<ValidatorProvider, ValidatorProviderProps>(
             <ValidatorProvider rules="test_specific">
-                {({ validate }: ProviderScope) => (
+                {({validate}: ProviderScope) => (
                     <>
                         <ValidatorArea name="test1">
-                            <input value="test" />
-                            <input value="test" />
+                            <input value="test"/>
+                            <input value="test"/>
                         </ValidatorArea>
                         <ValidatorArea>
-                            <input value="test" name="test2" />
+                            <input value="test" name="test2"/>
                         </ValidatorArea>
-                        <button onClick={() => validate(mockFn)} />
+                        <button onClick={() => validate(mockFn)}/>
                     </>
                 )}
             </ValidatorProvider>
@@ -212,15 +230,15 @@ describe('test ValidatorProvider', () => {
 
         const provider = mount<ValidatorProvider, ValidatorProviderProps>(
             <ValidatorProvider rules="test_not_existing">
-                {({ validate }: ProviderScope) => (
+                {({validate}: ProviderScope) => (
                     <>
                         <ValidatorArea name="test1">
-                            <input value="test" />
+                            <input value="test"/>
                         </ValidatorArea>
                         <ValidatorArea>
-                            <input value="test" name="test2" />
+                            <input value="test" name="test2"/>
                         </ValidatorArea>
-                        <button onClick={() => validate(mockFn)} />
+                        <button onClick={() => validate(mockFn)}/>
                     </>
                 )}
             </ValidatorProvider>
@@ -245,7 +263,7 @@ describe('test ValidatorProvider', () => {
 
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea rules="no_other_areas">
-                <input name="test" value="test" onBlur={mockFn} />
+                <input name="test" value="test" onBlur={mockFn}/>
             </ValidatorArea>
         );
 
@@ -269,15 +287,15 @@ describe('test ValidatorProvider', () => {
 
         const provider = mount<ValidatorProvider, ValidatorProviderProps>(
             <ValidatorProvider rules="test_types">
-                {({ validate }: ProviderScope) => (
+                {({validate}: ProviderScope) => (
                     <>
                         <ValidatorArea name="test1">
-                            <textarea value="test" />
+                            <textarea value="test"/>
                         </ValidatorArea>
                         <ValidatorArea>
-                            <input value="test" name="test2" />
+                            <input value="test" name="test2"/>
                         </ValidatorArea>
-                        <button onClick={() => validate(mockFn)} />
+                        <button onClick={() => validate(mockFn)}/>
                     </>
                 )}
             </ValidatorProvider>
@@ -300,7 +318,7 @@ describe('test ValidatorProvider', () => {
 
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea validationName="Foo" rules="passes_not">
-                <input name="test" value="test" />
+                <input name="test" value="test"/>
             </ValidatorArea>
         );
 
@@ -313,7 +331,7 @@ describe('test ValidatorProvider', () => {
         const logFn = jest.spyOn(console, 'error');
         const area = mount(
             <ValidatorArea rules="min:foo">
-                <input name="test" value="test" />
+                <input name="test" value="test"/>
             </ValidatorArea>
         );
 
@@ -325,9 +343,9 @@ describe('test ValidatorProvider', () => {
     it('should indicate whether the area is dirty', async () => {
         const area = mount(
             <ValidatorArea rules="required">
-                {({ dirty }) => (
+                {({dirty}) => (
                     <>
-                        <input name="test" value="" />
+                        <input name="test" value=""/>
                         <div>{dirty ? 'yes' : 'no'}</div>
                     </>
                 )}
@@ -337,6 +355,27 @@ describe('test ValidatorProvider', () => {
         area.find('input').at(0).simulate('blur');
         await tick();
         expect(area.find('div').text()).toBe('yes');
+    });
 
-    })
+    it('should indicate pending while validation is ongoing', async () => {
+        const area = mount(
+            <ValidatorArea rules="long_wait">
+                {({pending}) => (
+                    <>
+                        <input name="test" value=""/>
+                        <div>{pending ? 'yes' : 'no'}</div>
+                    </>
+                )}
+            </ValidatorArea>
+        );
+
+        area.find('input').at(0).simulate('blur');
+        await tick()
+        jest.advanceTimersByTime(20);
+        await Promise.resolve();
+        expect(area.find('div').text()).toBe('yes');
+        jest.advanceTimersByTime(80);
+        await Promise.resolve();
+        expect(area.find('div').text()).toBe('no');
+    });
 })
diff --git a/src/AreaScope.ts b/src/AreaScope.ts
index 2723cf9..6e4d0a3 100644
--- a/src/AreaScope.ts
+++ b/src/AreaScope.ts
@@ -7,4 +7,8 @@ export interface AreaScope {
      * Flag indicating the area is dirty
      */
     dirty: boolean;
+    /**
+     * Flag indicating the area has a pending validation
+     */
+    pending: boolean;
 }
diff --git a/src/components/ValidatorArea.tsx b/src/components/ValidatorArea.tsx
index ad61605..84c7d54 100644
--- a/src/components/ValidatorArea.tsx
+++ b/src/components/ValidatorArea.tsx
@@ -19,6 +19,7 @@ export interface ValidatorAreaPropsWithDefault extends ValidatorAreaProps {
 interface ValidatorAreaState {
     errors: string[];
     dirty: boolean;
+    pending: boolean;
 }
 
 interface ValidatorAreaComponentsProps {
@@ -47,7 +48,8 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
      */
     public readonly state: ValidatorAreaState = {
         errors: [],
-        dirty: false
+        dirty: false,
+        pending: false
     }
 
     /**
@@ -73,7 +75,8 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
         return new Promise<boolean>((resolve) => {
             this.setState(() => ({
                 dirty: false,
-                errors: []
+                errors: [],
+                pending: true
             }), () => {
                 const {
                     rules: propRules,
@@ -90,19 +93,28 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
                     validationName
                 )).setArea(this);
 
-                validator.validate().then((passed) => {
+                validator.validate().then((passed: boolean): void => {
                     if (!passed) {
                         this.setState({
                             errors: validator.getErrors(),
-                            dirty: true
-                        }, () => {
+                            dirty: true,
+                            pending: false
+                        }, (): void => {
                             resolve(false);
                         })
                     } else {
-                        resolve(true);
+                        this.setState({
+                            pending: false
+                        }, () => {
+                            resolve(true);
+                        })
                     }
                 }).catch((e): void => {
-                    console.error(e);
+                    this.setState({
+                        pending: false
+                    }, () => {
+                        console.error(e);
+                    })
                 });
             });
         })
@@ -195,11 +207,12 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
      * Returns the properties accessible in the area component scope
      */
     private getScopedProperties(): AreaScope {
-        const { errors, dirty } = this.state;
+        const { errors, dirty, pending } = this.state;
 
         return {
             errors,
-            dirty
+            dirty,
+            pending
         };
     }
 

From 068a3246b4a1f668391d004a312475e37bace0e1 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Wed, 3 Feb 2021 21:46:11 +0100
Subject: [PATCH 04/10] Added test for pending flag

---
 __tests__/suits/Area.test.tsx | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/__tests__/suits/Area.test.tsx b/__tests__/suits/Area.test.tsx
index 5590b0d..68e104a 100644
--- a/__tests__/suits/Area.test.tsx
+++ b/__tests__/suits/Area.test.tsx
@@ -19,20 +19,19 @@ describe('test ValidatorProvider', () => {
         });
         Validator.extend('required', required);
 
-        jest.useFakeTimers();
+        Validator.extend('long_wait', {
+            async passed(): Promise<boolean> {
+                return new Promise((resolve: (value: boolean) => void): void => {
+                    setTimeout(() => {
+                        resolve(true);
+                    }, 100);
+                })
+            },
+            message(): string {
+                return 'test';
+            }
+        });
     });
-    Validator.extend('long_wait', {
-        async passed(): Promise<boolean> {
-            return new Promise((resolve: (value: boolean) => void): void => {
-                setTimeout(() => {
-                    resolve(true);
-                }, 100);
-            })
-        },
-        message(): string {
-            return 'test';
-        }
-    })
 
     afterEach(() => {
         jest.useRealTimers();
@@ -358,6 +357,8 @@ describe('test ValidatorProvider', () => {
     });
 
     it('should indicate pending while validation is ongoing', async () => {
+        jest.useFakeTimers();
+
         const area = mount(
             <ValidatorArea rules="long_wait">
                 {({pending}) => (
@@ -370,11 +371,10 @@ describe('test ValidatorProvider', () => {
         );
 
         area.find('input').at(0).simulate('blur');
-        await tick()
-        jest.advanceTimersByTime(20);
-        await Promise.resolve();
+        jest.advanceTimersByTime(90);
         expect(area.find('div').text()).toBe('yes');
-        jest.advanceTimersByTime(80);
+        await Promise.resolve();
+        jest.advanceTimersByTime(10);
         await Promise.resolve();
         expect(area.find('div').text()).toBe('no');
     });

From 1dd5c83cdbeb93f9caaebc5b6fd9c27b8e254653 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Wed, 3 Feb 2021 21:52:52 +0100
Subject: [PATCH 05/10] Changed dirty to invalid

---
 __tests__/suits/Area.test.tsx        |  6 +++---
 src/AreaScope.ts                     |  2 +-
 src/ProviderScope.ts                 |  4 ++--
 src/components/ValidatorArea.tsx     | 12 ++++++------
 src/components/ValidatorProvider.tsx | 16 ++++++++--------
 5 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/__tests__/suits/Area.test.tsx b/__tests__/suits/Area.test.tsx
index 68e104a..3bdee6f 100644
--- a/__tests__/suits/Area.test.tsx
+++ b/__tests__/suits/Area.test.tsx
@@ -339,13 +339,13 @@ describe('test ValidatorProvider', () => {
         expect(logFn).toHaveBeenCalled();
     });
 
-    it('should indicate whether the area is dirty', async () => {
+    it('should indicate whether the area is valid', async () => {
         const area = mount(
             <ValidatorArea rules="required">
-                {({dirty}) => (
+                {({valid}) => (
                     <>
                         <input name="test" value=""/>
-                        <div>{dirty ? 'yes' : 'no'}</div>
+                        <div>{valid ? 'yes' : 'no'}</div>
                     </>
                 )}
             </ValidatorArea>
diff --git a/src/AreaScope.ts b/src/AreaScope.ts
index 6e4d0a3..6a822a0 100644
--- a/src/AreaScope.ts
+++ b/src/AreaScope.ts
@@ -6,7 +6,7 @@ export interface AreaScope {
     /**
      * Flag indicating the area is dirty
      */
-    dirty: boolean;
+    valid: boolean;
     /**
      * Flag indicating the area has a pending validation
      */
diff --git a/src/ProviderScope.ts b/src/ProviderScope.ts
index 3dc081e..fff2cf2 100644
--- a/src/ProviderScope.ts
+++ b/src/ProviderScope.ts
@@ -4,7 +4,7 @@ export interface ProviderScope {
      */
     validate: (onValidated?: () => void) => Promise<void>;
     /**
-     * Flag indicating one or more areas are dirty
+     * Flag indicating one or more areas is invalid
      */
-    dirty: boolean;
+    valid: boolean;
 }
diff --git a/src/components/ValidatorArea.tsx b/src/components/ValidatorArea.tsx
index 84c7d54..fe927b4 100644
--- a/src/components/ValidatorArea.tsx
+++ b/src/components/ValidatorArea.tsx
@@ -18,7 +18,7 @@ export interface ValidatorAreaPropsWithDefault extends ValidatorAreaProps {
 
 interface ValidatorAreaState {
     errors: string[];
-    dirty: boolean;
+    valid: boolean;
     pending: boolean;
 }
 
@@ -48,7 +48,7 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
      */
     public readonly state: ValidatorAreaState = {
         errors: [],
-        dirty: false,
+        valid: false,
         pending: false
     }
 
@@ -74,7 +74,7 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
     public validate(ref?: HTMLElement): Promise<boolean> {
         return new Promise<boolean>((resolve) => {
             this.setState(() => ({
-                dirty: false,
+                valid: false,
                 errors: [],
                 pending: true
             }), () => {
@@ -97,7 +97,7 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
                     if (!passed) {
                         this.setState({
                             errors: validator.getErrors(),
-                            dirty: true,
+                            valid: true,
                             pending: false
                         }, (): void => {
                             resolve(false);
@@ -207,11 +207,11 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
      * Returns the properties accessible in the area component scope
      */
     private getScopedProperties(): AreaScope {
-        const { errors, dirty, pending } = this.state;
+        const { errors, valid, pending } = this.state;
 
         return {
             errors,
-            dirty,
+            valid,
             pending
         };
     }
diff --git a/src/components/ValidatorProvider.tsx b/src/components/ValidatorProvider.tsx
index 8b1435d..5204ecf 100644
--- a/src/components/ValidatorProvider.tsx
+++ b/src/components/ValidatorProvider.tsx
@@ -13,14 +13,14 @@ export interface ValidatorProviderProps {
 interface ValidatorProviderState {
     areas: Record<string, ValidatorArea>;
     errors: Messages;
-    dirty: boolean;
+    valid: boolean;
 }
 
 export class ValidatorProvider extends React.Component<ValidatorProviderProps, ValidatorProviderState> {
     public readonly state: ValidatorProviderState = {
         areas: {},
         errors: {},
-        dirty: false
+        valid: false
     }
 
     /**
@@ -48,17 +48,17 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
         const { areas } = this.state;
 
         this.setState({
-            dirty: false
+            valid: false
         }, async (): Promise<void> => {
-            const dirtyAreas = (await Promise.all(Object.values(areas)
+            const invalidAreas = (await Promise.all(Object.values(areas)
                 .map((area) => area.validate())
-            )).filter((clean: boolean) => !clean);
+            )).filter((valid: boolean) => !valid);
 
-            if (!dirtyAreas.length && onValidated) {
+            if (!invalidAreas.length && onValidated) {
                 onValidated();
             } else {
                 this.setState({
-                    dirty: true
+                    valid: true
                 })
             }
         });
@@ -70,7 +70,7 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
     private getScopedProperties(): ProviderScope {
         return {
             validate: (onValidated?: () => void): Promise<void> => this.validate(onValidated),
-            dirty: this.state.dirty
+            valid: this.state.valid
         };
     }
 

From 1ec5a578b51b496606222d2be6372efdf9e632b1 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Thu, 4 Feb 2021 08:44:58 +0100
Subject: [PATCH 06/10] Added dirty flag

---
 __tests__/suits/Area.test.tsx    | 31 +++++++++++++++++++++++++++
 src/AreaScope.ts                 |  8 +++++++
 src/components/ValidatorArea.tsx | 36 +++++++++++++++++++++++++-------
 3 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/__tests__/suits/Area.test.tsx b/__tests__/suits/Area.test.tsx
index 3bdee6f..acb181b 100644
--- a/__tests__/suits/Area.test.tsx
+++ b/__tests__/suits/Area.test.tsx
@@ -150,6 +150,19 @@ describe('test ValidatorProvider', () => {
         expect(mockFn).toBeCalled();
     });
 
+    it('should call element\'s provided onChange along validator onChange', () => {
+        const mockFn = jest.fn();
+
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules="passes_not">
+                <input name="test" onChange={mockFn} value="test"/>
+            </ValidatorArea>
+        );
+
+        area.find('input').simulate('change');
+        expect(mockFn).toBeCalled();
+    });
+
     it('should get all input refs from the provider', async () => {
         Validator.extend('test_all', (validator: Validator) => ({
             passed(): boolean {
@@ -378,4 +391,22 @@ describe('test ValidatorProvider', () => {
         await Promise.resolve();
         expect(area.find('div').text()).toBe('no');
     });
+
+    it('should indicate dirty when input changed', async () => {
+        jest.useFakeTimers();
+
+        const area = mount(
+            <ValidatorArea rules="long_wait">
+                {({dirty}) => (
+                    <>
+                        <input name="test" value=""/>
+                        <div>{dirty ? 'yes' : 'no'}</div>
+                    </>
+                )}
+            </ValidatorArea>
+        );
+
+        area.find('input').at(0).simulate('change', { target: { value: 'a' } });
+        expect(area.find('div').text()).toBe('yes')
+    });
 })
diff --git a/src/AreaScope.ts b/src/AreaScope.ts
index 6a822a0..eaf7308 100644
--- a/src/AreaScope.ts
+++ b/src/AreaScope.ts
@@ -11,4 +11,12 @@ export interface AreaScope {
      * Flag indicating the area has a pending validation
      */
     pending: boolean;
+    /**
+     * Flag indicating the area was changed since the last valid or initial value
+     */
+    dirty: boolean;
+    /**
+     * Flag indicating the area was touched since the last valid or initial value
+     */
+    touched: boolean;
 }
diff --git a/src/components/ValidatorArea.tsx b/src/components/ValidatorArea.tsx
index fe927b4..551313b 100644
--- a/src/components/ValidatorArea.tsx
+++ b/src/components/ValidatorArea.tsx
@@ -20,10 +20,12 @@ interface ValidatorAreaState {
     errors: string[];
     valid: boolean;
     pending: boolean;
+    dirty: boolean;
+    touched: boolean;
 }
 
 interface ValidatorAreaComponentsProps {
-    onBlur: () => void;
+    onBlur: (event: React.FocusEvent) => void;
     ref: React.RefObject<HTMLElement>;
 }
 
@@ -49,7 +51,9 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
     public readonly state: ValidatorAreaState = {
         errors: [],
         valid: false,
-        pending: false
+        pending: false,
+        dirty: false,
+        touched: false
     }
 
     /**
@@ -104,7 +108,8 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
                         })
                     } else {
                         this.setState({
-                            pending: false
+                            pending: false,
+                            dirty: false
                         }, () => {
                             resolve(true);
                         })
@@ -164,15 +169,24 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
 
                         return React.cloneElement<ValidatorAreaComponentsProps>(child, {
                             ...child.props,
-                            onBlur: (): void => {
+                            onBlur: (event: React.FocusEvent): void => {
                                 if (child.props.onBlur) {
-                                    child.props.onBlur();
+                                    child.props.onBlur(event);
                                 }
 
                                 if (this.elementCanBlur(child)) {
                                     this.validate(ref);
                                 }
                             },
+                            onChange: (event: React.ChangeEvent): void => {
+                                if (child.props.onChange) {
+                                    child.props.onChange(event);
+                                }
+
+                                this.setState({
+                                    dirty: true
+                                })
+                            },
                             ref: (node: HTMLElement) => {
                                 if (node && !this.inputRefs.includes(node)) {
                                     ref = node;
@@ -207,12 +221,20 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
      * Returns the properties accessible in the area component scope
      */
     private getScopedProperties(): AreaScope {
-        const { errors, valid, pending } = this.state;
+        const {
+            errors,
+            valid,
+            pending,
+            dirty,
+            touched
+        } = this.state;
 
         return {
             errors,
             valid,
-            pending
+            pending,
+            dirty,
+            touched
         };
     }
 

From e8edf7d1d9814a288ee915aa0a942247d421efed Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Thu, 4 Feb 2021 08:56:20 +0100
Subject: [PATCH 07/10] valid flag fixes

---
 __tests__/suits/Area.test.tsx    |  2 +-
 src/components/ValidatorArea.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/__tests__/suits/Area.test.tsx b/__tests__/suits/Area.test.tsx
index acb181b..683d8a6 100644
--- a/__tests__/suits/Area.test.tsx
+++ b/__tests__/suits/Area.test.tsx
@@ -366,7 +366,7 @@ describe('test ValidatorProvider', () => {
 
         area.find('input').at(0).simulate('blur');
         await tick();
-        expect(area.find('div').text()).toBe('yes');
+        expect(area.find('div').text()).toBe('no');
     });
 
     it('should indicate pending while validation is ongoing', async () => {
diff --git a/src/components/ValidatorArea.tsx b/src/components/ValidatorArea.tsx
index 551313b..bf2c445 100644
--- a/src/components/ValidatorArea.tsx
+++ b/src/components/ValidatorArea.tsx
@@ -101,7 +101,7 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
                     if (!passed) {
                         this.setState({
                             errors: validator.getErrors(),
-                            valid: true,
+                            valid: false,
                             pending: false
                         }, (): void => {
                             resolve(false);
@@ -109,7 +109,9 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
                     } else {
                         this.setState({
                             pending: false,
-                            dirty: false
+                            dirty: false,
+                            touched: false,
+                            valid: true
                         }, () => {
                             resolve(true);
                         })
@@ -174,6 +176,10 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
                                     child.props.onBlur(event);
                                 }
 
+                                this.setState({
+                                    touched: true
+                                });
+
                                 if (this.elementCanBlur(child)) {
                                     this.validate(ref);
                                 }

From 1ba00658f3f7cc98cf26567efc35adfb3c1c1f8e Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Thu, 4 Feb 2021 08:58:37 +0100
Subject: [PATCH 08/10] Added touched test

---
 __tests__/suits/Area.test.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/__tests__/suits/Area.test.tsx b/__tests__/suits/Area.test.tsx
index 683d8a6..fb8cbf1 100644
--- a/__tests__/suits/Area.test.tsx
+++ b/__tests__/suits/Area.test.tsx
@@ -393,10 +393,8 @@ describe('test ValidatorProvider', () => {
     });
 
     it('should indicate dirty when input changed', async () => {
-        jest.useFakeTimers();
-
         const area = mount(
-            <ValidatorArea rules="long_wait">
+            <ValidatorArea>
                 {({dirty}) => (
                     <>
                         <input name="test" value=""/>
@@ -407,6 +405,23 @@ describe('test ValidatorProvider', () => {
         );
 
         area.find('input').at(0).simulate('change', { target: { value: 'a' } });
+        await tick();
+        expect(area.find('div').text()).toBe('yes')
+    });
+
+    it('should indicate touched when input blurred', async () => {
+        const area = mount(
+            <ValidatorArea rules="long_wait">
+                {({touched}) => (
+                    <>
+                        <input name="test" value=""/>
+                        <div>{touched ? 'yes' : 'no'}</div>
+                    </>
+                )}
+            </ValidatorArea>
+        );
+
+        area.find('input').at(0).simulate('blur');
         expect(area.find('div').text()).toBe('yes')
     });
 })

From 877495da4a3336f42bea86a2ff576259173041af Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Thu, 4 Feb 2021 08:59:11 +0100
Subject: [PATCH 09/10] Added tick to test

---
 __tests__/suits/Area.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/__tests__/suits/Area.test.tsx b/__tests__/suits/Area.test.tsx
index fb8cbf1..8de4f76 100644
--- a/__tests__/suits/Area.test.tsx
+++ b/__tests__/suits/Area.test.tsx
@@ -422,6 +422,7 @@ describe('test ValidatorProvider', () => {
         );
 
         area.find('input').at(0).simulate('blur');
+        await tick();
         expect(area.find('div').text()).toBe('yes')
     });
 })

From 146137068febc3ddcff3d5f3b3c9ce0f74e7832a Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Thu, 4 Feb 2021 19:38:31 +0100
Subject: [PATCH 10/10] Changed flags to not reset on validate

---
 src/components/ValidatorArea.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/ValidatorArea.tsx b/src/components/ValidatorArea.tsx
index bf2c445..afbb9d1 100644
--- a/src/components/ValidatorArea.tsx
+++ b/src/components/ValidatorArea.tsx
@@ -109,8 +109,6 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
                     } else {
                         this.setState({
                             pending: false,
-                            dirty: false,
-                            touched: false,
                             valid: true
                         }, () => {
                             resolve(true);
@@ -178,11 +176,11 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
 
                                 this.setState({
                                     touched: true
+                                }, () => {
+                                    if (this.elementCanBlur(child)) {
+                                        this.validate(ref);
+                                    }
                                 });
-
-                                if (this.elementCanBlur(child)) {
-                                    this.validate(ref);
-                                }
                             },
                             onChange: (event: React.ChangeEvent): void => {
                                 if (child.props.onChange) {