diff --git a/__tests__/suits/Area.test.tsx b/__tests__/suits/Area.test.tsx
index 08700d9..8de4f76 100644
--- a/__tests__/suits/Area.test.tsx
+++ b/__tests__/suits/Area.test.tsx
@@ -17,13 +17,30 @@ describe('test ValidatorProvider', () => {
                 return 'not passed';
             }
         });
-        Validator.extend('required', required)
+        Validator.extend('required', required);
+
+        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 +51,7 @@ describe('test ValidatorProvider', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea>
                 {() => (
-                    <input name="test" />
+                    <input name="test"/>
                 )}
             </ValidatorArea>
         );
@@ -65,8 +82,8 @@ describe('test ValidatorProvider', () => {
                     <>
                         <><input/></>
                         <div>
-                            <input />
-                            <input />
+                            <input/>
+                            <input/>
                             <><input/></>
                         </div>
                     </>
@@ -80,7 +97,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 +109,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 +120,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 +142,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>
         );
 
@@ -133,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 {
@@ -146,15 +176,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 +199,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 +209,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 +242,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 +275,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 +299,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 +330,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,12 +343,86 @@ 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>
         );
 
         area.find('input').at(0).simulate('blur');
         await tick();
         expect(logFn).toHaveBeenCalled();
-    })
+    });
+
+    it('should indicate whether the area is valid', async () => {
+        const area = mount(
+            <ValidatorArea rules="required">
+                {({valid}) => (
+                    <>
+                        <input name="test" value=""/>
+                        <div>{valid ? 'yes' : 'no'}</div>
+                    </>
+                )}
+            </ValidatorArea>
+        );
+
+        area.find('input').at(0).simulate('blur');
+        await tick();
+        expect(area.find('div').text()).toBe('no');
+    });
+
+    it('should indicate pending while validation is ongoing', async () => {
+        jest.useFakeTimers();
+
+        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');
+        jest.advanceTimersByTime(90);
+        expect(area.find('div').text()).toBe('yes');
+        await Promise.resolve();
+        jest.advanceTimersByTime(10);
+        await Promise.resolve();
+        expect(area.find('div').text()).toBe('no');
+    });
+
+    it('should indicate dirty when input changed', async () => {
+        const area = mount(
+            <ValidatorArea>
+                {({dirty}) => (
+                    <>
+                        <input name="test" value=""/>
+                        <div>{dirty ? 'yes' : 'no'}</div>
+                    </>
+                )}
+            </ValidatorArea>
+        );
+
+        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');
+        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..eaf7308 100644
--- a/src/AreaScope.ts
+++ b/src/AreaScope.ts
@@ -3,4 +3,20 @@ export interface AreaScope {
      * The errors after validating the area
      */
     errors: string[];
+    /**
+     * Flag indicating the area is dirty
+     */
+    valid: boolean;
+    /**
+     * 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/ProviderScope.ts b/src/ProviderScope.ts
index 287fefe..fff2cf2 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 is invalid
+     */
+    valid: boolean;
 }
diff --git a/src/components/ValidatorArea.tsx b/src/components/ValidatorArea.tsx
index 6f1258d..afbb9d1 100644
--- a/src/components/ValidatorArea.tsx
+++ b/src/components/ValidatorArea.tsx
@@ -18,10 +18,14 @@ export interface ValidatorAreaPropsWithDefault extends ValidatorAreaProps {
 
 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>;
 }
 
@@ -41,16 +45,15 @@ 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: [],
+        valid: false,
+        pending: false,
+        dirty: false,
+        touched: false
     }
 
     /**
@@ -74,9 +77,10 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
      */
     public validate(ref?: HTMLElement): Promise<boolean> {
         return new Promise<boolean>((resolve) => {
-            this.dirty = false;
             this.setState(() => ({
-                errors: []
+                valid: false,
+                errors: [],
+                pending: true
             }), () => {
                 const {
                     rules: propRules,
@@ -93,20 +97,29 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
                     validationName
                 )).setArea(this);
 
-                validator.validate().then((passed) => {
-                    this.dirty = !passed;
-
+                validator.validate().then((passed: boolean): void => {
                     if (!passed) {
                         this.setState({
-                            errors: validator.getErrors()
-                        }, () => {
+                            errors: validator.getErrors(),
+                            valid: false,
+                            pending: false
+                        }, (): void => {
                             resolve(false);
                         })
                     } else {
-                        resolve(true);
+                        this.setState({
+                            pending: false,
+                            valid: true
+                        }, () => {
+                            resolve(true);
+                        })
                     }
                 }).catch((e): void => {
-                    console.error(e);
+                    this.setState({
+                        pending: false
+                    }, () => {
+                        console.error(e);
+                    })
                 });
             });
         })
@@ -156,14 +169,27 @@ 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);
+                                this.setState({
+                                    touched: true
+                                }, () => {
+                                    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)) {
@@ -199,10 +225,20 @@ 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,
+            valid,
+            pending,
+            dirty,
+            touched
+        } = this.state;
 
         return {
-            errors
+            errors,
+            valid,
+            pending,
+            dirty,
+            touched
         };
     }
 
diff --git a/src/components/ValidatorProvider.tsx b/src/components/ValidatorProvider.tsx
index cbd9110..5204ecf 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;
+    valid: boolean;
 }
 
 export class ValidatorProvider extends React.Component<ValidatorProviderProps, ValidatorProviderState> {
     public readonly state: ValidatorProviderState = {
         areas: {},
-        errors: {}
+        errors: {},
+        valid: 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({
+            valid: false
+        }, async (): Promise<void> => {
+            const invalidAreas = (await Promise.all(Object.values(areas)
+                .map((area) => area.validate())
+            )).filter((valid: boolean) => !valid);
+
+            if (!invalidAreas.length && onValidated) {
+                onValidated();
+            } else {
+                this.setState({
+                    valid: 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),
+            valid: this.state.valid
         };
     }