From 56a1b5dc582135b036907adda6a1bd3b7ddd4f3b Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sun, 23 Aug 2020 17:51:06 +0200
Subject: [PATCH 1/5] Changed messages to use area name

---
 __tests__/rules/required.test.tsx | 25 +++++++++++++++++++------
 src/Rule.ts                       |  4 ++--
 src/ValidatorArea.tsx             |  2 +-
 src/rules/required.ts             |  5 +++--
 src/utils/utils.ts                |  6 ++++++
 5 files changed, 31 insertions(+), 11 deletions(-)
 create mode 100644 src/utils/utils.ts

diff --git a/__tests__/rules/required.test.tsx b/__tests__/rules/required.test.tsx
index 77ee69d..25de488 100644
--- a/__tests__/rules/required.test.tsx
+++ b/__tests__/rules/required.test.tsx
@@ -5,7 +5,7 @@ import { ValidatorAreaProps } from '../../src/ValidatorArea';
 import required from '../../src/rules/required';
 
 describe('test required rule', () => {
-    it('should validate input', () => {
+    it('should falsely validate input', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea rules={[required]}>
                 <input name="test" />
@@ -14,10 +14,10 @@ describe('test required rule', () => {
 
         area.find('input').simulate('blur');
         expect(area.state().errors.length).toBe(1);
-        expect(area.state().errors[0]).toBe('This field is required');
+        expect(area.state().errors[0]).toBe('Test is required');
     });
 
-    it('should validate textarea', () => {
+    it('should falsely validate textarea', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea rules={[required]}>
                 <textarea name="test" />
@@ -26,10 +26,10 @@ describe('test required rule', () => {
 
         area.find('textarea').simulate('blur');
         expect(area.state().errors.length).toBe(1);
-        expect(area.state().errors[0]).toBe('This field is required');
+        expect(area.state().errors[0]).toBe('Test is required');
     });
 
-    it('should validate select', () => {
+    it('should falsely validate select', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea rules={[required]}>
                 <select name="test">
@@ -40,6 +40,19 @@ describe('test required rule', () => {
 
         area.find('select').simulate('blur');
         expect(area.state().errors.length).toBe(1);
-        expect(area.state().errors[0]).toBe('This field is required');
+        expect(area.state().errors[0]).toBe('Test is required');
+    });
+
+    it('should validate select', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[required]}>
+                <select name="test">
+                    <option value="foo">Choose...</option>
+                </select>
+            </ValidatorArea>
+        );
+
+        area.find('select').simulate('blur');
+        expect(area.state().errors.length).toBe(0);
     });
 });
diff --git a/src/Rule.ts b/src/Rule.ts
index c239fe5..1a9bf36 100644
--- a/src/Rule.ts
+++ b/src/Rule.ts
@@ -1,6 +1,6 @@
 import { ValidationElement } from './ValidationElement';
 
 export type Rule = {
-    passed(element: ValidationElement[]): boolean;
-    message(element: ValidationElement[]): string;
+    passed(elements: ValidationElement[]): boolean;
+    message(name: string): string;
 }
diff --git a/src/ValidatorArea.tsx b/src/ValidatorArea.tsx
index 0ae2108..be6b111 100644
--- a/src/ValidatorArea.tsx
+++ b/src/ValidatorArea.tsx
@@ -59,7 +59,7 @@ class ValidatorArea extends React.Component<ValidatorAreaProps, ValidatorAreaSta
                     }
 
                     if (typeof rule !== 'string' && !rule.passed(refs)) {
-                        messages.push(rule.message(refs));
+                        messages.push(rule.message(this.getName()));
                         this.dirty = true;
                     }
                 }
diff --git a/src/rules/required.ts b/src/rules/required.ts
index cb34e8d..533216c 100644
--- a/src/rules/required.ts
+++ b/src/rules/required.ts
@@ -1,4 +1,5 @@
 import { ValidationElement } from '../ValidationElement';
+import { capitalize } from '../utils/utils';
 
 export default {
     passed(elements: ValidationElement[]): boolean {
@@ -19,7 +20,7 @@ export default {
         return passed;
     },
 
-    message(): string {
-        return 'This field is required';
+    message(name: string): string {
+        return `${capitalize(name)} is required`;
     }
 };
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
new file mode 100644
index 0000000..18617ec
--- /dev/null
+++ b/src/utils/utils.ts
@@ -0,0 +1,6 @@
+/**
+ * Return the given string with an uppercase first letter
+ */
+export const capitalize = (value: string): string => {
+    return value.substr(0, 1).toUpperCase() + value.substr(1, value.length - 1);
+}

From d3c9fe9a03633048fdb4f4734e624c98c365a7eb Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sun, 23 Aug 2020 17:51:31 +0200
Subject: [PATCH 2/5] Fixed area test messages

---
 __tests__/Area.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/__tests__/Area.test.tsx b/__tests__/Area.test.tsx
index 085891c..0be1ce2 100644
--- a/__tests__/Area.test.tsx
+++ b/__tests__/Area.test.tsx
@@ -70,7 +70,7 @@ describe('test Provider', () => {
         );
 
         area.find('input').at(0).simulate('blur');
-        expect(area.state().errors[0]).toBe('This field is required');
+        expect(area.state().errors[0]).toBe('Test is required');
     });
 
     it('should render error when area dirty', async () => {
@@ -86,7 +86,7 @@ describe('test Provider', () => {
         );
 
         area.find('input').simulate('blur');
-        expect(area.find('div').text()).toBe('This field is required');
+        expect(area.find('div').text()).toBe('Test is required');
     })
 
     it('should validate element with rule string', () => {

From c9ff725cc1861aae795452b1a7fa441c4f2d8a35 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sun, 23 Aug 2020 17:52:10 +0200
Subject: [PATCH 3/5] Added min rule

---
 __tests__/rules/min.test.tsx | 58 ++++++++++++++++++++++++++++++++++++
 src/rules/min.ts             | 28 +++++++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 __tests__/rules/min.test.tsx
 create mode 100644 src/rules/min.ts

diff --git a/__tests__/rules/min.test.tsx b/__tests__/rules/min.test.tsx
new file mode 100644
index 0000000..3cbc391
--- /dev/null
+++ b/__tests__/rules/min.test.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { ValidatorArea } from '../../src';
+import { ValidatorAreaProps } from '../../src/ValidatorArea';
+import min from '../../src/rules/min';
+
+describe('test min rule', () => {
+    it('should falsely validate input', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[min(5)]}>
+                <input name="test" />
+            </ValidatorArea>
+        );
+
+        area.find('input').simulate('blur');
+        expect(area.state().errors.length).toBe(1);
+        expect(area.state().errors[0]).toBe('Test should be at least 5');
+    });
+
+    it('should falsely validate textarea', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[min(5)]}>
+                <textarea name="test" />
+            </ValidatorArea>
+        );
+
+        area.find('textarea').simulate('blur');
+        expect(area.state().errors.length).toBe(1);
+        expect(area.state().errors[0]).toBe('Test should be at least 5');
+    });
+
+    it('should falsely validate select', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[min(5)]}>
+                <select name="test">
+                    <option value="">Choose...</option>
+                </select>
+            </ValidatorArea>
+        );
+
+        area.find('select').simulate('blur');
+        expect(area.state().errors.length).toBe(1);
+        expect(area.state().errors[0]).toBe('Test should be at least 5');
+    });
+
+    it('should truly validate select', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[min(5)]}>
+                <select name="test">
+                    <option value={5}>Choose...</option>
+                </select>
+            </ValidatorArea>
+        );
+
+        area.find('select').simulate('blur');
+        expect(area.state().errors.length).toBe(0);
+    });
+});
diff --git a/src/rules/min.ts b/src/rules/min.ts
new file mode 100644
index 0000000..9bebdb9
--- /dev/null
+++ b/src/rules/min.ts
@@ -0,0 +1,28 @@
+import { Rule } from '../Rule';
+import { ValidationElement } from '../ValidationElement';
+import { capitalize } from '../utils/utils';
+
+export default (minNumber: number): Rule => {
+    return {
+        passed(elements: ValidationElement[]): boolean {
+            let passed = true;
+
+            elements.forEach((element) => {
+                if (element instanceof HTMLInputElement
+                    || element instanceof HTMLTextAreaElement
+                ) {
+                    passed = parseFloat(element.value.trim()) >= minNumber;
+                }
+
+                if (element instanceof HTMLSelectElement) {
+                    passed = parseFloat(element.options[element.selectedIndex].value) >= minNumber;
+                }
+            });
+
+            return passed;
+        },
+        message(name: string): string {
+            return `${capitalize(name)} should be at least ${minNumber}`
+        }
+    }
+}

