From 1158523fdced669051eecab660f219f661470778 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Mon, 28 Sep 2020 23:03:38 +0200
Subject: [PATCH 1/3] WIP validation all elements

---
 __tests__/Area.test.tsx                 | 46 ++++++++++++++
 __tests__/rules/max.test.tsx            | 77 ++++++++++++-----------
 __tests__/rules/min.test.tsx            | 82 +++++++++++++------------
 __tests__/rules/required.test.tsx       | 53 ++++++----------
 __tests__/utils/dom.test.ts             | 37 +++++++++++
 src/Rule.ts                             |  3 +-
 src/Validator.ts                        | 11 ++--
 src/ValidatorContext.ts                 |  3 +-
 src/components/ValidatorArea.tsx        | 26 +++++---
 src/components/ValidatorProvider.tsx    | 17 ++---
 src/rules/IncorrectArgumentTypeError.ts |  1 +
 src/rules/max.ts                        | 34 ++++++----
 src/rules/min.ts                        | 34 ++++++----
 src/rules/required.ts                   | 22 +++----
 src/utils/dom.ts                        | 50 +++++++++++++++
 src/utils/utils.ts                      | 14 ++++-
 16 files changed, 329 insertions(+), 181 deletions(-)
 create mode 100644 __tests__/utils/dom.test.ts
 create mode 100644 src/rules/IncorrectArgumentTypeError.ts
 create mode 100644 src/utils/dom.ts

diff --git a/__tests__/Area.test.tsx b/__tests__/Area.test.tsx
index 814840a..e37ee7b 100644
--- a/__tests__/Area.test.tsx
+++ b/__tests__/Area.test.tsx
@@ -91,6 +91,17 @@ describe('test ValidatorProvider', () => {
         expect(area.state().errors[0]).toBe('Not passed');
     });
 
+    it('should not apply rules on blur when non-blurrable element', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules="passes_not" name="test">
+                <canvas />
+            </ValidatorArea>
+        );
+
+        area.find('canvas').at(0).simulate('blur');
+        expect(area.state().errors.length).toBe(0);
+    });
+
     it('should render error when area dirty', async () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea rules="passes_not">
@@ -239,4 +250,39 @@ describe('test ValidatorProvider', () => {
         area.find('input').simulate('blur');
         expect(mockFn).toBeCalled();
     });
+
+    it('should get refs by type', async () => {
+        Validator.extend('test_types', (validator: Validator) => ({
+            passed(): boolean {
+                return validator.refs(undefined, HTMLInputElement).length === 1
+                    && validator.refs('test1', HTMLTextAreaElement).length === 1
+                    && validator.refs('test1').length === 1
+                    && validator.refs('test1', HTMLProgressElement).length === 0;
+            },
+            message(): string {
+                return 'test';
+            }
+        }))
+        const mockFn = jest.fn();
+
+        const provider = mount<ValidatorProvider, ValidatorProviderProps>(
+            <ValidatorProvider rules="test_types">
+                {({ validate }: ProviderScope) => (
+                    <>
+                        <ValidatorArea name="test1">
+                            <textarea value="" />
+                        </ValidatorArea>
+                        <ValidatorArea>
+                            <input value="" name="test2" />
+                        </ValidatorArea>
+                        <button onClick={() => validate(mockFn)} />
+                    </>
+                )}
+            </ValidatorProvider>
+        );
+
+        provider.find('button').simulate('click');
+        await tick();
+        expect(mockFn).toHaveBeenCalled();
+    });
 })
diff --git a/__tests__/rules/max.test.tsx b/__tests__/rules/max.test.tsx
index 010db95..3688cb8 100644
--- a/__tests__/rules/max.test.tsx
+++ b/__tests__/rules/max.test.tsx
@@ -9,54 +9,53 @@ describe('test max rule', () => {
         Validator.extend('max', max);
     });
 