From 58f131ea053d433f62498ff0e83839a20036e0f5 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sun, 23 Aug 2020 17:57:23 +0200
Subject: [PATCH 4/5] Changed min value argument name

---
 src/rules/min.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/rules/min.ts b/src/rules/min.ts
index 9bebdb9..7d0d2c3 100644
--- a/src/rules/min.ts
+++ b/src/rules/min.ts
@@ -2,7 +2,7 @@ import { Rule } from '../Rule';
 import { ValidationElement } from '../ValidationElement';
 import { capitalize } from '../utils/utils';
 
-export default (minNumber: number): Rule => {
+export default (value: number): Rule => {
     return {
         passed(elements: ValidationElement[]): boolean {
             let passed = true;
@@ -11,18 +11,18 @@ export default (minNumber: number): Rule => {
                 if (element instanceof HTMLInputElement
                     || element instanceof HTMLTextAreaElement
                 ) {
-                    passed = parseFloat(element.value.trim()) >= minNumber;
+                    passed = parseFloat(element.value.trim()) >= value;
                 }
 
                 if (element instanceof HTMLSelectElement) {
-                    passed = parseFloat(element.options[element.selectedIndex].value) >= minNumber;
+                    passed = parseFloat(element.options[element.selectedIndex].value) >= value;
                 }
             });
 
             return passed;
         },
         message(name: string): string {
-            return `${capitalize(name)} should be at least ${minNumber}`
+            return `${capitalize(name)} should be at least ${value}`
         }
     }
 }

From e8648c30597f35f2b0baed3ab5c4d145609f99a0 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Sun, 23 Aug 2020 17:58:46 +0200
Subject: [PATCH 5/5] Added max rule

---
 __tests__/rules/max.test.tsx | 58 ++++++++++++++++++++++++++++++++++++
 src/rules/max.ts             | 28 +++++++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 __tests__/rules/max.test.tsx
 create mode 100644 src/rules/max.ts

diff --git a/__tests__/rules/max.test.tsx b/__tests__/rules/max.test.tsx
new file mode 100644
index 0000000..adf04fb
--- /dev/null
+++ b/__tests__/rules/max.test.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { ValidatorArea } from '../../src';
+import { ValidatorAreaProps } from '../../src/ValidatorArea';
+import max from '../../src/rules/max';
+
+describe('test max rule', () => {
+    it('should falsely validate input', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[max(5)]}>
+                <input name="test" value="6" />
+            </ValidatorArea>
+        );
+
+        area.find('input').simulate('blur');
+        expect(area.state().errors.length).toBe(1);
+        expect(area.state().errors[0]).toBe('Test should be not greater than 5');
+    });
+
+    it('should falsely validate textarea', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[max(5)]}>
+                <textarea name="test" value="6" />
+            </ValidatorArea>
+        );
+
+        area.find('textarea').simulate('blur');
+        expect(area.state().errors.length).toBe(1);
+        expect(area.state().errors[0]).toBe('Test should be not greater than 5');
+    });
+
+    it('should falsely validate select', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[max(5)]}>
+                <select name="test">
+                    <option value="">Choose...</option>
+                </select>
+            </ValidatorArea>
+        );
+
+        area.find('select').simulate('blur');
+        expect(area.state().errors.length).toBe(1);
+        expect(area.state().errors[0]).toBe('Test should be not greater than 5');
+    });
+
+    it('should truly validate select', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[max(5)]}>
+                <select name="test">
+                    <option value={5}>Choose...</option>
+                </select>
+            </ValidatorArea>
+        );
+
+        area.find('select').simulate('blur');
+        expect(area.state().errors.length).toBe(0);
+    });
+});
diff --git a/src/rules/max.ts b/src/rules/max.ts
new file mode 100644
index 0000000..f69a467
--- /dev/null
+++ b/src/rules/max.ts
@@ -0,0 +1,28 @@
+import { Rule } from '../Rule';
+import { ValidationElement } from '../ValidationElement';
+import { capitalize } from '../utils/utils';
+
+export default (value: number): Rule => {
+    return {
+        passed(elements: ValidationElement[]): boolean {
+            let passed = true;
+
+            elements.forEach((element) => {
+                if (element instanceof HTMLInputElement
+                    || element instanceof HTMLTextAreaElement
+                ) {
+                    passed = parseFloat(element.value.trim()) <= value;
+                }
+
+                if (element instanceof HTMLSelectElement) {
+                    passed = parseFloat(element.options[element.selectedIndex].value) <= value;
+                }
+            });
+
+            return passed;
+        },
+        message(name: string): string {
+            return `${capitalize(name)} should be not greater than ${value}`
+        }
+    }
+}