-    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 always validate inputs and not validate non-inputs', () => {
+        const input = document.createElement('input');
+        input.value = '5';
+
+        const throwsArgumentError = () => {
+            const validator = new Validator([
+                input
+            ], ['max:foo'],
+            'validate_throws'
+            );
+            validator.validate();
+        }
+
+        const validator_input = new Validator([
+            input
+        ],
+        ['max:4'],
+        'validator_input');
+
+        const progress = document.createElement('progress');
+        progress.value = 5;
+
+        const validator_progress = new Validator([
+            progress
+        ],
+        ['max:4'],
+        'validate_progress');
+
+        expect(() => throwsArgumentError()).toThrowError('max rule has incorrect argument foo. Expected a number.')
+
+        validator_input.validate();
+        expect(validator_input.getErrors().length).toBe(1);
+
+        validator_progress.validate();
+        expect(validator_progress.getErrors().length).toBe(0);
     });
 
-    it('should falsely validate textarea', () => {
+    it('should validate select', () => {
         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">
+            <ValidatorArea rules="max:3">
                 <select name="test">
-                    <option value="">Choose...</option>
+                    <option value="4" selected>Option</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/__tests__/rules/min.test.tsx b/__tests__/rules/min.test.tsx
index a7532f2..b4c06c8 100644
--- a/__tests__/rules/min.test.tsx
+++ b/__tests__/rules/min.test.tsx
@@ -1,59 +1,61 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { ValidatorArea, ValidatorAreaProps } from '@/components/ValidatorArea';
 import min from '@/rules/min';
 import { Validator } from '@/Validator';
+import { mount } from 'enzyme';
+import { ValidatorArea, ValidatorAreaProps } from '@/components/ValidatorArea';
+import React from 'react';
 
 describe('test min rule', () => {
-    Validator.extend('min', min);
-    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');
+    beforeEach(() => {
+        Validator.extend('min', min);
     });
 
-    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 always validate inputs and not validate non-inputs', () => {
+        const input = document.createElement('input');
+        input.value = '5';
+
+        const throwsArgumentError = () => {
+            const validator = new Validator([
+                input
+            ], ['min:foo'],
+            'validate_throws'
+            );
+            validator.validate();
+        }
+
+        const validator_input = new Validator([
+            input
+        ],
+        ['min:6'],
+        'validator_input');
+
+        const progress = document.createElement('progress');
+        progress.value = 5;
+
+        const validator_progress = new Validator([
+            progress
+        ],
+        ['min:4'],
+        'validate_progress');
+
+        expect(() => throwsArgumentError()).toThrowError('min rule has incorrect argument foo. Expected a number.')
+
+        validator_input.validate();
+        expect(validator_input.getErrors().length).toBe(1);
+
+        validator_progress.validate();
+        expect(validator_progress.getErrors().length).toBe(0);
     });
 
-    it('should falsely validate select', () => {
+    it('should validate select', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea rules="min:5">
                 <select name="test">
-                    <option value="">Choose...</option>
+                    <option value="4" selected>Option</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/__tests__/rules/required.test.tsx b/__tests__/rules/required.test.tsx
index 0acdee6..4afd641 100644
--- a/__tests__/rules/required.test.tsx
+++ b/__tests__/rules/required.test.tsx
@@ -9,31 +9,7 @@ describe('test required rule', () => {
         Validator.extend('required', required);
     });
 
-    it('should falsely validate input', () => {
-        const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules="required">
-                <input name="test" />
-            </ValidatorArea>
-        );
-
-        area.find('input').simulate('blur');
-        expect(area.state().errors.length).toBe(1);
-        expect(area.state().errors[0]).toBe('Test is required');
-    });
-
-    it('should falsely validate textarea', () => {
-        const area = mount<ValidatorArea, ValidatorAreaProps>(
-            <ValidatorArea rules="required">
-                <textarea name="test" />
-            </ValidatorArea>
-        );
-
-        area.find('textarea').simulate('blur');
-        expect(area.state().errors.length).toBe(1);
-        expect(area.state().errors[0]).toBe('Test is required');
-    });
-
-    it('should falsely validate select', () => {
+    it('should falsely validate select with options', () => {
         const area = mount<ValidatorArea, ValidatorAreaProps>(
             <ValidatorArea rules="required">
                 <select name="test">
@@ -47,16 +23,23 @@ describe('test required rule', () => {
         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>
-        );
+    it('should always validate inputs and not validate non-inputs', () => {
+        const validator_input = new Validator([
+            document.createElement('input')
+        ],
+        ['required'],
+        'validator_input');
 
-        area.find('select').simulate('blur');
-        expect(area.state().errors.length).toBe(0);
+        const validator_progress = new Validator([
+            document.createElement('progress')
+        ],
+        ['required'],
+        'validate_progress');
+
+        validator_input.validate();
+        expect(validator_input.getErrors().length).toBe(1);
+
+        validator_progress.validate();
+        expect(validator_progress.getErrors().length).toBe(0);
     });
 });
diff --git a/__tests__/utils/dom.test.ts b/__tests__/utils/dom.test.ts
new file mode 100644
index 0000000..c1c0ce4
--- /dev/null
+++ b/__tests__/utils/dom.test.ts
@@ -0,0 +1,37 @@
+import { getValue, htmlCollectionToArray } from '@/utils/dom';
+
+describe('dom helpers test', () => {
+    it('should convert HtmlCollection to array', () => {
+        const select = document.createElement('select');
+        const option1 = document.createElement('option');
+        const option2 = document.createElement('option');
+        select.appendChild(option1);
+        select.appendChild(option2);
+
+        const optionArray = htmlCollectionToArray(select.children);
+        expect(Array.isArray(optionArray)).toBeTruthy();
+    })
+
+    it('should get value of elements or null', () => {
+        const select = document.createElement('select');
+        select.multiple = true;
+        const option1 = document.createElement('option');
+        option1.value = 'foo';
+        option1.selected = true;
+        const option2 = document.createElement('option');
+        option2.value = 'bar';
+        option2.selected = true;
+        select.appendChild(option1);
+        select.appendChild(option2);
+
+        const input = document.createElement('input');
+        input.value = 'baz';
+
+        const div = document.createElement('div');
+
+        expect(getValue(select)).toEqual(expect.arrayContaining(['foo', 'bar']));
+        expect(getValue(input)).toBe('baz');
+        expect(getValue(div)).toBeNull();
+
+    })
+});
diff --git a/src/Rule.ts b/src/Rule.ts
index 5bb6d0a..079fc43 100644
--- a/src/Rule.ts
+++ b/src/Rule.ts
@@ -1,5 +1,4 @@
 import { Validator } from '@/Validator';
-import { ValidationElement } from '@/ValidationElement';
 
 /**
  * Function to access validator using the rule
@@ -13,7 +12,7 @@ export type RuleObject = {
     /**
      * Returns whether the rule passed with the given element(s)
      */
-    passed(elements: ValidationElement[], ...args: string[]): boolean;
+    passed(elements: HTMLElement[], ...args: string[]): boolean;
     /**
      * Message shown when the rule doesn't pass
      */
diff --git a/src/Validator.ts b/src/Validator.ts
index e6f1a17..0e82775 100644
--- a/src/Validator.ts
+++ b/src/Validator.ts
@@ -5,12 +5,13 @@ import {
     IntlShape
 } from '@formatjs/intl'
 import { Rule, RuleFunction, RuleObject } from '@/Rule';
-import { ValidationElement } from '@/ValidationElement';
 import { RuleOptions } from '@/RuleOptions';
 import { capitalize } from '@/utils/utils';
 import { ValidatorArea } from '@/components/ValidatorArea';
 
 export class Validator {
+    public static VALIDATABLE_ELEMENTS: string[] = [
+        'a', 'audio', 'button', 'canvas', 'input', 'meter', 'select', 'textarea', 'output', 'progress']
     /**
      * Map containing the rule object belonging to a rule string
      */
@@ -19,7 +20,7 @@ export class Validator {
     /**
      * The elements to be validated
      */
-    private readonly elements: ValidationElement[];
+    private readonly elements: HTMLElement[];
 
     /**
      * The rules to validate the elements with
@@ -52,7 +53,7 @@ export class Validator {
     private area?: ValidatorArea;
 
     public constructor(
-        elements: ValidationElement[],
+        elements: HTMLElement[],
         rules: RuleOptions,
         name: string | null,
     ) {
@@ -164,8 +165,8 @@ export class Validator {
     /**
      * Gets a list of validation element refs, optionally specified by area name
      */
-    public refs(name?: string): ValidationElement[] {
-        return this.getArea().context.getRefs(name);
+    public refs(name?: string, type?: typeof HTMLElement): HTMLElement[] {
+        return this.getArea().context.getRefs(name, type);
     }
 
     /**
diff --git a/src/ValidatorContext.ts b/src/ValidatorContext.ts
index b945968..993b702 100644
--- a/src/ValidatorContext.ts
+++ b/src/ValidatorContext.ts
@@ -1,12 +1,11 @@
 import React from 'react';
 import { RuleOptions } from '@/RuleOptions';
 import { ValidatorArea } from '@/components/ValidatorArea';
-import { ValidationElement } from '@/ValidationElement';
 
 export interface ValidatorContextProps {
     rules: RuleOptions;
     addArea: (name: string, ref: ValidatorArea) => void;
-    getRefs: (name?: string) => ValidationElement[];
+    getRefs: (name?: string, type?: typeof HTMLElement) => HTMLElement[];
 }
 
 export const ValidatorContext = React.createContext<ValidatorContextProps>({
diff --git a/src/components/ValidatorArea.tsx b/src/components/ValidatorArea.tsx
index 1513b32..5e9aa1a 100644
--- a/src/components/ValidatorArea.tsx
+++ b/src/components/ValidatorArea.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import { RuleOptions } from '@/RuleOptions';
 import { AreaScope } from '@/AreaScope';
-import { ValidationElement } from '@/ValidationElement';
 import { ValidatorContext } from '@/ValidatorContext';
 import { Validator } from '@/Validator';
 
@@ -22,7 +21,7 @@ interface ValidatorAreaState {
 
 interface ValidatorAreaComponentsProps {
     onBlur: () => void;
-    ref: React.RefObject<ValidationElement>;
+    ref: React.RefObject<HTMLElement>;
 }
 
 export class ValidatorArea extends React.Component<ValidatorAreaProps, ValidatorAreaState> {
@@ -39,7 +38,7 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
     /**
      * References to elements within the area to be validated
      */
-    private inputRefs: ValidationElement[] = [];
+    private inputRefs: HTMLElement[] = [];
 
     /**
      * Indicates whether the area is dirty
@@ -72,7 +71,7 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
     /**
      * Validate the area, or a given element when provided
      */
-    public validate(ref?: ValidationElement): Promise<boolean> {
+    public validate(ref?: HTMLElement): Promise<boolean> {
         return new Promise<boolean>((resolve) => {
             this.dirty = false;
             this.setState(() => ({
@@ -122,7 +121,7 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
     /**
      * Returns the input references within the area
      */
-    public getInputRefs(): ValidationElement[] {
+    public getInputRefs(): HTMLElement[] {
         return this.inputRefs;
     }
 
@@ -145,18 +144,20 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
                     }
 
                     if (this.isValidatableNode(child)) {
-                        let ref: ValidationElement;
+                        let ref: HTMLElement;
 
                         return React.cloneElement<ValidatorAreaComponentsProps>(child, {
                             ...child.props,
-                            onBlur: () => {
+                            onBlur: (): void => {
                                 if (child.props.onBlur) {
                                     child.props.onBlur();
                                 }
 
-                                this.validate(ref);
+                                if (this.elementCanBlur(child)) {
+                                    this.validate(ref);
+                                }
                             },
-                            ref: (node: ValidationElement) => {
+                            ref: (node: HTMLElement) => {
                                 if (node && !this.inputRefs.includes(node)) {
                                     ref = node;
                                     this.inputRefs.push(ref);
@@ -171,11 +172,16 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
         );
     }
 
+    private elementCanBlur(node: React.ReactElement): boolean {
+        return node.type === 'input' || node.type === 'textarea' || node.type === 'select';
+    }
+
     /**
      * Indicates whether the node is validatable
      */
     private isValidatableNode(node: React.ReactElement): boolean {
-        return node.type === 'input' || node.type === 'textarea' || node.type === 'select';
+        return typeof node.type === 'string'
+            && Validator.VALIDATABLE_ELEMENTS.indexOf(node.type) !== -1;
     }
 
     /**
diff --git a/src/components/ValidatorProvider.tsx b/src/components/ValidatorProvider.tsx
index 43b4334..cbd9110 100644
--- a/src/components/ValidatorProvider.tsx
+++ b/src/components/ValidatorProvider.tsx
@@ -4,7 +4,6 @@ import { RuleOptions } from '@/RuleOptions';
 import { ProviderScope } from '@/ProviderScope';
 import { ValidatorContext } from '@/ValidatorContext';
 import { ValidatorArea } from '@/components/ValidatorArea';
-import { ValidationElement } from '@/ValidationElement';
 
 export interface ValidatorProviderProps {
     rules?: RuleOptions;
@@ -67,17 +66,21 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
     /**
      * Gets a list of validation element refs, optionally specified by area name
      */
-    private getRefs(name?: string): ValidationElement[] {
-        const refs: ValidationElement[] = [];
+    private getRefs(name?: string, type?: typeof HTMLElement): HTMLElement[] {
+        const refs: HTMLElement[] = [];
 
         if (name && Object.prototype.hasOwnProperty.call(this.state.areas, name)) {
-            this.state.areas[name].getInputRefs().forEach((ref: ValidationElement) => {
-                refs.push(ref);
+            this.state.areas[name].getInputRefs().forEach((ref: HTMLElement) => {
+                if (!type || (type && ref instanceof type)) {
+                    refs.push(ref);
+                }
             })
         } else if (name === undefined) {
             Object.values(this.state.areas).forEach((area: ValidatorArea) => {
                 area.getInputRefs().forEach((ref) => {
-                    refs.push(ref);
+                    if (!type || (type && ref instanceof type)) {
+                        refs.push(ref);
+                    }
                 });
             });
         }
@@ -108,7 +111,7 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
                 value={{
                     rules: rules || [],
                     addArea: (name: string, ref: ValidatorArea): void => this.addArea(name, ref),
-                    getRefs: (name?: string) => this.getRefs(name)
+                    getRefs: (name?: string, type?: typeof HTMLElement) => this.getRefs(name, type)
                 }}
             >
                 {children}
diff --git a/src/rules/IncorrectArgumentTypeError.ts b/src/rules/IncorrectArgumentTypeError.ts
new file mode 100644
index 0000000..3a1338b
--- /dev/null
+++ b/src/rules/IncorrectArgumentTypeError.ts
@@ -0,0 +1 @@
+export class IncorrectArgumentTypeError extends Error {}
diff --git a/src/rules/max.ts b/src/rules/max.ts
index d3d6371..a537ce3 100644
--- a/src/rules/max.ts
+++ b/src/rules/max.ts
@@ -1,22 +1,30 @@
-import { ValidationElement } from '../ValidationElement';
+import { isNumeric } from '@/utils/utils';
+import { IncorrectArgumentTypeError } from '@/rules/IncorrectArgumentTypeError';
+import { getValue, isInputElement, isSelectElement } from '@/utils/dom';
 
 export default {
-    passed(elements: ValidationElement[], value: string): boolean {
-        let passed = true;
+    passed(elements: HTMLElement[], max: string): boolean {
+        if (!isNumeric(max)) {
+            throw new IncorrectArgumentTypeError(`max rule has incorrect argument ${max}. Expected a number.`);
+        }
 
-        elements.forEach((element) => {
-            if (element instanceof HTMLInputElement
-                || element instanceof HTMLTextAreaElement
-            ) {
-                passed = parseFloat(element.value.trim()) <= parseInt(value, 10);
-            }
+        return elements.every((element: HTMLElement) => {
+            if (isInputElement(element) || isSelectElement(element)) {
+                const value = getValue(element);
 
-            if (element instanceof HTMLSelectElement) {
-                passed = parseFloat(element.options[element.selectedIndex].value) <= parseInt(value, 10);
+                if (Array.isArray(value)) {
+                    return value.every((val: string) => {
+                        return isNumeric(val) && parseFloat(val) <= parseFloat(max);
+                    });
+                } else {
+                    return value
+                        && isNumeric(value)
+                        && parseFloat(value) <= parseFloat(max);
+                }
             }
-        });
 
-        return passed;
+            return true;
+        })
     },
     message(): string {
         return `{name} should be not greater than {0}`
diff --git a/src/rules/min.ts b/src/rules/min.ts
index 30e864d..46c7a15 100644
--- a/src/rules/min.ts
+++ b/src/rules/min.ts
@@ -1,22 +1,30 @@
-import { ValidationElement } from '../ValidationElement';
+import { getValue, isInputElement, isSelectElement } from '@/utils/dom';
+import { isNumeric } from '@/utils/utils';
+import { IncorrectArgumentTypeError } from '@/rules/IncorrectArgumentTypeError';
 
 export default {
-    passed(elements: ValidationElement[], ...values: string[]): boolean {
-        let passed = true;
+    passed(elements: HTMLElement[], min: string): boolean {
+        if (!isNumeric(min)) {
+            throw new IncorrectArgumentTypeError(`min rule has incorrect argument ${min}. Expected a number.`);
+        }
 
-        elements.forEach((element) => {
-            if (element instanceof HTMLInputElement
-                || element instanceof HTMLTextAreaElement
-            ) {
-                passed = parseFloat(element.value.trim()) >= parseInt(values[0]);
-            }
+        return elements.every((element: HTMLElement) => {
+            if (isInputElement(element) || isSelectElement(element)) {
+                const value = getValue(element);
 
-            if (element instanceof HTMLSelectElement) {
-                passed = parseFloat(element.options[element.selectedIndex].value) >= parseInt(values[0]);
+                if (Array.isArray(value)) {
+                    return value.every((val: string) => {
+                        return isNumeric(val) && parseFloat(val) >= parseFloat(min);
+                    });
+                } else {
+                    return value
+                        && isNumeric(value)
+                        && parseFloat(value) >= parseFloat(min);
+                }
             }
-        });
 
-        return passed;
+            return true;
+        })
     },
     message(): string {
         return `{name} should be at least {0}`
diff --git a/src/rules/required.ts b/src/rules/required.ts
index 719d4cf..0b05b08 100644
--- a/src/rules/required.ts
+++ b/src/rules/required.ts
@@ -1,22 +1,16 @@
-import { ValidationElement } from '../ValidationElement';
+import { getValue, isInputElement, isSelectElement } from '@/utils/dom';
 
 export default {
-    passed(elements: ValidationElement[]): boolean {
-        let passed = true;
+    passed(elements: HTMLElement[]): boolean {
+        return elements.every((element: HTMLElement) => {
+            if (isInputElement(element) || isSelectElement(element)) {
+                const value = getValue(element);
 
-        elements.forEach((element) => {
-            if (element instanceof HTMLInputElement
-                || element instanceof HTMLTextAreaElement
-            ) {
-                passed = !!element.value.trim().length;
+                return value && value.length;
             }
 
-            if (element instanceof HTMLSelectElement) {
-                passed = !!element.options[element.selectedIndex].value.length;
-            }
-        });
-
-        return passed;
+            return true;
+        })
     },
 
     message(): string {
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
new file mode 100644
index 0000000..bbb42d7
--- /dev/null
+++ b/src/utils/dom.ts
@@ -0,0 +1,50 @@
+/**
+ * Returns whether element is an input element
+ */
+const isInputElement = (element: HTMLElement): element is HTMLInputElement => {
+    return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement;
+}
+
+/**
+ * Returns whether element is an select element
+ */
+const isSelectElement = (element: HTMLElement): element is HTMLSelectElement => {
+    return element instanceof HTMLSelectElement
+}
+
+/**
+ * Returns an flexible array representation of an html element collection
+ */
+const htmlCollectionToArray = <T extends Element>(collection: HTMLCollectionOf<T>): T[] => {
+    const arr: T[] = [];
+
+    for(let i = 0; i < collection.length; i++) {
+        arr.push(collection.item(i) as T);
+    }
+
+    return arr;
+}
+
+/**
+ * Returns the value of the element, when it exists
+ */
+const getValue = (element: HTMLElement): string | string[] | null => {
+    if (isInputElement(element)) {
+        return element.value;
+    }
+
+    if (isSelectElement(element)) {
+        return htmlCollectionToArray<HTMLOptionElement>(element.selectedOptions)
+            .map((option: HTMLOptionElement) => option.value)
+            .filter(Boolean);
+    }
+
+    return null;
+}
+
+export {
+    isInputElement,
+    isSelectElement,
+    htmlCollectionToArray,
+    getValue,
+};
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 18617ec..b4fdf73 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,6 +1,18 @@
 /**
  * Return the given string with an uppercase first letter
  */
-export const capitalize = (value: string): string => {
+const capitalize = (value: string): string => {
     return value.substr(0, 1).toUpperCase() + value.substr(1, value.length - 1);
 }
+
+/**
+ * Checks whether the given value is numeric
+ */
+const isNumeric = (value: string): boolean => {
+    return !isNaN(+value);
+}
+
+export {
+    capitalize,
+    isNumeric
+}

From 0c4e18deb2071338ae7da55aed904b74de97905b Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Mon, 28 Sep 2020 23:11:13 +0200
Subject: [PATCH 2/3] Fixes

---
 src/ValidationElement.ts | 4 ----
 src/Validator.ts         | 4 +++-
 2 files changed, 3 insertions(+), 5 deletions(-)
 delete mode 100644 src/ValidationElement.ts

diff --git a/src/ValidationElement.ts b/src/ValidationElement.ts
deleted file mode 100644
index b8c1d7e..0000000
--- a/src/ValidationElement.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/**
- * The type of elements that can be validated
- */
-export type ValidationElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
diff --git a/src/Validator.ts b/src/Validator.ts
index 0e82775..2032279 100644
--- a/src/Validator.ts
+++ b/src/Validator.ts
@@ -11,7 +11,9 @@ import { ValidatorArea } from '@/components/ValidatorArea';
 
 export class Validator {
     public static VALIDATABLE_ELEMENTS: string[] = [
-        'a', 'audio', 'button', 'canvas', 'input', 'meter', 'select', 'textarea', 'output', 'progress']
+        'a', 'audio', 'button', 'canvas', 'input', 'meter', 'select', 'textarea', 'output', 'progress'
+    ];
+
     /**
      * Map containing the rule object belonging to a rule string
      */

From c7c7f9b6f3c8a785b6a596c6e1db68a82818fcc2 Mon Sep 17 00:00:00 2001
From: Eran Machiels <dev@eranmachiels.nl>
Date: Mon, 28 Sep 2020 23:12:30 +0200
Subject: [PATCH 3/3] Added missing docs

---
 src/components/ValidatorArea.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/ValidatorArea.tsx b/src/components/ValidatorArea.tsx
index 5e9aa1a..138993c 100644
--- a/src/components/ValidatorArea.tsx
+++ b/src/components/ValidatorArea.tsx
@@ -172,6 +172,9 @@ export class ValidatorArea extends React.Component<ValidatorAreaProps, Validator
         );
     }
 
+    /**
+     * Indicates whether the given node is an element that is a "blurrable" type
+     */
     private elementCanBlur(node: React.ReactElement): boolean {
         return node.type === 'input' || node.type === 'textarea' || node.type === 'select';
     }