From 2957ea03afcf94a0b317a5a1cc40eddfb31ea6db Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Mon, 21 Apr 2025 13:53:10 +0100
Subject: [PATCH 01/14] Installing playwright

---
 .../{ => jest}/integration/api/index.js       |  552 +++---
 .../api/validate/bypass-disabled.js           |   64 +-
 .../integration/api/validate/dateISO.js       |  108 +-
 .../integration/api/validate/digits.js        |  108 +-
 .../integration/api/validate/email.js         |  196 +-
 .../integration/api/validate/equalto.js       |  118 +-
 .../integration/api/validate/length.js        |  102 +-
 .../integration/api/validate/max.js           |  180 +-
 .../integration/api/validate/maxlength.js     |  180 +-
 .../integration/api/validate/min.js           |  176 +-
 .../integration/api/validate/minlength.js     |  180 +-
 .../integration/api/validate/number.js        |  125 +-
 .../integration/api/validate/range.js         |  284 +--
 .../integration/api/validate/regex-pattern.js |  178 +-
 .../integration/api/validate/remote.js        |  282 +--
 .../integration/api/validate/required.js      |  200 +-
 .../integration/api/validate/stringlength.js  |   98 +-
 .../integration/api/validate/url.js           |  194 +-
 .../{ => jest}/integration/errors/index.js    |    6 +-
 .../normalise-validators/dateISO.js           |   40 +-
 .../normalise-validators/digits.js            |   40 +-
 .../integration/normalise-validators/email.js |    2 +-
 .../normalise-validators/equalto.js           |    2 +-
 .../normalise-validators/length.js            |    2 +-
 .../integration/normalise-validators/max.js   |    2 +-
 .../normalise-validators/maxlength.js         |    2 +-
 .../integration/normalise-validators/min.js   |    2 +-
 .../normalise-validators/minlength.js         |    2 +-
 .../normalise-validators/number.js            |    2 +-
 .../integration/normalise-validators/range.js |    2 +-
 .../normalise-validators/regex-pattern.js     |    2 +-
 .../normalise-validators/remote.js            |    2 +-
 .../normalise-validators/required.js          |    2 +-
 .../normalise-validators/stringlength.js      |    2 +-
 .../integration/normalise-validators/url.js   |    2 +-
 .../{ => jest}/integration/plugins/date.js    | 1120 +++++------
 .../{ => jest}/integration/plugins/luhn.js    |  244 +--
 .../{ => jest}/integration/real-time/index.js |  274 +--
 .../{ => jest}/integration/reset/index.js     |    2 +-
 .../{ => jest}/integration/submit/index.js    |    2 +-
 .../integration/validator/custom.js           |    2 +-
 .../integration/validator/dateISO.js          |    2 +-
 .../integration/validator/digits.js           |   64 +-
 .../{ => jest}/integration/validator/email.js |  224 +--
 .../integration/validator/equalto.js          |  280 +--
 .../{ => jest}/integration/validator/index.js |    2 +-
 .../integration/validator/isHidden.js         |    2 +-
 .../integration/validator/length.js           |  104 +-
 .../{ => jest}/integration/validator/max.js   |  234 +--
 .../integration/validator/maxlength.js        |  176 +-
 .../{ => jest}/integration/validator/min.js   |  208 +--
 .../integration/validator/minlength.js        |  176 +-
 .../integration/validator/number.js           |  174 +-
 .../{ => jest}/integration/validator/range.js |  224 +--
 .../integration/validator/regex-pattern.js    |  174 +-
 .../integration/validator/remote.js           |  130 +-
 .../integration/validator/required.js         |  210 +--
 .../integration/validator/stringlength.js     |   98 +-
 .../{ => jest}/integration/validator/url.js   |  140 +-
 .../__tests__/{ => jest}/unit/dom/errors.js   |    4 +-
 .../__tests__/{ => jest}/unit/dom/index.js    |    4 +-
 .../{ => jest}/unit/initialisation.js         |    6 +-
 .../__tests__/{ => jest}/unit/reducers.js     |    4 +-
 .../__tests__/{ => jest}/unit/store.js        |    6 +-
 .../{ => jest}/unit/validator/index.js        |    5 +-
 .../{ => jest}/unit/validator/methods.js      | 1654 ++++++++---------
 .../unit/validator/post-validation.js         |    2 +-
 .../{ => jest}/unit/validator/utils.js        |    2 +-
 .../__tests__/playwright/playwright.spec.js   |   20 +
 packages/validate/example/src/index.html      |  202 +-
 packages/validate/package.json                |    6 +-
 packages/validate/playwright.config.js        |   16 +
 .../tools/playwright.webpack.config.js        |    8 +
 .../{example => tools}/webpack.config.js      |    0
 74 files changed, 4815 insertions(+), 4829 deletions(-)
 rename packages/validate/__tests__/{ => jest}/integration/api/index.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/bypass-disabled.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/dateISO.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/digits.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/email.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/equalto.js (91%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/length.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/max.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/maxlength.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/min.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/minlength.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/number.js (91%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/range.js (96%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/regex-pattern.js (94%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/remote.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/required.js (94%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/stringlength.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/api/validate/url.js (94%)
 rename packages/validate/__tests__/{ => jest}/integration/errors/index.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/dateISO.js (88%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/digits.js (88%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/email.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/equalto.js (94%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/length.js (92%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/max.js (96%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/maxlength.js (96%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/min.js (96%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/minlength.js (96%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/number.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/range.js (92%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/regex-pattern.js (96%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/remote.js (96%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/required.js (96%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/stringlength.js (91%)
 rename packages/validate/__tests__/{ => jest}/integration/normalise-validators/url.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/plugins/date.js (97%)
 rename packages/validate/__tests__/{ => jest}/integration/plugins/luhn.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/real-time/index.js (94%)
 rename packages/validate/__tests__/{ => jest}/integration/reset/index.js (98%)
 rename packages/validate/__tests__/{ => jest}/integration/submit/index.js (97%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/custom.js (97%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/dateISO.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/digits.js (91%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/email.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/equalto.js (96%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/index.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/isHidden.js (98%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/length.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/max.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/maxlength.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/min.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/minlength.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/number.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/range.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/regex-pattern.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/remote.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/required.js (95%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/stringlength.js (93%)
 rename packages/validate/__tests__/{ => jest}/integration/validator/url.js (94%)
 rename packages/validate/__tests__/{ => jest}/unit/dom/errors.js (99%)
 rename packages/validate/__tests__/{ => jest}/unit/dom/index.js (98%)
 rename packages/validate/__tests__/{ => jest}/unit/initialisation.js (98%)
 rename packages/validate/__tests__/{ => jest}/unit/reducers.js (99%)
 rename packages/validate/__tests__/{ => jest}/unit/store.js (92%)
 rename packages/validate/__tests__/{ => jest}/unit/validator/index.js (99%)
 rename packages/validate/__tests__/{ => jest}/unit/validator/methods.js (96%)
 rename packages/validate/__tests__/{ => jest}/unit/validator/post-validation.js (98%)
 rename packages/validate/__tests__/{ => jest}/unit/validator/utils.js (99%)
 create mode 100644 packages/validate/__tests__/playwright/playwright.spec.js
 create mode 100644 packages/validate/playwright.config.js
 create mode 100644 packages/validate/tools/playwright.webpack.config.js
 rename packages/validate/{example => tools}/webpack.config.js (100%)

diff --git a/packages/validate/__tests__/integration/api/index.js b/packages/validate/__tests__/jest/integration/api/index.js
similarity index 95%
rename from packages/validate/__tests__/integration/api/index.js
rename to packages/validate/__tests__/jest/integration/api/index.js
index e6ea9aad..a502d04b 100644
--- a/packages/validate/__tests__/integration/api/index.js
+++ b/packages/validate/__tests__/jest/integration/api/index.js
@@ -1,277 +1,277 @@
-import validate from '../../../src';
-import { GROUP_ATTRIBUTE, DOTNET_CLASSNAMES } from '../../../src/lib/constants';
-import defaults from '../../../src/lib/defaults';
-
-describe('Validate > Integration > API > addGroup', () => {
-
-    it('should add a validation group', async () => {
-        // expect.assertions(6);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-
-        expect(validator.getState().groups).toEqual({});
-        input.setAttribute('required', 'required');
-        validator.addGroup([input]);
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-
-    });
-
-    it('should return leave state unchanged if it cannot add the validation group', async () => {
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                type="text" />
-        </form>`;
-        const input = document.querySelector('#group1-1');
-        const [ validator ] = validate('form');
-        console.warn = jest.fn();
-
-        expect(validator.getState().groups).toEqual({});
-        validator.addGroup([input]);
-        expect(validator.getState().groups).toEqual({});
-        expect(console.warn).toHaveBeenCalled();
-    });
-
-
-});
-
-describe('Validate > Integration > API > removeGroup', () => {
-
-    it('should remove a validation group', async () => {
-        // expect.assertions(6);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                required
-                value=""
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-        input.removeAttribute('required');
-        validator.removeGroup('group1');
-        expect(validator.getState().groups).toEqual({});
-
-    });
-
-});
-
-describe('Validate > Integration > API > validateGroup', () => {
-
-    it('should validate an individual validation group when called', async () => {
-        // expect.assertions(6);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                required
-                value=""
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-        await validator.validateGroup('group1');
-
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
-
-        input.value = "test";
-        await validator.validateGroup('group1');
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`)).toBeNull();
-    });
-
-});
-
-describe('Validate > Integration > API > addMethod', () => {
-
-    it('should add a validation method to a group', async () => {
-        // expect.assertions(6);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                required
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-        const method = () => false;
-        const message = 'Custom error';
-        validator.addMethod('group1', method, message);
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }, { type: 'custom', method, message }],
-                fields: [input],
-                valid: false
-            }
-        });
-    });
-
-    it('should not add a validation method if parameters are missing', async () => {
-        // expect.assertions(6);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                required
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-        console.warn = jest.fn();
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-        const method = () => false;
-        const message = 'Custom error';
-
-        validator.addMethod(undefined, method, message);
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-        expect(console.warn).toHaveBeenCalled();
-
-    });
-
-    it('should not add a validation method if fields cannot be found', async () => {
-        // expect.assertions(6);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                data-val-${GROUP_ATTRIBUTE}="groupX"
-                value=""
-                required
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-
-        expect(validator.getState().groups).toEqual({
-            groupX: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-        const method = () => false;
-        const message = 'Custom error';
-
-        validator.addMethod('neither-name-or-group-name', method, message);
-        expect(validator.getState().groups).toEqual({
-            groupX: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-
-    });
-
-    it('Should add a validation method when provided an array of fields and a new group name', () => {
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                required
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-        const method = () => false;
-        const message = 'Custom error';
-        validator.addMethod('CustomGroup', method, message, [ input ]);
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            },
-            CustomGroup: {
-                serverErrorNode: false,
-                validators: [{ type: 'custom', method, message }],
-                fields: [input],
-                valid: false
-            }
-        });
-    });
-
+import validate from '../../../../src';
+import { GROUP_ATTRIBUTE, DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
+import defaults from '../../../../src/lib/defaults';
+
+describe('Validate > Integration > API > addGroup', () => {
+
+    it('should add a validation group', async () => {
+        // expect.assertions(6);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                type="text" />
+        </form>`;
+        // const form = document.querySelector('.form');
+        const input = document.querySelector('#group1-1');
+        const validator = validate('form')[0];
+
+        expect(validator.getState().groups).toEqual({});
+        input.setAttribute('required', 'required');
+        validator.addGroup([input]);
+        expect(validator.getState().groups).toEqual({
+            group1: {
+                serverErrorNode: false,
+                validators: [{ type: 'required' }],
+                fields: [input],
+                valid: false
+            }
+        });
+
+    });
+
+    it('should return leave state unchanged if it cannot add the validation group', async () => {
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                type="text" />
+        </form>`;
+        const input = document.querySelector('#group1-1');
+        const [ validator ] = validate('form');
+        console.warn = jest.fn();
+
+        expect(validator.getState().groups).toEqual({});
+        validator.addGroup([input]);
+        expect(validator.getState().groups).toEqual({});
+        expect(console.warn).toHaveBeenCalled();
+    });
+
+
+});
+
+describe('Validate > Integration > API > removeGroup', () => {
+
+    it('should remove a validation group', async () => {
+        // expect.assertions(6);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                required
+                value=""
+                type="text" />
+        </form>`;
+        // const form = document.querySelector('.form');
+        const input = document.querySelector('#group1-1');
+        const validator = validate('form')[0];
+
+        expect(validator.getState().groups).toEqual({
+            group1: {
+                serverErrorNode: false,
+                validators: [{ type: 'required' }],
+                fields: [input],
+                valid: false
+            }
+        });
+        input.removeAttribute('required');
+        validator.removeGroup('group1');
+        expect(validator.getState().groups).toEqual({});
+
+    });
+
+});
+
+describe('Validate > Integration > API > validateGroup', () => {
+
+    it('should validate an individual validation group when called', async () => {
+        // expect.assertions(6);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                required
+                value=""
+                type="text" />
+        </form>`;
+        // const form = document.querySelector('.form');
+        const input = document.querySelector('#group1-1');
+        const validator = validate('form')[0];
+        await validator.validateGroup('group1');
+
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
+
+        input.value = "test";
+        await validator.validateGroup('group1');
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`)).toBeNull();
+    });
+
+});
+
+describe('Validate > Integration > API > addMethod', () => {
+
+    it('should add a validation method to a group', async () => {
+        // expect.assertions(6);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                required
+                type="text" />
+        </form>`;
+        // const form = document.querySelector('.form');
+        const input = document.querySelector('#group1-1');
+        const validator = validate('form')[0];
+
+        expect(validator.getState().groups).toEqual({
+            group1: {
+                serverErrorNode: false,
+                validators: [{ type: 'required' }],
+                fields: [input],
+                valid: false
+            }
+        });
+        const method = () => false;
+        const message = 'Custom error';
+        validator.addMethod('group1', method, message);
+
+        expect(validator.getState().groups).toEqual({
+            group1: {
+                serverErrorNode: false,
+                validators: [{ type: 'required' }, { type: 'custom', method, message }],
+                fields: [input],
+                valid: false
+            }
+        });
+    });
+
+    it('should not add a validation method if parameters are missing', async () => {
+        // expect.assertions(6);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                required
+                type="text" />
+        </form>`;
+        // const form = document.querySelector('.form');
+        const input = document.querySelector('#group1-1');
+        const validator = validate('form')[0];
+        console.warn = jest.fn();
+
+        expect(validator.getState().groups).toEqual({
+            group1: {
+                serverErrorNode: false,
+                validators: [{ type: 'required' }],
+                fields: [input],
+                valid: false
+            }
+        });
+        const method = () => false;
+        const message = 'Custom error';
+
+        validator.addMethod(undefined, method, message);
+        expect(validator.getState().groups).toEqual({
+            group1: {
+                serverErrorNode: false,
+                validators: [{ type: 'required' }],
+                fields: [input],
+                valid: false
+            }
+        });
+        expect(console.warn).toHaveBeenCalled();
+
+    });
+
+    it('should not add a validation method if fields cannot be found', async () => {
+        // expect.assertions(6);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                data-val-${GROUP_ATTRIBUTE}="groupX"
+                value=""
+                required
+                type="text" />
+        </form>`;
+        // const form = document.querySelector('.form');
+        const input = document.querySelector('#group1-1');
+        const validator = validate('form')[0];
+
+        expect(validator.getState().groups).toEqual({
+            groupX: {
+                serverErrorNode: false,
+                validators: [{ type: 'required' }],
+                fields: [input],
+                valid: false
+            }
+        });
+        const method = () => false;
+        const message = 'Custom error';
+
+        validator.addMethod('neither-name-or-group-name', method, message);
+        expect(validator.getState().groups).toEqual({
+            groupX: {
+                serverErrorNode: false,
+                validators: [{ type: 'required' }],
+                fields: [input],
+                valid: false
+            }
+        });
+
+    });
+
+    it('Should add a validation method when provided an array of fields and a new group name', () => {
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                required
+                type="text" />
+        </form>`;
+        // const form = document.querySelector('.form');
+        const input = document.querySelector('#group1-1');
+        const validator = validate('form')[0];
+
+        expect(validator.getState().groups).toEqual({
+            group1: {
+                serverErrorNode: false,
+                validators: [{ type: 'required' }],
+                fields: [input],
+                valid: false
+            }
+        });
+        const method = () => false;
+        const message = 'Custom error';
+        validator.addMethod('CustomGroup', method, message, [ input ]);
+
+        expect(validator.getState().groups).toEqual({
+            group1: {
+                serverErrorNode: false,
+                validators: [{ type: 'required' }],
+                fields: [input],
+                valid: false
+            },
+            CustomGroup: {
+                serverErrorNode: false,
+                validators: [{ type: 'custom', method, message }],
+                fields: [input],
+                valid: false
+            }
+        });
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/bypass-disabled.js b/packages/validate/__tests__/jest/integration/api/validate/bypass-disabled.js
similarity index 93%
rename from packages/validate/__tests__/integration/api/validate/bypass-disabled.js
rename to packages/validate/__tests__/jest/integration/api/validate/bypass-disabled.js
index cb15bc7a..5cd0741a 100644
--- a/packages/validate/__tests__/integration/api/validate/bypass-disabled.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/bypass-disabled.js
@@ -1,32 +1,32 @@
-import validate from '../../../../src';
-
-describe('Validate > Integration > api > validate > bypass disabled fields', () => {
-
-    it('should return true for disabled groups regardless of validation criteria and value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                type="text"
-                required
-                disabled
-            />
-
-            
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group2"
-                name="group2"
-                value="Test"
-                type="text"
-                required
-            />
-        </form>`;
-        const [ validator ] = validate('form');
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-});
+import validate from '../../../../../src';
+
+describe('Validate > Integration > api > validate > bypass disabled fields', () => {
+
+    it('should return true for disabled groups regardless of validation criteria and value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                type="text"
+                required
+                disabled
+            />
+
+            
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group2"
+                name="group2"
+                value="Test"
+                type="text"
+                required
+            />
+        </form>`;
+        const [ validator ] = validate('form');
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+});
diff --git a/packages/validate/__tests__/integration/api/validate/dateISO.js b/packages/validate/__tests__/jest/integration/api/validate/dateISO.js
similarity index 93%
rename from packages/validate/__tests__/integration/api/validate/dateISO.js
rename to packages/validate/__tests__/jest/integration/api/validate/dateISO.js
index 82bfd613..6479a426 100644
--- a/packages/validate/__tests__/integration/api/validate/dateISO.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/dateISO.js
@@ -1,55 +1,55 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-
-describe('Validate > Integration >  api > validate > dateISO', () => {
-    //return boolean validityState
-    //start realtimevalidation
-    //render errors
-    //focus on first invalid field
-
-    //return boolean validityState
-    //submit form
-
-    it('should validate a form based on the data-val dateISO validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                data-val="true"
-                data-val-dateISO="DateISO error message"
-                value="12/12/12"
-                type="text" />
-        </form>`;
-        const input = document.getElementById('group1-1');
-        const label = document.getElementById('group1-1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('DateISO error message');
-    });
-
-    it('should validate a form based on the data-val dateISO validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                data-val="true"
-                data-val-dateISO="DateISO error message"
-                value="2019-05-14"
-                type="text" />
-        </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+
+describe('Validate > Integration >  api > validate > dateISO', () => {
+    //return boolean validityState
+    //start realtimevalidation
+    //render errors
+    //focus on first invalid field
+
+    //return boolean validityState
+    //submit form
+
+    it('should validate a form based on the data-val dateISO validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                data-val="true"
+                data-val-dateISO="DateISO error message"
+                value="12/12/12"
+                type="text" />
+        </form>`;
+        const input = document.getElementById('group1-1');
+        const label = document.getElementById('group1-1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('DateISO error message');
+    });
+
+    it('should validate a form based on the data-val dateISO validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                data-val="true"
+                data-val-dateISO="DateISO error message"
+                value="2019-05-14"
+                type="text" />
+        </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/digits.js b/packages/validate/__tests__/jest/integration/api/validate/digits.js
similarity index 93%
rename from packages/validate/__tests__/integration/api/validate/digits.js
rename to packages/validate/__tests__/jest/integration/api/validate/digits.js
index 1aea4065..f02600f7 100644
--- a/packages/validate/__tests__/integration/api/validate/digits.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/digits.js
@@ -1,55 +1,55 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-
-describe('Validate > Integration > api > validate > digits', () => {
-    //return boolean validityState
-    //start realtimevalidation
-    //render errors
-    //focus on first invalid field
-
-    //return boolean validityState
-    //submit form
-
-    it('should validate a form based on the data-val digits validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-digits="Digits error message"
-                value="Not a digit"
-                type="text" />
-        </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Digits error message');
-    });
-
-    it('should validate a form based on the data-val digits validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                data-val="true"
-                data-val-digits="Digits error message"
-                value="13465789"
-                type="text" />
-        </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+
+describe('Validate > Integration > api > validate > digits', () => {
+    //return boolean validityState
+    //start realtimevalidation
+    //render errors
+    //focus on first invalid field
+
+    //return boolean validityState
+    //submit form
+
+    it('should validate a form based on the data-val digits validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-digits="Digits error message"
+                value="Not a digit"
+                type="text" />
+        </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Digits error message');
+    });
+
+    it('should validate a form based on the data-val digits validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                data-val="true"
+                data-val-digits="Digits error message"
+                value="13465789"
+                type="text" />
+        </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/email.js b/packages/validate/__tests__/jest/integration/api/validate/email.js
similarity index 93%
rename from packages/validate/__tests__/integration/api/validate/email.js
rename to packages/validate/__tests__/jest/integration/api/validate/email.js
index b5ca1947..74874f0c 100644
--- a/packages/validate/__tests__/integration/api/validate/email.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/email.js
@@ -1,98 +1,98 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-import defaults from '../../../../src/lib/defaults';
-
-describe('Validate > Integration >  api > validate > email', () => {
-    //return boolean validityState
-    //start realtimevalidation
-    //render errors
-    //focus on first invalid field
-
-    //return boolean validityState
-    //submit form
-
-    it('should validate a form based on the HTML5 email validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                value="not.an.email.address"
-                type="email" />
-        </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        // //validityState
-        expect(validityState).toEqual(false);
-        // //realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        //render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.email());
-    });
-
-    it('should validate a form based on the HTML5 email validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                value="an.email.address@storm"
-                type="text" />
-        </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        // //validityState
-        expect(validityState).toEqual(true);
-    });
-
-    it('should validate a form based on the data-val email validator returning false, starting realTimeValidation, ', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label for="group2">group1</label>
-            <input
-                id="group2"
-                name="group2"
-                data-val="true"
-                data-val-email="Email error message"
-                value="not.an.email.address"
-                type="email">
-                <span data-valmsg-for="group2" data-valmsg-replace="true" class="${DOTNET_CLASSNAMES.ERROR}"></span>
-        </form>`;
-        const input = document.getElementById('group2');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        //validityState
-        expect(validityState).toEqual(false);
-        //realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        //focus on firstinvalid node
-        expect(document.activeElement).toEqual(input);
-        //render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Email error message');
-        
-    });
-
-    it('should validate a form based on the data-val email validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group2"
-                name="group2"
-                data-val="true"
-                data-val-email="Required error message"
-                value="an.email.address@storm"
-                type="email" />
-        </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        // //validityState
-        expect(validityState).toEqual(true);
-    });
-});
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import defaults from '../../../../../src/lib/defaults';
+
+describe('Validate > Integration >  api > validate > email', () => {
+    //return boolean validityState
+    //start realtimevalidation
+    //render errors
+    //focus on first invalid field
+
+    //return boolean validityState
+    //submit form
+
+    it('should validate a form based on the HTML5 email validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                value="not.an.email.address"
+                type="email" />
+        </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        // //validityState
+        expect(validityState).toEqual(false);
+        // //realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // //focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        //render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.email());
+    });
+
+    it('should validate a form based on the HTML5 email validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                value="an.email.address@storm"
+                type="text" />
+        </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        // //validityState
+        expect(validityState).toEqual(true);
+    });
+
+    it('should validate a form based on the data-val email validator returning false, starting realTimeValidation, ', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label for="group2">group1</label>
+            <input
+                id="group2"
+                name="group2"
+                data-val="true"
+                data-val-email="Email error message"
+                value="not.an.email.address"
+                type="email">
+                <span data-valmsg-for="group2" data-valmsg-replace="true" class="${DOTNET_CLASSNAMES.ERROR}"></span>
+        </form>`;
+        const input = document.getElementById('group2');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        //validityState
+        expect(validityState).toEqual(false);
+        //realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        //focus on firstinvalid node
+        expect(document.activeElement).toEqual(input);
+        //render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Email error message');
+        
+    });
+
+    it('should validate a form based on the data-val email validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group2"
+                name="group2"
+                data-val="true"
+                data-val-email="Required error message"
+                value="an.email.address@storm"
+                type="email" />
+        </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        // //validityState
+        expect(validityState).toEqual(true);
+    });
+});
diff --git a/packages/validate/__tests__/integration/api/validate/equalto.js b/packages/validate/__tests__/jest/integration/api/validate/equalto.js
similarity index 91%
rename from packages/validate/__tests__/integration/api/validate/equalto.js
rename to packages/validate/__tests__/jest/integration/api/validate/equalto.js
index ce8a1095..d1beefa7 100644
--- a/packages/validate/__tests__/integration/api/validate/equalto.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/equalto.js
@@ -1,60 +1,60 @@
-import library from '../../../../src';
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-
-describe('Validate > Integration >  api > validate > equalto', () => {
-    
-    it('should validate a form based on the data-val equalto validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form"><input
-                id="Email"
-                name="Email"
-                value="example@stormid.com" />
-            <input
-                id="ConfirmEmail"
-                name="ConfirmEmail"
-                value="example@stormid.com" />
-            <label id="DoubleConfirmEmail-label" for="DoubleConfirmEmail">DoubleConfirmEmail</label>
-            <input data-val="true" 
-                data-val-equalto="Equalto error message"
-                data-val-equalto-other="Email,ConfirmEmail"
-                id="DoubleConfirmEmail"
-                name="DoubleConfirmEmail"
-                value="not.the.same.email.address@stormid.com" /></form>`;
-        const input = document.querySelector('#DoubleConfirmEmail');
-        // const label = document.getElementById('DoubleConfirmEmail-label');
-        const validator = library('form')[0];
-        const validityState = await validator.validate();
-        // //validityState
-        expect(validityState).toEqual(false);
-        // //realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        //render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Equalto error message');
-    });
-
-    it('should validate a form based on the data-val equalto validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-                id="Email"
-                name="Email"
-                value="example@stormid.com" />
-            <input
-                id="ConfirmEmail"
-                name="ConfirmEmail"
-                value="" />
-            <label id="DoubleConfirmEmail-label" for="DoubleConfirmEmail">DoubleConfirmEmail</label>
-            <input data-val="true" 
-                data-val-equalto="Equalto error message"
-                data-val-equalto-other="Email,ConfirmEmail"
-                id="DoubleConfirmEmail"
-                name="DoubleConfirmEmail"
-                value="example@stormid.com" />`;
-        const input = document.querySelector('#DoubleConfirmEmail');
-        const group = assembleValidationGroup({}, input).DoubleConfirmEmail;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
+import library from '../../../../../src';
+import { validate, assembleValidationGroup } from '../../../../../src/lib/validator';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+
+describe('Validate > Integration >  api > validate > equalto', () => {
+    
+    it('should validate a form based on the data-val equalto validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form"><input
+                id="Email"
+                name="Email"
+                value="example@stormid.com" />
+            <input
+                id="ConfirmEmail"
+                name="ConfirmEmail"
+                value="example@stormid.com" />
+            <label id="DoubleConfirmEmail-label" for="DoubleConfirmEmail">DoubleConfirmEmail</label>
+            <input data-val="true" 
+                data-val-equalto="Equalto error message"
+                data-val-equalto-other="Email,ConfirmEmail"
+                id="DoubleConfirmEmail"
+                name="DoubleConfirmEmail"
+                value="not.the.same.email.address@stormid.com" /></form>`;
+        const input = document.querySelector('#DoubleConfirmEmail');
+        // const label = document.getElementById('DoubleConfirmEmail-label');
+        const validator = library('form')[0];
+        const validityState = await validator.validate();
+        // //validityState
+        expect(validityState).toEqual(false);
+        // //realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // //focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        //render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Equalto error message');
+    });
+
+    it('should validate a form based on the data-val equalto validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+                id="Email"
+                name="Email"
+                value="example@stormid.com" />
+            <input
+                id="ConfirmEmail"
+                name="ConfirmEmail"
+                value="" />
+            <label id="DoubleConfirmEmail-label" for="DoubleConfirmEmail">DoubleConfirmEmail</label>
+            <input data-val="true" 
+                data-val-equalto="Equalto error message"
+                data-val-equalto-other="Email,ConfirmEmail"
+                id="DoubleConfirmEmail"
+                name="DoubleConfirmEmail"
+                value="example@stormid.com" />`;
+        const input = document.querySelector('#DoubleConfirmEmail');
+        const group = assembleValidationGroup({}, input).DoubleConfirmEmail;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/length.js b/packages/validate/__tests__/jest/integration/api/validate/length.js
similarity index 93%
rename from packages/validate/__tests__/integration/api/validate/length.js
rename to packages/validate/__tests__/jest/integration/api/validate/length.js
index 667b1616..1aaacc85 100644
--- a/packages/validate/__tests__/integration/api/validate/length.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/length.js
@@ -1,52 +1,52 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-
-describe('Validate > Integration >  api > validate > length', () => {
-    
-    it('should validate a form based on the data-val length validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is outwith the min and max length range', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-length="Length error message"
-                data-val-length-min="2"
-                data-val-length-max="8"
-                value="Value is too long"
-                type="text" />
-        </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Length error message');
-    });
-
-    it('should validate a form based on the data-val length validator returning true if within the min and max length range', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                data-val="true"
-                data-val-length="Length error message"
-                data-val-length-min="2"
-                data-val-length-max="8"
-                value="Pass"
-                type="text" />
-        </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+
+describe('Validate > Integration >  api > validate > length', () => {
+    
+    it('should validate a form based on the data-val length validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is outwith the min and max length range', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-length="Length error message"
+                data-val-length-min="2"
+                data-val-length-max="8"
+                value="Value is too long"
+                type="text" />
+        </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Length error message');
+    });
+
+    it('should validate a form based on the data-val length validator returning true if within the min and max length range', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                data-val="true"
+                data-val-length="Length error message"
+                data-val-length-min="2"
+                data-val-length-max="8"
+                value="Pass"
+                type="text" />
+        </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/max.js b/packages/validate/__tests__/jest/integration/api/validate/max.js
similarity index 93%
rename from packages/validate/__tests__/integration/api/validate/max.js
rename to packages/validate/__tests__/jest/integration/api/validate/max.js
index 3421a89f..6fa66d67 100644
--- a/packages/validate/__tests__/integration/api/validate/max.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/max.js
@@ -1,91 +1,91 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-import defaults from '../../../../src/lib/defaults';
-
-describe('Validate > Integration > api > validate > max', () => {
-    
-    it('should validate a form based on the HTML5 max validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-        <label id="group1-label" for="group1">group1</label>
-        <input
-            id="group1"
-            name="group1"
-            max="2"
-            value="3"
-            type="number">
-        </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.max({ max: 2 }));
-    });
-
-    it('should validate a form based on the data-val equalto validator returning true if valid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-max="Max error message"
-                data-val-max-max="2"
-                value="3"
-                type="number">
-            </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Max error message');
-    });
-
-    it('should validate a form based on the data-val max validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                max="2"
-                value="2"
-                type="number">
-            </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
-    it('should validate a form based on the data-val max validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-max="Max error message"
-                data-val-max-max="2"
-                value="2"
-                type="number">
-            </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import defaults from '../../../../../src/lib/defaults';
+
+describe('Validate > Integration > api > validate > max', () => {
+    
+    it('should validate a form based on the HTML5 max validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+        <label id="group1-label" for="group1">group1</label>
+        <input
+            id="group1"
+            name="group1"
+            max="2"
+            value="3"
+            type="number">
+        </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.max({ max: 2 }));
+    });
+
+    it('should validate a form based on the data-val equalto validator returning true if valid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-max="Max error message"
+                data-val-max-max="2"
+                value="3"
+                type="number">
+            </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Max error message');
+    });
+
+    it('should validate a form based on the data-val max validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                max="2"
+                value="2"
+                type="number">
+            </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
+    it('should validate a form based on the data-val max validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-max="Max error message"
+                data-val-max-max="2"
+                value="2"
+                type="number">
+            </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/maxlength.js b/packages/validate/__tests__/jest/integration/api/validate/maxlength.js
similarity index 93%
rename from packages/validate/__tests__/integration/api/validate/maxlength.js
rename to packages/validate/__tests__/jest/integration/api/validate/maxlength.js
index 424de9ae..e42e5a45 100644
--- a/packages/validate/__tests__/integration/api/validate/maxlength.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/maxlength.js
@@ -1,91 +1,91 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-import defaults from '../../../../src/lib/defaults';
-
-describe('Validate > Integration > api > validate > maxlength', () => {
-    
-    it('should validate a form based on the HTML5 maxlength validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-        <label id="group1-label" for="group1">group1</label>
-        <input
-			id="group1"
-            name="group1"
-            maxlength="5"
-            value="Falsey"
-			type="text">
-        </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.maxlength({ max: 5 }));
-    });
-
-    it('should validate a form based on the data-val maxlength validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-maxlength="Maxlength error message"
-                data-val-maxlength-max="5"
-                value="Falsey"
-                type="text">
-            </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Maxlength error message');
-    });
-
-    it('should validate a form based on the HTML5 maxlength validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                maxlength="5"
-                value="Fine"
-                type="text">
-            </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
-    it('should validate a form based on the data-val maxlength validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-maxlength="Maxlength error message"
-                data-val-maxlength-max="5"
-                value="Fine"
-                type="text">
-            </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import defaults from '../../../../../src/lib/defaults';
+
+describe('Validate > Integration > api > validate > maxlength', () => {
+    
+    it('should validate a form based on the HTML5 maxlength validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+        <label id="group1-label" for="group1">group1</label>
+        <input
+			id="group1"
+            name="group1"
+            maxlength="5"
+            value="Falsey"
+			type="text">
+        </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.maxlength({ max: 5 }));
+    });
+
+    it('should validate a form based on the data-val maxlength validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-maxlength="Maxlength error message"
+                data-val-maxlength-max="5"
+                value="Falsey"
+                type="text">
+            </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Maxlength error message');
+    });
+
+    it('should validate a form based on the HTML5 maxlength validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                maxlength="5"
+                value="Fine"
+                type="text">
+            </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
+    it('should validate a form based on the data-val maxlength validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-maxlength="Maxlength error message"
+                data-val-maxlength-max="5"
+                value="Fine"
+                type="text">
+            </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/min.js b/packages/validate/__tests__/jest/integration/api/validate/min.js
similarity index 93%
rename from packages/validate/__tests__/integration/api/validate/min.js
rename to packages/validate/__tests__/jest/integration/api/validate/min.js
index 4235a760..9fe5e42a 100644
--- a/packages/validate/__tests__/integration/api/validate/min.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/min.js
@@ -1,89 +1,89 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-import defaults from '../../../../src/lib/defaults';
-
-describe('Validate > Integration > api > validate > min', () => {
-    
-    it('should validate a form based on the HTML5 min validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-        <label id="group1-label" for="group1">group1</label>
-        <input
-			id="group1"
-            name="group1"
-            min="2"
-            value="1"
-			type="number">
-        </form>`;
-        const input = document.getElementById('group1');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.min({ min: 2 }));
-    });
-
-    it('should validate a form based on the data-val min validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-min="Min error message"
-                data-val-min-min="2"
-                value="1"
-                type="number">
-            </form>`;
-        const input = document.getElementById('group1');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Min error message');
-    });
-
-    it('should validate a form based on the HTML5 min validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                min="2"
-                value="2"
-                type="number">
-            </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
-    it('should validate a form based on the data-val min validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-min="Min error message"
-                data-val-min-min="2"
-                value="2"
-                type="number">
-            </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import defaults from '../../../../../src/lib/defaults';
+
+describe('Validate > Integration > api > validate > min', () => {
+    
+    it('should validate a form based on the HTML5 min validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+        <label id="group1-label" for="group1">group1</label>
+        <input
+			id="group1"
+            name="group1"
+            min="2"
+            value="1"
+			type="number">
+        </form>`;
+        const input = document.getElementById('group1');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.min({ min: 2 }));
+    });
+
+    it('should validate a form based on the data-val min validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-min="Min error message"
+                data-val-min-min="2"
+                value="1"
+                type="number">
+            </form>`;
+        const input = document.getElementById('group1');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Min error message');
+    });
+
+    it('should validate a form based on the HTML5 min validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                min="2"
+                value="2"
+                type="number">
+            </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
+    it('should validate a form based on the data-val min validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-min="Min error message"
+                data-val-min-min="2"
+                value="2"
+                type="number">
+            </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/minlength.js b/packages/validate/__tests__/jest/integration/api/validate/minlength.js
similarity index 93%
rename from packages/validate/__tests__/integration/api/validate/minlength.js
rename to packages/validate/__tests__/jest/integration/api/validate/minlength.js
index 76caf568..0f95ddca 100644
--- a/packages/validate/__tests__/integration/api/validate/minlength.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/minlength.js
@@ -1,91 +1,91 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-import defaults from '../../../../src/lib/defaults';
-
-describe('Validate > Integration > api > validate > minlength', () => {
-    
-    it('should validate a form based on the HTML5 minlength validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-        <label id="group1-label" for="group1">group1</label>
-        <input
-			id="group1"
-            name="group1"
-            minlength="3"
-            value="No"
-			type="text">
-        </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.minlength({ min: 3 }));
-    });
-
-    it('should validate a form based on the data-val minlength validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-minlength="Minlength error message"
-                data-val-minlength-min="3"
-                value="No"
-                type="text">
-            </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Minlength error message');
-    });
-
-    it('should validate a form based on the HTML5 minlength validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                minlength="3"
-                value="Fine"
-                type="text">
-            </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
-    it('should validate a form based on the data-val minlength validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-minlength="Minlength error message"
-                data-val-minlength-min="3"
-                value="Fine"
-                type="text">
-            </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import defaults from '../../../../../src/lib/defaults';
+
+describe('Validate > Integration > api > validate > minlength', () => {
+    
+    it('should validate a form based on the HTML5 minlength validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+        <label id="group1-label" for="group1">group1</label>
+        <input
+			id="group1"
+            name="group1"
+            minlength="3"
+            value="No"
+			type="text">
+        </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.minlength({ min: 3 }));
+    });
+
+    it('should validate a form based on the data-val minlength validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-minlength="Minlength error message"
+                data-val-minlength-min="3"
+                value="No"
+                type="text">
+            </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Minlength error message');
+    });
+
+    it('should validate a form based on the HTML5 minlength validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                minlength="3"
+                value="Fine"
+                type="text">
+            </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
+    it('should validate a form based on the data-val minlength validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-minlength="Minlength error message"
+                data-val-minlength-min="3"
+                value="Fine"
+                type="text">
+            </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/number.js b/packages/validate/__tests__/jest/integration/api/validate/number.js
similarity index 91%
rename from packages/validate/__tests__/integration/api/validate/number.js
rename to packages/validate/__tests__/jest/integration/api/validate/number.js
index e215ff89..18a7924e 100644
--- a/packages/validate/__tests__/integration/api/validate/number.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/number.js
@@ -1,64 +1,63 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-import defaults from '../../../../src/lib/defaults';
-
-describe('Validate > Integration > api > validate > number', () => {
-
-    it('should validate a form based on the HTML5 number validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                value="100"
-                type="number">
-            </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
-    it('should validate a form based on the data-val number validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-number="Number error message"
-                value="not.a.number"
-                type="text">
-        </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Number error message');
-    });
-
-    it('should validate a form based on the data-val number validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-number="Number error message"
-                value="100"
-                type="number">
-            </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+
+describe('Validate > Integration > api > validate > number', () => {
+
+    it('should validate a form based on the HTML5 number validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                value="100"
+                type="number">
+            </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
+    it('should validate a form based on the data-val number validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-number="Number error message"
+                value="not.a.number"
+                type="text">
+        </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Number error message');
+    });
+
+    it('should validate a form based on the data-val number validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-number="Number error message"
+                value="100"
+                type="number">
+            </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/range.js b/packages/validate/__tests__/jest/integration/api/validate/range.js
similarity index 96%
rename from packages/validate/__tests__/integration/api/validate/range.js
rename to packages/validate/__tests__/jest/integration/api/validate/range.js
index cd76477a..7b2069f7 100644
--- a/packages/validate/__tests__/integration/api/validate/range.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/range.js
@@ -1,143 +1,143 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-
-describe('Validate > Integration >  api > validate > equalto', () => {
-    
-    it('should validate a form based on the data-val range validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if the value is out of range', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">Label</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-range="Range error message"
-                data-val-range-min="2"
-                data-val-range-max="8"
-                value="9"
-                type="text">
-        </form>`;
-        const input = document.querySelector('#group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        // //validityState
-        expect(validityState).toEqual(false);
-        // //realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        //render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Range error message');
-    });
-
-    it('should validate a form based on the data-val range validator returning true if value > min with no max', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">DoubleConfirmEmail</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-range="Range error message"
-                data-val-range-min="2"
-                value="5"
-                type="text">
-        </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
-    it('should validate a form based on the data-val range validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if the value <= min with no max', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">DoubleConfirmEmail</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-range="Range error message"
-                data-val-range-min="8"
-                value="7"
-                type="text">
-        </form>`;
-        const input = document.querySelector('#group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        // //validityState
-        expect(validityState).toEqual(false);
-        // //realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        //render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Range error message');
-    });
-
-    it('should validate a form based on the data-val range validator returning true if value <= max with no min', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">DoubleConfirmEmail</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-range="Range error message"
-                data-val-range-max="2"
-                value="2"
-                type="text">
-        </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
-    it('should validate a form based on the data-val range validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if the value > max with no min', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">DoubleConfirmEmail</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-range="Range error message"
-                data-val-range-max="8"
-                value="9"
-                type="text">
-        </form>`;
-        const input = document.querySelector('#group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        // //validityState
-        expect(validityState).toEqual(false);
-        // //realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        //render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Range error message');
-    });
-
-    it('should validate a form based on the data-val range validator returning true if value is in range', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">DoubleConfirmEmail</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-range="Range error message"
-                data-val-range-min="2"
-                data-val-range-max="8"
-                value="7"
-                type="text">
-        </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+
+describe('Validate > Integration >  api > validate > equalto', () => {
+    
+    it('should validate a form based on the data-val range validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if the value is out of range', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">Label</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-range="Range error message"
+                data-val-range-min="2"
+                data-val-range-max="8"
+                value="9"
+                type="text">
+        </form>`;
+        const input = document.querySelector('#group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        // //validityState
+        expect(validityState).toEqual(false);
+        // //realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // //focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        //render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Range error message');
+    });
+
+    it('should validate a form based on the data-val range validator returning true if value > min with no max', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">DoubleConfirmEmail</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-range="Range error message"
+                data-val-range-min="2"
+                value="5"
+                type="text">
+        </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
+    it('should validate a form based on the data-val range validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if the value <= min with no max', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">DoubleConfirmEmail</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-range="Range error message"
+                data-val-range-min="8"
+                value="7"
+                type="text">
+        </form>`;
+        const input = document.querySelector('#group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        // //validityState
+        expect(validityState).toEqual(false);
+        // //realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // //focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        //render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Range error message');
+    });
+
+    it('should validate a form based on the data-val range validator returning true if value <= max with no min', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">DoubleConfirmEmail</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-range="Range error message"
+                data-val-range-max="2"
+                value="2"
+                type="text">
+        </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
+    it('should validate a form based on the data-val range validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if the value > max with no min', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">DoubleConfirmEmail</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-range="Range error message"
+                data-val-range-max="8"
+                value="9"
+                type="text">
+        </form>`;
+        const input = document.querySelector('#group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        // //validityState
+        expect(validityState).toEqual(false);
+        // //realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // //focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        //render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Range error message');
+    });
+
+    it('should validate a form based on the data-val range validator returning true if value is in range', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">DoubleConfirmEmail</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-range="Range error message"
+                data-val-range-min="2"
+                data-val-range-max="8"
+                value="7"
+                type="text">
+        </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/regex-pattern.js b/packages/validate/__tests__/jest/integration/api/validate/regex-pattern.js
similarity index 94%
rename from packages/validate/__tests__/integration/api/validate/regex-pattern.js
rename to packages/validate/__tests__/jest/integration/api/validate/regex-pattern.js
index d47b9316..5479f288 100644
--- a/packages/validate/__tests__/integration/api/validate/regex-pattern.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/regex-pattern.js
@@ -1,90 +1,90 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-import defaults from '../../../../src/lib/defaults';
-
-describe('Validate > Integration > api > validate > regex/pattern', () => {
-    it('should validate a form based on the HTML5 pattern validator returning false, staring realTimeValidation, focusing on first invalid field, and rendering an error message if the value does not match', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">Label</label>
-            <input
-                id="group1"
-                name="group1"
-                pattern="^(pass)$"
-                value="fail"
-                type="text">
-        </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.pattern());
-    });
-
-    it('should validate a form based on the data-val regex validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-regex="Regex error message"
-                data-val-regex-pattern="^(pass)$"
-                value="fail"
-                type="text">
-            </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Regex error message');
-    });
-    
-    it('should validate a form based on the HTML5 pattern validator returning true if the pattern is matched', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                pattern="^(pass)$"
-                value="pass"
-                type="text">
-            </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
-    it('should validate a form based on the HTML5 pattern validator returning true if the pattern is matched', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-regex="Regex error message"
-                data-val-regex-pattern="^(pass)$"
-                value="pass"
-                type="text">
-            </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import defaults from '../../../../../src/lib/defaults';
+
+describe('Validate > Integration > api > validate > regex/pattern', () => {
+    it('should validate a form based on the HTML5 pattern validator returning false, staring realTimeValidation, focusing on first invalid field, and rendering an error message if the value does not match', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">Label</label>
+            <input
+                id="group1"
+                name="group1"
+                pattern="^(pass)$"
+                value="fail"
+                type="text">
+        </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.pattern());
+    });
+
+    it('should validate a form based on the data-val regex validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-regex="Regex error message"
+                data-val-regex-pattern="^(pass)$"
+                value="fail"
+                type="text">
+            </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Regex error message');
+    });
+    
+    it('should validate a form based on the HTML5 pattern validator returning true if the pattern is matched', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                pattern="^(pass)$"
+                value="pass"
+                type="text">
+            </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
+    it('should validate a form based on the HTML5 pattern validator returning true if the pattern is matched', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-regex="Regex error message"
+                data-val-regex-pattern="^(pass)$"
+                value="pass"
+                type="text">
+            </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/remote.js b/packages/validate/__tests__/jest/integration/api/validate/remote.js
similarity index 95%
rename from packages/validate/__tests__/integration/api/validate/remote.js
rename to packages/validate/__tests__/jest/integration/api/validate/remote.js
index 5afe33e6..30a59059 100644
--- a/packages/validate/__tests__/integration/api/validate/remote.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/remote.js
@@ -1,142 +1,142 @@
-import mock from 'xhr-mock';
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-
-describe('Validate > Integration > api > validate > remote', () => {
-    
-    beforeEach(() => mock.setup());
-
-    afterEach(() => mock.teardown());
-
-    it('should validate a form based on the HTML5 remote validator returning false, staring realTimeValidation, focusing on first invalid field, and rendering an error message if the remote validation returns an error', async () => {
-        expect.assertions(4);
- 
-        mock.post('/api/validate', {
-            status: 201,
-            body: 'Remote error message'
-        });
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">Label</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-remote="Remote error message"
-                data-val-remote-type="post"
-                data-val-remote-url="/api/validate"
-                data-val-remote-additionalfields="group2"
-                value="Failure"
-                type="text">   
-                <input
-                id="group2"
-                name="group2"
-                value="Value 2"
-                type="text">
-        </form>`;
-        const input = document.getElementById('group1');
-        const validator = validate('form')[0];
-        
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Remote error message');
-    });
-
-    it('should validate a form based on the HTML5 remote validator returning false, staring realTimeValidation, focusing on first invalid field, and rendering the error message if noe is returned from the remote validation API', async () => {
-        expect.assertions(4);
- 
-        mock.post('/api/validate', {
-            status: 201,
-            body: 'Error message from API'
-        });
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">Label</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-remote="Remote error message"
-                data-val-remote-type="post"
-                data-val-remote-url="/api/validate"
-                value="Failure"
-                type="text">
-        </form>`;
-        const input = document.getElementById('group1');
-        const validator = validate('form')[0];
-        
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Error message from API');
-    });
-    
-    it('should validate a form based on the HTML5 remote validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if the remote validation returns an error via a GET request', async () => {
-        expect.assertions(4);
- 
-        mock.get('/api/validate?group1=Failure&group2=Value%202', {
-            status: 201,
-            body: 'false'
-        });
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">Label</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-remote="Remote error message"
-                data-val-remote-type="get"
-                data-val-remote-url="/api/validate"
-                data-val-remote-additionalfields="group2"
-                value="Failure"
-                type="text">   
-                <input
-                id="group2"
-                name="group2"
-                value="Value 2"
-                type="text">
-        </form>`;
-        const input = document.getElementById('group1');
-        const validator = validate('form')[0];
-        
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Remote error message');
-    });
-
-    it('should validate a form based on the data-val remote validator returning true if it passes remote validate', async () => {
-        expect.assertions(1);
-
-        mock.post('/api/validate', {
-            status: 201,
-            body: 'true'
-        });
-        document.body.innerHTML = `<form class="form">
-        <label id="group1-label" for="group1">Label</label>
-        <input
-            id="group1"
-            name="group1"
-            data-val="true"
-            data-val-remote="Remote error message"
-            data-val-remote-type="post"
-            data-val-remote-url="/api/validate"
-            value="Pass"
-            type="text"></form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-      
+import mock from 'xhr-mock';
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+
+describe('Validate > Integration > api > validate > remote', () => {
+    
+    beforeEach(() => mock.setup());
+
+    afterEach(() => mock.teardown());
+
+    it('should validate a form based on the HTML5 remote validator returning false, staring realTimeValidation, focusing on first invalid field, and rendering an error message if the remote validation returns an error', async () => {
+        expect.assertions(4);
+ 
+        mock.post('/api/validate', {
+            status: 201,
+            body: 'Remote error message'
+        });
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">Label</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-remote="Remote error message"
+                data-val-remote-type="post"
+                data-val-remote-url="/api/validate"
+                data-val-remote-additionalfields="group2"
+                value="Failure"
+                type="text">   
+                <input
+                id="group2"
+                name="group2"
+                value="Value 2"
+                type="text">
+        </form>`;
+        const input = document.getElementById('group1');
+        const validator = validate('form')[0];
+        
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Remote error message');
+    });
+
+    it('should validate a form based on the HTML5 remote validator returning false, staring realTimeValidation, focusing on first invalid field, and rendering the error message if noe is returned from the remote validation API', async () => {
+        expect.assertions(4);
+ 
+        mock.post('/api/validate', {
+            status: 201,
+            body: 'Error message from API'
+        });
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">Label</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-remote="Remote error message"
+                data-val-remote-type="post"
+                data-val-remote-url="/api/validate"
+                value="Failure"
+                type="text">
+        </form>`;
+        const input = document.getElementById('group1');
+        const validator = validate('form')[0];
+        
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Error message from API');
+    });
+    
+    it('should validate a form based on the HTML5 remote validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if the remote validation returns an error via a GET request', async () => {
+        expect.assertions(4);
+ 
+        mock.get('/api/validate?group1=Failure&group2=Value%202', {
+            status: 201,
+            body: 'false'
+        });
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">Label</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-remote="Remote error message"
+                data-val-remote-type="get"
+                data-val-remote-url="/api/validate"
+                data-val-remote-additionalfields="group2"
+                value="Failure"
+                type="text">   
+                <input
+                id="group2"
+                name="group2"
+                value="Value 2"
+                type="text">
+        </form>`;
+        const input = document.getElementById('group1');
+        const validator = validate('form')[0];
+        
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Remote error message');
+    });
+
+    it('should validate a form based on the data-val remote validator returning true if it passes remote validate', async () => {
+        expect.assertions(1);
+
+        mock.post('/api/validate', {
+            status: 201,
+            body: 'true'
+        });
+        document.body.innerHTML = `<form class="form">
+        <label id="group1-label" for="group1">Label</label>
+        <input
+            id="group1"
+            name="group1"
+            data-val="true"
+            data-val-remote="Remote error message"
+            data-val-remote-type="post"
+            data-val-remote-url="/api/validate"
+            value="Pass"
+            type="text"></form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+      
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/required.js b/packages/validate/__tests__/jest/integration/api/validate/required.js
similarity index 94%
rename from packages/validate/__tests__/integration/api/validate/required.js
rename to packages/validate/__tests__/jest/integration/api/validate/required.js
index 24511f6a..14c4b34c 100644
--- a/packages/validate/__tests__/integration/api/validate/required.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/required.js
@@ -1,100 +1,100 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-import defaults from '../../../../src/lib/defaults';
-
-describe('Validate > Integration > api > validate > required', () => {
-    //return boolean validityState
-    //start realtimevalidation
-    //render errors
-    //focus on first invalid field
-
-    //return boolean validityState
-    //submit form
-
-    it('should validate a form based on the HTML5 required validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                required
-                value=""
-                type="text" />
-        </form>`;
-        const input = document.getElementById('group1-1');
-        const label = document.getElementById('group1-1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        // //validityState
-        expect(validityState).toEqual(false);
-        // //realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        //render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
-    });
-
-    it('should validate a form based on the HTML5 required validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                required
-                value="Valid value"
-                type="text" />
-        </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        // //validityState
-        expect(validityState).toEqual(true);
-    });
-
-    it('should validate a form based on the data-val required validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label for="group2">group1</label>
-            <input
-                id="group2"
-                name="group2"
-                data-val="true"
-                data-val-required="Required error message"
-                value=""
-                type="text">
-                <span data-valmsg-for="group2" data-valmsg-replace="true" class="${DOTNET_CLASSNAMES.ERROR}"></span>
-        </form>`;
-        const input = document.getElementById('group2');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        //validityState
-        expect(validityState).toEqual(false);
-        //realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        //focus on firstinvalid node
-        expect(document.activeElement).toEqual(input);
-        //render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Required error message');
-        
-    });
-
-    it('should validate a form based on the data-val required validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group2"
-                name="group2"
-                data-val="true"
-                data-val-required="Required error message"
-                value="Valid value"
-                type="text" />
-        </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        // //validityState
-        expect(validityState).toEqual(true);
-    });
-});
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import defaults from '../../../../../src/lib/defaults';
+
+describe('Validate > Integration > api > validate > required', () => {
+    //return boolean validityState
+    //start realtimevalidation
+    //render errors
+    //focus on first invalid field
+
+    //return boolean validityState
+    //submit form
+
+    it('should validate a form based on the HTML5 required validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                required
+                value=""
+                type="text" />
+        </form>`;
+        const input = document.getElementById('group1-1');
+        const label = document.getElementById('group1-1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        // //validityState
+        expect(validityState).toEqual(false);
+        // //realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // //focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        //render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
+    });
+
+    it('should validate a form based on the HTML5 required validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                required
+                value="Valid value"
+                type="text" />
+        </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        // //validityState
+        expect(validityState).toEqual(true);
+    });
+
+    it('should validate a form based on the data-val required validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label for="group2">group1</label>
+            <input
+                id="group2"
+                name="group2"
+                data-val="true"
+                data-val-required="Required error message"
+                value=""
+                type="text">
+                <span data-valmsg-for="group2" data-valmsg-replace="true" class="${DOTNET_CLASSNAMES.ERROR}"></span>
+        </form>`;
+        const input = document.getElementById('group2');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        //validityState
+        expect(validityState).toEqual(false);
+        //realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        //focus on firstinvalid node
+        expect(document.activeElement).toEqual(input);
+        //render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Required error message');
+        
+    });
+
+    it('should validate a form based on the data-val required validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group2"
+                name="group2"
+                data-val="true"
+                data-val-required="Required error message"
+                value="Valid value"
+                type="text" />
+        </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        // //validityState
+        expect(validityState).toEqual(true);
+    });
+});
diff --git a/packages/validate/__tests__/integration/api/validate/stringlength.js b/packages/validate/__tests__/jest/integration/api/validate/stringlength.js
similarity index 93%
rename from packages/validate/__tests__/integration/api/validate/stringlength.js
rename to packages/validate/__tests__/jest/integration/api/validate/stringlength.js
index b2c9b5bd..083f4971 100644
--- a/packages/validate/__tests__/integration/api/validate/stringlength.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/stringlength.js
@@ -1,50 +1,50 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-
-describe('Validate > Integration >  api > validate > stringlength', () => {
-    
-    it('should validate a form based on the data-val stringlength validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is outwith the min and max length range', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                data-val="true"
-                data-val-stringlength="Stringlength error message"
-                data-val-length-max="8"
-                value="Value is too long"
-                type="text" />
-        </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        // realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        // // render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Stringlength error message');
-    });
-
-    it('should validate a form based on the data-val stringlength validator returning true if within the min and max length range', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                data-val="true"
-                data-val-stringlength="Length error message"
-                data-val-length-max="8"
-                value="Fine"
-                type="text" />
-        </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+
+describe('Validate > Integration >  api > validate > stringlength', () => {
+    
+    it('should validate a form based on the data-val stringlength validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is outwith the min and max length range', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                data-val="true"
+                data-val-stringlength="Stringlength error message"
+                data-val-length-max="8"
+                value="Value is too long"
+                type="text" />
+        </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        // realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // // focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        // // render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Stringlength error message');
+    });
+
+    it('should validate a form based on the data-val stringlength validator returning true if within the min and max length range', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                data-val="true"
+                data-val-stringlength="Length error message"
+                data-val-length-max="8"
+                value="Fine"
+                type="text" />
+        </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/api/validate/url.js b/packages/validate/__tests__/jest/integration/api/validate/url.js
similarity index 94%
rename from packages/validate/__tests__/integration/api/validate/url.js
rename to packages/validate/__tests__/jest/integration/api/validate/url.js
index d0578417..300482de 100644
--- a/packages/validate/__tests__/integration/api/validate/url.js
+++ b/packages/validate/__tests__/jest/integration/api/validate/url.js
@@ -1,98 +1,98 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-import defaults from '../../../../src/lib/defaults';
-
-describe('Validate > Integration >  api > validate > url', () => {
-    //html5 spec regex approximation:
-    ///^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
-
-    it('should validate a form based on the HTML5 url validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                value="not.a.url.com"
-                type="url" />
-        </form>`;
-        const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        // //validityState
-        expect(validityState).toEqual(false);
-        // //realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
-        expect(document.activeElement).toEqual(input);
-        //render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.url());
-    });
-
-    it('should validate a form based on the HTML5 url validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-label" for="group1">group1</label>
-            <input
-                id="group1"
-                name="group1"
-                value="https://a.url.com"
-                type="url" />
-        </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        // //validityState
-        expect(validityState).toEqual(true);
-    });
-
-    it('should validate a form based on the data-val email validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label for="group2">group1</label>
-            <input
-                id="group2"
-                name="group2"
-                data-val="true"
-                data-val-url="Url error message"
-                value="not.a.url"
-                type="url">
-                <span data-valmsg-for="group2" data-valmsg-replace="true" class="${DOTNET_CLASSNAMES.ERROR}"></span>
-        </form>`;
-        const input = document.getElementById('group2');
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        //validityState
-        expect(validityState).toEqual(false);
-        //realtimeValidation start
-        expect(validator.getState().realTimeValidation).toEqual(true);
-        //focus on firstinvalid node
-        expect(document.activeElement).toEqual(input);
-        //render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Url error message');
-        
-    });
-
-
-    it('should validate a form based on the data-val url validator returning true if valid', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label for="group2">group1</label>
-            <input
-                id="group2"
-                name="group2"
-                data-val="true"
-                data-val-url="Url error message"
-                value="https://a.url.com"
-                type="url">
-                <span data-valmsg-for="group2" data-valmsg-replace="true" class="${DOTNET_CLASSNAMES.ERROR}"></span>
-        </form>`;
-        const validator = validate('form')[0];
-        const validityState = await validator.validate();
-        //validityState
-        expect(validityState).toEqual(true);
-        
-    });
-
-
+import validate from '../../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import defaults from '../../../../../src/lib/defaults';
+
+describe('Validate > Integration >  api > validate > url', () => {
+    //html5 spec regex approximation:
+    ///^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
+
+    it('should validate a form based on the HTML5 url validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                value="not.a.url.com"
+                type="url" />
+        </form>`;
+        const input = document.getElementById('group1');
+        const label = document.getElementById('group1-label');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        // //validityState
+        expect(validityState).toEqual(false);
+        // //realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        // //focus on first invalid node
+        expect(document.activeElement).toEqual(input);
+        //render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.url());
+    });
+
+    it('should validate a form based on the HTML5 url validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-label" for="group1">group1</label>
+            <input
+                id="group1"
+                name="group1"
+                value="https://a.url.com"
+                type="url" />
+        </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        // //validityState
+        expect(validityState).toEqual(true);
+    });
+
+    it('should validate a form based on the data-val email validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
+        expect.assertions(4);
+        document.body.innerHTML = `<form class="form">
+            <label for="group2">group1</label>
+            <input
+                id="group2"
+                name="group2"
+                data-val="true"
+                data-val-url="Url error message"
+                value="not.a.url"
+                type="url">
+                <span data-valmsg-for="group2" data-valmsg-replace="true" class="${DOTNET_CLASSNAMES.ERROR}"></span>
+        </form>`;
+        const input = document.getElementById('group2');
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        //validityState
+        expect(validityState).toEqual(false);
+        //realtimeValidation start
+        expect(validator.getState().realTimeValidation).toEqual(true);
+        //focus on firstinvalid node
+        expect(document.activeElement).toEqual(input);
+        //render error message
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Url error message');
+        
+    });
+
+
+    it('should validate a form based on the data-val url validator returning true if valid', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label for="group2">group1</label>
+            <input
+                id="group2"
+                name="group2"
+                data-val="true"
+                data-val-url="Url error message"
+                value="https://a.url.com"
+                type="url">
+                <span data-valmsg-for="group2" data-valmsg-replace="true" class="${DOTNET_CLASSNAMES.ERROR}"></span>
+        </form>`;
+        const validator = validate('form')[0];
+        const validityState = await validator.validate();
+        //validityState
+        expect(validityState).toEqual(true);
+        
+    });
+
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/errors/index.js b/packages/validate/__tests__/jest/integration/errors/index.js
similarity index 95%
rename from packages/validate/__tests__/integration/errors/index.js
rename to packages/validate/__tests__/jest/integration/errors/index.js
index 4f1adc53..cfe6a621 100644
--- a/packages/validate/__tests__/integration/errors/index.js
+++ b/packages/validate/__tests__/jest/integration/errors/index.js
@@ -1,6 +1,6 @@
-import validate from '../../../src';
-import { DOTNET_CLASSNAMES } from '../../../src/lib/constants';
-import defaults from '../../../src/lib/defaults';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
+import defaults from '../../../../src/lib/defaults';
 
 describe('Validate > Integration > errors', () => {
 
diff --git a/packages/validate/__tests__/integration/normalise-validators/dateISO.js b/packages/validate/__tests__/jest/integration/normalise-validators/dateISO.js
similarity index 88%
rename from packages/validate/__tests__/integration/normalise-validators/dateISO.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/dateISO.js
index ab5e25c7..d0d7bc3d 100644
--- a/packages/validate/__tests__/integration/normalise-validators/dateISO.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/dateISO.js
@@ -1,21 +1,21 @@
-import { normaliseValidators } from '../../../src/lib/validator';
-
-describe('Validate > Integration > normalise-vaidators > dateISO', () => {
-    
-    it('should return the correct validation model for data-val email', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-            id="group1"
-            name="group1"
-            data-val="true"
-            data-val-dateISO="DateISO error message"
-            type="text">`;
-        const input = document.querySelector('#group1');
-        expect(normaliseValidators(input)).toEqual([
-            {
-                type: 'dateISO',
-                message: 'DateISO error message'
-            }
-        ]);
-    });
+import { normaliseValidators } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > normalise-vaidators > dateISO', () => {
+    
+    it('should return the correct validation model for data-val email', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+            id="group1"
+            name="group1"
+            data-val="true"
+            data-val-dateISO="DateISO error message"
+            type="text">`;
+        const input = document.querySelector('#group1');
+        expect(normaliseValidators(input)).toEqual([
+            {
+                type: 'dateISO',
+                message: 'DateISO error message'
+            }
+        ]);
+    });
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/normalise-validators/digits.js b/packages/validate/__tests__/jest/integration/normalise-validators/digits.js
similarity index 88%
rename from packages/validate/__tests__/integration/normalise-validators/digits.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/digits.js
index 88f2878b..981df238 100644
--- a/packages/validate/__tests__/integration/normalise-validators/digits.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/digits.js
@@ -1,21 +1,21 @@
-import { normaliseValidators } from '../../../src/lib/validator';
-
-describe('Validate > Integration > normalise-vaidators > dateISO', () => {
-    
-    it('should return the correct validation model for data-val email', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-            id="group1"
-            name="group1"
-            data-val="true"
-            data-val-digits="Digits error message"
-            type="text">`;
-        const input = document.querySelector('#group1');
-        expect(normaliseValidators(input)).toEqual([
-            {
-                type: 'digits',
-                message: 'Digits error message'
-            }
-        ]);
-    });
+import { normaliseValidators } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > normalise-vaidators > dateISO', () => {
+    
+    it('should return the correct validation model for data-val email', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+            id="group1"
+            name="group1"
+            data-val="true"
+            data-val-digits="Digits error message"
+            type="text">`;
+        const input = document.querySelector('#group1');
+        expect(normaliseValidators(input)).toEqual([
+            {
+                type: 'digits',
+                message: 'Digits error message'
+            }
+        ]);
+    });
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/normalise-validators/email.js b/packages/validate/__tests__/jest/integration/normalise-validators/email.js
similarity index 95%
rename from packages/validate/__tests__/integration/normalise-validators/email.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/email.js
index 1c034413..205efea8 100644
--- a/packages/validate/__tests__/integration/normalise-validators/email.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/email.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > email', () => {
     
diff --git a/packages/validate/__tests__/integration/normalise-validators/equalto.js b/packages/validate/__tests__/jest/integration/normalise-validators/equalto.js
similarity index 94%
rename from packages/validate/__tests__/integration/normalise-validators/equalto.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/equalto.js
index 89e18380..d0824845 100644
--- a/packages/validate/__tests__/integration/normalise-validators/equalto.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/equalto.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-validators > equalto', () => {
 
diff --git a/packages/validate/__tests__/integration/normalise-validators/length.js b/packages/validate/__tests__/jest/integration/normalise-validators/length.js
similarity index 92%
rename from packages/validate/__tests__/integration/normalise-validators/length.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/length.js
index 67004d98..ce63722d 100644
--- a/packages/validate/__tests__/integration/normalise-validators/length.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/length.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > length', () => {
     
diff --git a/packages/validate/__tests__/integration/normalise-validators/max.js b/packages/validate/__tests__/jest/integration/normalise-validators/max.js
similarity index 96%
rename from packages/validate/__tests__/integration/normalise-validators/max.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/max.js
index b4ce6bcc..386fe0d9 100644
--- a/packages/validate/__tests__/integration/normalise-validators/max.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/max.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > max', () => {
 
diff --git a/packages/validate/__tests__/integration/normalise-validators/maxlength.js b/packages/validate/__tests__/jest/integration/normalise-validators/maxlength.js
similarity index 96%
rename from packages/validate/__tests__/integration/normalise-validators/maxlength.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/maxlength.js
index 227e2001..de3b6bc8 100644
--- a/packages/validate/__tests__/integration/normalise-validators/maxlength.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/maxlength.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > maxlength', () => {
     
diff --git a/packages/validate/__tests__/integration/normalise-validators/min.js b/packages/validate/__tests__/jest/integration/normalise-validators/min.js
similarity index 96%
rename from packages/validate/__tests__/integration/normalise-validators/min.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/min.js
index b89db5df..4501ad66 100644
--- a/packages/validate/__tests__/integration/normalise-validators/min.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/min.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > min', () => {
 
diff --git a/packages/validate/__tests__/integration/normalise-validators/minlength.js b/packages/validate/__tests__/jest/integration/normalise-validators/minlength.js
similarity index 96%
rename from packages/validate/__tests__/integration/normalise-validators/minlength.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/minlength.js
index d8662739..6f5c259c 100644
--- a/packages/validate/__tests__/integration/normalise-validators/minlength.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/minlength.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > minlength', () => {
     
diff --git a/packages/validate/__tests__/integration/normalise-validators/number.js b/packages/validate/__tests__/jest/integration/normalise-validators/number.js
similarity index 95%
rename from packages/validate/__tests__/integration/normalise-validators/number.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/number.js
index c752c76a..510ac863 100644
--- a/packages/validate/__tests__/integration/normalise-validators/number.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/number.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > number', () => {
 
diff --git a/packages/validate/__tests__/integration/normalise-validators/range.js b/packages/validate/__tests__/jest/integration/normalise-validators/range.js
similarity index 92%
rename from packages/validate/__tests__/integration/normalise-validators/range.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/range.js
index 92b47099..b0383623 100644
--- a/packages/validate/__tests__/integration/normalise-validators/range.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/range.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-validators > range', () => {
     
diff --git a/packages/validate/__tests__/integration/normalise-validators/regex-pattern.js b/packages/validate/__tests__/jest/integration/normalise-validators/regex-pattern.js
similarity index 96%
rename from packages/validate/__tests__/integration/normalise-validators/regex-pattern.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/regex-pattern.js
index 8856f011..342b2b09 100644
--- a/packages/validate/__tests__/integration/normalise-validators/regex-pattern.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/regex-pattern.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-validators > regex/pattern ', () => {
     
diff --git a/packages/validate/__tests__/integration/normalise-validators/remote.js b/packages/validate/__tests__/jest/integration/normalise-validators/remote.js
similarity index 96%
rename from packages/validate/__tests__/integration/normalise-validators/remote.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/remote.js
index 643c2607..c1ba9996 100644
--- a/packages/validate/__tests__/integration/normalise-validators/remote.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/remote.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-validators > remote', () => {
     
diff --git a/packages/validate/__tests__/integration/normalise-validators/required.js b/packages/validate/__tests__/jest/integration/normalise-validators/required.js
similarity index 96%
rename from packages/validate/__tests__/integration/normalise-validators/required.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/required.js
index c2aae5bb..49c7f514 100644
--- a/packages/validate/__tests__/integration/normalise-validators/required.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/required.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-validators > required', () => {
     
diff --git a/packages/validate/__tests__/integration/normalise-validators/stringlength.js b/packages/validate/__tests__/jest/integration/normalise-validators/stringlength.js
similarity index 91%
rename from packages/validate/__tests__/integration/normalise-validators/stringlength.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/stringlength.js
index f1d99695..e59bdb55 100644
--- a/packages/validate/__tests__/integration/normalise-validators/stringlength.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/stringlength.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > stringlength', () => {
     
diff --git a/packages/validate/__tests__/integration/normalise-validators/url.js b/packages/validate/__tests__/jest/integration/normalise-validators/url.js
similarity index 95%
rename from packages/validate/__tests__/integration/normalise-validators/url.js
rename to packages/validate/__tests__/jest/integration/normalise-validators/url.js
index d5f8fd0d..c39af7bf 100644
--- a/packages/validate/__tests__/integration/normalise-validators/url.js
+++ b/packages/validate/__tests__/jest/integration/normalise-validators/url.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../src/lib/validator';
+import { normaliseValidators } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-validators > url', () => {
     it('should return the correct validation model for HTML5 url', async () => {
diff --git a/packages/validate/__tests__/integration/plugins/date.js b/packages/validate/__tests__/jest/integration/plugins/date.js
similarity index 97%
rename from packages/validate/__tests__/integration/plugins/date.js
rename to packages/validate/__tests__/jest/integration/plugins/date.js
index 254fa9c0..11116ec5 100644
--- a/packages/validate/__tests__/integration/plugins/date.js
+++ b/packages/validate/__tests__/jest/integration/plugins/date.js
@@ -1,561 +1,561 @@
-import validate from '../../../src';
-import { isValidDate, isFutureDate, isPastDate } from '../../../src/lib/plugins/methods/date';
-
-describe('Validate > Integration > Plugins > Valid Date', () => {
-
-    it('should add a validation method to a group', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form class="form">
-            <fieldset>
-                <legend>
-                    <span>Date</span>
-                    <span data-valmsg-for="date" id="date-error-message"></span>
-                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
-                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
-                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
-                </legend>
-                <div class="flex">
-                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" data-val-required="Enter a day" aria-required="true"/>
-                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" data-val-required="Enter a month" aria-required="true"/>
-                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" data-val-required="Enter a year" aria-required="true" />
-                </div>
-            </fieldset>
-        </form>`;
-        
-        const dateErrorNode = document.querySelector('#date-error-message');
-        const dayInput = document.querySelector('#dateDay');
-        const dayErrorNode = document.querySelector('#date-Day-error-message');
-        const monthInput = document.querySelector('#dateMonth');
-        const monthErrorNode = document.querySelector('#date-Month-error-message');
-        const yearInput = document.querySelector('#dateYear');
-        const yearErrorNode = document.querySelector('#date-Year-error-message');
-        const [ validator ] = validate('form');
-
-        expect(validator.getState().groups).toEqual({
-            dateDay: {
-                serverErrorNode: dayErrorNode,
-                validators: [{ type: 'required', message: 'Enter a day' }],
-                fields: [dayInput],
-                valid: false
-            },
-            dateMonth: {
-                serverErrorNode: monthErrorNode,
-                validators: [{ type: 'required', message: 'Enter a month'  }],
-                fields: [monthInput],
-                valid: false
-            },
-            dateYear: {
-                serverErrorNode: yearErrorNode,
-                validators: [{ type: 'required', message: 'Enter a year'  }],
-                fields: [yearInput],
-                valid: false
-            }
-        });
-        const dateFields = [ dayInput, monthInput, yearInput ];
-        const message = 'Enter a valid date';
-        validator.addMethod('date', isValidDate, message, dateFields);
-
-        expect(validator.getState().groups).toEqual({
-            dateDay: {
-                serverErrorNode: dayErrorNode,
-                validators: [{ type: 'required', message: 'Enter a day' }],
-                fields: [dayInput],
-                valid: false
-            },
-            dateMonth: {
-                serverErrorNode: monthErrorNode,
-                validators: [{ type: 'required', message: 'Enter a month'  }],
-                fields: [monthInput],
-                valid: false
-            },
-            dateYear: {
-                serverErrorNode: yearErrorNode,
-                validators: [{ type: 'required', message: 'Enter a year'  }],
-                fields: [yearInput],
-                valid: false
-            },
-            date: {
-                serverErrorNode: dateErrorNode,
-                validators: [{ type: 'custom', method: isValidDate, message }],
-                fields: dateFields,
-                valid: false
-            }
-        });
-    });
-
-    it('should return false for a missing day, month, or year', async () => {
-        document.body.innerHTML = `<form class="form">
-            <fieldset>
-                <legend>
-                    <span>Date</span>
-                    <span data-valmsg-for="date" id="date-error-message"></span>
-                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
-                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
-                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
-                </legend>
-                <div class="flex">
-                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="nope" />
-                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="12" />
-                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="2000" />
-                </div>
-            </fieldset>
-        </form>`;
-        
-        const dateErrorNode = document.querySelector('#date-error-message');
-        const dayInput = document.querySelector('#dateDay');
-        const monthInput = document.querySelector('#dateMonth');
-        const yearInput = document.querySelector('#dateYear');
-        const [ validator ] = validate('form');
-
-        const dateFields = [ dayInput, monthInput, yearInput ];
-        const message = 'Enter a valid date';
-        validator.addMethod('date', isValidDate, message, dateFields);
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        expect(dateErrorNode.textContent).toEqual(message);
-    });
-
-    it('should return false for an impossible date', async () => {
-        document.body.innerHTML = `<form class="form">
-            <fieldset>
-                <legend>
-                    <span>Date</span>
-                    <span data-valmsg-for="date" id="date-error-message"></span>
-                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
-                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
-                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
-                </legend>
-                <div class="flex">
-                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="31" />
-                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="02" />
-                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="2000" />
-                </div>
-            </fieldset>
-        </form>`;
-        
-        const dateErrorNode = document.querySelector('#date-error-message');
-        const dayInput = document.querySelector('#dateDay');
-        const monthInput = document.querySelector('#dateMonth');
-        const yearInput = document.querySelector('#dateYear');
-        const [ validator ] = validate('form');
-
-        const dateFields = [ dayInput, monthInput, yearInput ];
-        const message = 'Enter a valid date';
-        validator.addMethod('date', isValidDate, message, dateFields);
-
-        const invalidDates = [
-            ['-1', '1', '2000'],
-            ['32', '1', '2000'],
-            ['31', '2', '2000'],
-            ['29', '2', '2021'],
-            ['01', '13', '2021']
-        ];
-
-        await Promise.all(invalidDates.map(async testcase => {
-            dayInput.value = testcase[0];
-            monthInput.value = testcase[1];
-            yearInput.value = testcase[2];
-            const validityState = await validator.validate();
-            expect(validityState).toEqual(false);
-            expect(dateErrorNode.textContent).toEqual(message);
-        }));
-    });
-
-    it('should return true for a valid date', async () => {
-        document.body.innerHTML = `<form class="form">
-            <fieldset>
-                <legend>
-                    <span>Date</span>
-                    <span data-valmsg-for="date" id="date-error-message"></span>
-                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
-                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
-                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
-                </legend>
-                <div class="flex">
-                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="28" />
-                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="02" />
-                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="2000" />
-                </div>
-            </fieldset>
-        </form>`;
-        
-        const dayInput = document.querySelector('#dateDay');
-        const monthInput = document.querySelector('#dateMonth');
-        const yearInput = document.querySelector('#dateYear');
-        const [ validator ] = validate('form');
-
-        const dateFields = [ dayInput, monthInput, yearInput ];
-        const message = 'Enter a valid date';
-        validator.addMethod('date', isValidDate, message, dateFields);
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
-
-});
-
-describe('Validate > Integration > Plugins > Date in future', () => {
-
-    it('should add a validation method to a group', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form class="form">
-            <fieldset>
-                <legend>
-                    <span>Date</span>
-                    <span data-valmsg-for="date" id="date-error-message"></span>
-                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
-                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
-                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
-                </legend>
-                <div class="flex">
-                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" data-val-required="Enter a day" aria-required="true"/>
-                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" data-val-required="Enter a month" aria-required="true"/>
-                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" data-val-required="Enter a year" aria-required="true" />
-                </div>
-            </fieldset>
-        </form>`;
-        
-        const dateErrorNode = document.querySelector('#date-error-message');
-        const dayInput = document.querySelector('#dateDay');
-        const dayErrorNode = document.querySelector('#date-Day-error-message');
-        const monthInput = document.querySelector('#dateMonth');
-        const monthErrorNode = document.querySelector('#date-Month-error-message');
-        const yearInput = document.querySelector('#dateYear');
-        const yearErrorNode = document.querySelector('#date-Year-error-message');
-        const [ validator ] = validate('form');
-
-        expect(validator.getState().groups).toEqual({
-            dateDay: {
-                serverErrorNode: dayErrorNode,
-                validators: [{ type: 'required', message: 'Enter a day' }],
-                fields: [dayInput],
-                valid: false
-            },
-            dateMonth: {
-                serverErrorNode: monthErrorNode,
-                validators: [{ type: 'required', message: 'Enter a month'  }],
-                fields: [monthInput],
-                valid: false
-            },
-            dateYear: {
-                serverErrorNode: yearErrorNode,
-                validators: [{ type: 'required', message: 'Enter a year'  }],
-                fields: [yearInput],
-                valid: false
-            }
-        });
-        const dateFields = [ dayInput, monthInput, yearInput ];
-        const message = 'Enter a date in the future';
-        validator.addMethod('date', isFutureDate, message, dateFields);
-
-        expect(validator.getState().groups).toEqual({
-            dateDay: {
-                serverErrorNode: dayErrorNode,
-                validators: [{ type: 'required', message: 'Enter a day' }],
-                fields: [dayInput],
-                valid: false
-            },
-            dateMonth: {
-                serverErrorNode: monthErrorNode,
-                validators: [{ type: 'required', message: 'Enter a month'  }],
-                fields: [monthInput],
-                valid: false
-            },
-            dateYear: {
-                serverErrorNode: yearErrorNode,
-                validators: [{ type: 'required', message: 'Enter a year'  }],
-                fields: [yearInput],
-                valid: false
-            },
-            date: {
-                serverErrorNode: dateErrorNode,
-                validators: [{ type: 'custom', method: isFutureDate, message }],
-                fields: dateFields,
-                valid: false
-            }
-        });
-    });
-
-    it('should return false for a date in the past', async () => {
-        document.body.innerHTML = `<form class="form">
-            <fieldset>
-                <legend>
-                    <span>Date</span>
-                    <span data-valmsg-for="date" id="date-error-message"></span>
-                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
-                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
-                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
-                </legend>
-                <div class="flex">
-                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="01" />
-                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="02" />
-                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="2000" />
-                </div>
-            </fieldset>
-        </form>`;
-        
-        const dateErrorNode = document.querySelector('#date-error-message');
-        const dayInput = document.querySelector('#dateDay');
-        const monthInput = document.querySelector('#dateMonth');
-        const yearInput = document.querySelector('#dateYear');
-        const [ validator ] = validate('form');
-
-        const dateFields = [ dayInput, monthInput, yearInput ];
-        const message = 'Enter a date in the future';
-        validator.addMethod('date', isFutureDate, message, dateFields);
-
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        expect(dateErrorNode.textContent).toEqual(message);
-    });
-
-    it('should return true for a date in the future', async () => {
-        const currentDateYear = new Date().getFullYear();
-
-        document.body.innerHTML = `<form class="form">
-            <fieldset>
-                <legend>
-                    <span>Date</span>
-                    <span data-valmsg-for="date" id="date-error-message"></span>
-                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
-                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
-                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
-                </legend>
-                <div class="flex">
-                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="28" />
-                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="02" />
-                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="${currentDateYear+1}" />
-                </div>
-            </fieldset>
-        </form>`;
-        
-        const dayInput = document.querySelector('#dateDay');
-        const monthInput = document.querySelector('#dateMonth');
-        const yearInput = document.querySelector('#dateYear');
-        const [ validator ] = validate('form');
-
-        const dateFields = [ dayInput, monthInput, yearInput ];
-        const message = 'Enter a date in the future';
-        validator.addMethod('date', isFutureDate, message, dateFields);
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
-    it('should return false for todays date', async () => {
-        const currentDateYear = new Date().getFullYear();
-        const currentDateMonth = new Date().getMonth() + 1;
-        const currentDateDay = new Date().getDate();
-
-        document.body.innerHTML = `<form class="form">
-            <fieldset>
-                <legend>
-                    <span>Date</span>
-                    <span data-valmsg-for="date" id="date-error-message"></span>
-                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
-                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
-                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
-                </legend>
-                <div class="flex">
-                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="${currentDateDay}" />
-                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="${currentDateMonth}" />
-                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="${currentDateYear}" />
-                </div>
-            </fieldset>
-        </form>`;
-        
-        const dayInput = document.querySelector('#dateDay');
-        const monthInput = document.querySelector('#dateMonth');
-        const yearInput = document.querySelector('#dateYear');
-        const [ validator ] = validate('form');
-
-        const dateFields = [ dayInput, monthInput, yearInput ];
-        const message = 'Enter a date in the future';
-        validator.addMethod('date', isFutureDate, message, dateFields);
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-    });
-
-});
-
-describe('Validate > Integration > Plugins > Date in Past', () => {
-
-    it('should add a validation method to a group', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form class="form">
-            <fieldset>
-                <legend>
-                    <span>Date</span>
-                    <span data-valmsg-for="date" id="date-error-message"></span>
-                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
-                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
-                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
-                </legend>
-                <div class="flex">
-                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" data-val-required="Enter a day" aria-required="true"/>
-                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" data-val-required="Enter a month" aria-required="true"/>
-                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" data-val-required="Enter a year" aria-required="true" />
-                </div>
-            </fieldset>
-        </form>`;
-        
-        const dateErrorNode = document.querySelector('#date-error-message');
-        const dayInput = document.querySelector('#dateDay');
-        const dayErrorNode = document.querySelector('#date-Day-error-message');
-        const monthInput = document.querySelector('#dateMonth');
-        const monthErrorNode = document.querySelector('#date-Month-error-message');
-        const yearInput = document.querySelector('#dateYear');
-        const yearErrorNode = document.querySelector('#date-Year-error-message');
-        const [ validator ] = validate('form');
-
-        expect(validator.getState().groups).toEqual({
-            dateDay: {
-                serverErrorNode: dayErrorNode,
-                validators: [{ type: 'required', message: 'Enter a day' }],
-                fields: [dayInput],
-                valid: false
-            },
-            dateMonth: {
-                serverErrorNode: monthErrorNode,
-                validators: [{ type: 'required', message: 'Enter a month'  }],
-                fields: [monthInput],
-                valid: false
-            },
-            dateYear: {
-                serverErrorNode: yearErrorNode,
-                validators: [{ type: 'required', message: 'Enter a year'  }],
-                fields: [yearInput],
-                valid: false
-            }
-        });
-        const dateFields = [ dayInput, monthInput, yearInput ];
-        const message = 'Enter a date in the past';
-        validator.addMethod('date', isPastDate, message, dateFields);
-
-        expect(validator.getState().groups).toEqual({
-            dateDay: {
-                serverErrorNode: dayErrorNode,
-                validators: [{ type: 'required', message: 'Enter a day' }],
-                fields: [dayInput],
-                valid: false
-            },
-            dateMonth: {
-                serverErrorNode: monthErrorNode,
-                validators: [{ type: 'required', message: 'Enter a month'  }],
-                fields: [monthInput],
-                valid: false
-            },
-            dateYear: {
-                serverErrorNode: yearErrorNode,
-                validators: [{ type: 'required', message: 'Enter a year'  }],
-                fields: [yearInput],
-                valid: false
-            },
-            date: {
-                serverErrorNode: dateErrorNode,
-                validators: [{ type: 'custom', method: isPastDate, message }],
-                fields: dateFields,
-                valid: false
-            }
-        });
-    });
-
-    it('should return false for a date in the future', async () => {
-        const currentDateYear = new Date().getFullYear();
-        document.body.innerHTML = `<form class="form">
-            <fieldset>
-                <legend>
-                    <span>Date</span>
-                    <span data-valmsg-for="date" id="date-error-message"></span>
-                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
-                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
-                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
-                </legend>
-                <div class="flex">
-                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="01" />
-                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="02" />
-                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="${currentDateYear+1}" />
-                </div>
-            </fieldset>
-        </form>`;
-        
-        const dateErrorNode = document.querySelector('#date-error-message');
-        const dayInput = document.querySelector('#dateDay');
-        const monthInput = document.querySelector('#dateMonth');
-        const yearInput = document.querySelector('#dateYear');
-        const [ validator ] = validate('form');
-
-        const dateFields = [ dayInput, monthInput, yearInput ];
-        const message = 'Enter a date in the past';
-        validator.addMethod('date', isPastDate, message, dateFields);
-
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        expect(dateErrorNode.textContent).toEqual(message);
-    });
-
-    it('should return true for a date in the past', async () => {
-        document.body.innerHTML = `<form class="form">
-            <fieldset>
-                <legend>
-                    <span>Date</span>
-                    <span data-valmsg-for="date" id="date-error-message"></span>
-                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
-                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
-                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
-                </legend>
-                <div class="flex">
-                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="28" />
-                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="02" />
-                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="2000" />
-                </div>
-            </fieldset>
-        </form>`;
-        
-        const dayInput = document.querySelector('#dateDay');
-        const monthInput = document.querySelector('#dateMonth');
-        const yearInput = document.querySelector('#dateYear');
-        const [ validator ] = validate('form');
-
-        const dateFields = [ dayInput, monthInput, yearInput ];
-        const message = 'Enter a date in the past';
-        validator.addMethod('date', isPastDate, message, dateFields);
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
-    it('should return true for todays date', async () => {
-        const currentDateYear = new Date().getFullYear();
-        const currentDateMonth = new Date().getMonth() + 1;
-        const currentDateDay = new Date().getDate();
-
-        document.body.innerHTML = `<form class="form">
-            <fieldset>
-                <legend>
-                    <span>Date</span>
-                    <span data-valmsg-for="date" id="date-error-message"></span>
-                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
-                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
-                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
-                </legend>
-                <div class="flex">
-                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="${currentDateDay}" />
-                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="${currentDateMonth}" />
-                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="${currentDateYear}" />
-                </div>
-            </fieldset>
-        </form>`;
-        
-        const dayInput = document.querySelector('#dateDay');
-        const monthInput = document.querySelector('#dateMonth');
-        const yearInput = document.querySelector('#dateYear');
-        const [ validator ] = validate('form');
-
-        const dateFields = [ dayInput, monthInput, yearInput ];
-        const message = 'Enter a date in the past';
-        validator.addMethod('date', isPastDate, message, dateFields);
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
-
+import validate from '../../../../src';
+import { isValidDate, isFutureDate, isPastDate } from '../../../../src/lib/plugins/methods/date';
+
+describe('Validate > Integration > Plugins > Valid Date', () => {
+
+    it('should add a validation method to a group', async () => {
+        expect.assertions(2);
+        document.body.innerHTML = `<form class="form">
+            <fieldset>
+                <legend>
+                    <span>Date</span>
+                    <span data-valmsg-for="date" id="date-error-message"></span>
+                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
+                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
+                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
+                </legend>
+                <div class="flex">
+                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" data-val-required="Enter a day" aria-required="true"/>
+                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" data-val-required="Enter a month" aria-required="true"/>
+                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" data-val-required="Enter a year" aria-required="true" />
+                </div>
+            </fieldset>
+        </form>`;
+        
+        const dateErrorNode = document.querySelector('#date-error-message');
+        const dayInput = document.querySelector('#dateDay');
+        const dayErrorNode = document.querySelector('#date-Day-error-message');
+        const monthInput = document.querySelector('#dateMonth');
+        const monthErrorNode = document.querySelector('#date-Month-error-message');
+        const yearInput = document.querySelector('#dateYear');
+        const yearErrorNode = document.querySelector('#date-Year-error-message');
+        const [ validator ] = validate('form');
+
+        expect(validator.getState().groups).toEqual({
+            dateDay: {
+                serverErrorNode: dayErrorNode,
+                validators: [{ type: 'required', message: 'Enter a day' }],
+                fields: [dayInput],
+                valid: false
+            },
+            dateMonth: {
+                serverErrorNode: monthErrorNode,
+                validators: [{ type: 'required', message: 'Enter a month'  }],
+                fields: [monthInput],
+                valid: false
+            },
+            dateYear: {
+                serverErrorNode: yearErrorNode,
+                validators: [{ type: 'required', message: 'Enter a year'  }],
+                fields: [yearInput],
+                valid: false
+            }
+        });
+        const dateFields = [ dayInput, monthInput, yearInput ];
+        const message = 'Enter a valid date';
+        validator.addMethod('date', isValidDate, message, dateFields);
+
+        expect(validator.getState().groups).toEqual({
+            dateDay: {
+                serverErrorNode: dayErrorNode,
+                validators: [{ type: 'required', message: 'Enter a day' }],
+                fields: [dayInput],
+                valid: false
+            },
+            dateMonth: {
+                serverErrorNode: monthErrorNode,
+                validators: [{ type: 'required', message: 'Enter a month'  }],
+                fields: [monthInput],
+                valid: false
+            },
+            dateYear: {
+                serverErrorNode: yearErrorNode,
+                validators: [{ type: 'required', message: 'Enter a year'  }],
+                fields: [yearInput],
+                valid: false
+            },
+            date: {
+                serverErrorNode: dateErrorNode,
+                validators: [{ type: 'custom', method: isValidDate, message }],
+                fields: dateFields,
+                valid: false
+            }
+        });
+    });
+
+    it('should return false for a missing day, month, or year', async () => {
+        document.body.innerHTML = `<form class="form">
+            <fieldset>
+                <legend>
+                    <span>Date</span>
+                    <span data-valmsg-for="date" id="date-error-message"></span>
+                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
+                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
+                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
+                </legend>
+                <div class="flex">
+                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="nope" />
+                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="12" />
+                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="2000" />
+                </div>
+            </fieldset>
+        </form>`;
+        
+        const dateErrorNode = document.querySelector('#date-error-message');
+        const dayInput = document.querySelector('#dateDay');
+        const monthInput = document.querySelector('#dateMonth');
+        const yearInput = document.querySelector('#dateYear');
+        const [ validator ] = validate('form');
+
+        const dateFields = [ dayInput, monthInput, yearInput ];
+        const message = 'Enter a valid date';
+        validator.addMethod('date', isValidDate, message, dateFields);
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        expect(dateErrorNode.textContent).toEqual(message);
+    });
+
+    it('should return false for an impossible date', async () => {
+        document.body.innerHTML = `<form class="form">
+            <fieldset>
+                <legend>
+                    <span>Date</span>
+                    <span data-valmsg-for="date" id="date-error-message"></span>
+                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
+                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
+                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
+                </legend>
+                <div class="flex">
+                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="31" />
+                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="02" />
+                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="2000" />
+                </div>
+            </fieldset>
+        </form>`;
+        
+        const dateErrorNode = document.querySelector('#date-error-message');
+        const dayInput = document.querySelector('#dateDay');
+        const monthInput = document.querySelector('#dateMonth');
+        const yearInput = document.querySelector('#dateYear');
+        const [ validator ] = validate('form');
+
+        const dateFields = [ dayInput, monthInput, yearInput ];
+        const message = 'Enter a valid date';
+        validator.addMethod('date', isValidDate, message, dateFields);
+
+        const invalidDates = [
+            ['-1', '1', '2000'],
+            ['32', '1', '2000'],
+            ['31', '2', '2000'],
+            ['29', '2', '2021'],
+            ['01', '13', '2021']
+        ];
+
+        await Promise.all(invalidDates.map(async testcase => {
+            dayInput.value = testcase[0];
+            monthInput.value = testcase[1];
+            yearInput.value = testcase[2];
+            const validityState = await validator.validate();
+            expect(validityState).toEqual(false);
+            expect(dateErrorNode.textContent).toEqual(message);
+        }));
+    });
+
+    it('should return true for a valid date', async () => {
+        document.body.innerHTML = `<form class="form">
+            <fieldset>
+                <legend>
+                    <span>Date</span>
+                    <span data-valmsg-for="date" id="date-error-message"></span>
+                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
+                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
+                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
+                </legend>
+                <div class="flex">
+                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="28" />
+                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="02" />
+                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="2000" />
+                </div>
+            </fieldset>
+        </form>`;
+        
+        const dayInput = document.querySelector('#dateDay');
+        const monthInput = document.querySelector('#dateMonth');
+        const yearInput = document.querySelector('#dateYear');
+        const [ validator ] = validate('form');
+
+        const dateFields = [ dayInput, monthInput, yearInput ];
+        const message = 'Enter a valid date';
+        validator.addMethod('date', isValidDate, message, dateFields);
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
+
+});
+
+describe('Validate > Integration > Plugins > Date in future', () => {
+
+    it('should add a validation method to a group', async () => {
+        expect.assertions(2);
+        document.body.innerHTML = `<form class="form">
+            <fieldset>
+                <legend>
+                    <span>Date</span>
+                    <span data-valmsg-for="date" id="date-error-message"></span>
+                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
+                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
+                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
+                </legend>
+                <div class="flex">
+                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" data-val-required="Enter a day" aria-required="true"/>
+                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" data-val-required="Enter a month" aria-required="true"/>
+                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" data-val-required="Enter a year" aria-required="true" />
+                </div>
+            </fieldset>
+        </form>`;
+        
+        const dateErrorNode = document.querySelector('#date-error-message');
+        const dayInput = document.querySelector('#dateDay');
+        const dayErrorNode = document.querySelector('#date-Day-error-message');
+        const monthInput = document.querySelector('#dateMonth');
+        const monthErrorNode = document.querySelector('#date-Month-error-message');
+        const yearInput = document.querySelector('#dateYear');
+        const yearErrorNode = document.querySelector('#date-Year-error-message');
+        const [ validator ] = validate('form');
+
+        expect(validator.getState().groups).toEqual({
+            dateDay: {
+                serverErrorNode: dayErrorNode,
+                validators: [{ type: 'required', message: 'Enter a day' }],
+                fields: [dayInput],
+                valid: false
+            },
+            dateMonth: {
+                serverErrorNode: monthErrorNode,
+                validators: [{ type: 'required', message: 'Enter a month'  }],
+                fields: [monthInput],
+                valid: false
+            },
+            dateYear: {
+                serverErrorNode: yearErrorNode,
+                validators: [{ type: 'required', message: 'Enter a year'  }],
+                fields: [yearInput],
+                valid: false
+            }
+        });
+        const dateFields = [ dayInput, monthInput, yearInput ];
+        const message = 'Enter a date in the future';
+        validator.addMethod('date', isFutureDate, message, dateFields);
+
+        expect(validator.getState().groups).toEqual({
+            dateDay: {
+                serverErrorNode: dayErrorNode,
+                validators: [{ type: 'required', message: 'Enter a day' }],
+                fields: [dayInput],
+                valid: false
+            },
+            dateMonth: {
+                serverErrorNode: monthErrorNode,
+                validators: [{ type: 'required', message: 'Enter a month'  }],
+                fields: [monthInput],
+                valid: false
+            },
+            dateYear: {
+                serverErrorNode: yearErrorNode,
+                validators: [{ type: 'required', message: 'Enter a year'  }],
+                fields: [yearInput],
+                valid: false
+            },
+            date: {
+                serverErrorNode: dateErrorNode,
+                validators: [{ type: 'custom', method: isFutureDate, message }],
+                fields: dateFields,
+                valid: false
+            }
+        });
+    });
+
+    it('should return false for a date in the past', async () => {
+        document.body.innerHTML = `<form class="form">
+            <fieldset>
+                <legend>
+                    <span>Date</span>
+                    <span data-valmsg-for="date" id="date-error-message"></span>
+                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
+                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
+                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
+                </legend>
+                <div class="flex">
+                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="01" />
+                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="02" />
+                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="2000" />
+                </div>
+            </fieldset>
+        </form>`;
+        
+        const dateErrorNode = document.querySelector('#date-error-message');
+        const dayInput = document.querySelector('#dateDay');
+        const monthInput = document.querySelector('#dateMonth');
+        const yearInput = document.querySelector('#dateYear');
+        const [ validator ] = validate('form');
+
+        const dateFields = [ dayInput, monthInput, yearInput ];
+        const message = 'Enter a date in the future';
+        validator.addMethod('date', isFutureDate, message, dateFields);
+
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        expect(dateErrorNode.textContent).toEqual(message);
+    });
+
+    it('should return true for a date in the future', async () => {
+        const currentDateYear = new Date().getFullYear();
+
+        document.body.innerHTML = `<form class="form">
+            <fieldset>
+                <legend>
+                    <span>Date</span>
+                    <span data-valmsg-for="date" id="date-error-message"></span>
+                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
+                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
+                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
+                </legend>
+                <div class="flex">
+                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="28" />
+                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="02" />
+                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="${currentDateYear+1}" />
+                </div>
+            </fieldset>
+        </form>`;
+        
+        const dayInput = document.querySelector('#dateDay');
+        const monthInput = document.querySelector('#dateMonth');
+        const yearInput = document.querySelector('#dateYear');
+        const [ validator ] = validate('form');
+
+        const dateFields = [ dayInput, monthInput, yearInput ];
+        const message = 'Enter a date in the future';
+        validator.addMethod('date', isFutureDate, message, dateFields);
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
+    it('should return false for todays date', async () => {
+        const currentDateYear = new Date().getFullYear();
+        const currentDateMonth = new Date().getMonth() + 1;
+        const currentDateDay = new Date().getDate();
+
+        document.body.innerHTML = `<form class="form">
+            <fieldset>
+                <legend>
+                    <span>Date</span>
+                    <span data-valmsg-for="date" id="date-error-message"></span>
+                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
+                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
+                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
+                </legend>
+                <div class="flex">
+                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="${currentDateDay}" />
+                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="${currentDateMonth}" />
+                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="${currentDateYear}" />
+                </div>
+            </fieldset>
+        </form>`;
+        
+        const dayInput = document.querySelector('#dateDay');
+        const monthInput = document.querySelector('#dateMonth');
+        const yearInput = document.querySelector('#dateYear');
+        const [ validator ] = validate('form');
+
+        const dateFields = [ dayInput, monthInput, yearInput ];
+        const message = 'Enter a date in the future';
+        validator.addMethod('date', isFutureDate, message, dateFields);
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+    });
+
+});
+
+describe('Validate > Integration > Plugins > Date in Past', () => {
+
+    it('should add a validation method to a group', async () => {
+        expect.assertions(2);
+        document.body.innerHTML = `<form class="form">
+            <fieldset>
+                <legend>
+                    <span>Date</span>
+                    <span data-valmsg-for="date" id="date-error-message"></span>
+                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
+                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
+                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
+                </legend>
+                <div class="flex">
+                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" data-val-required="Enter a day" aria-required="true"/>
+                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" data-val-required="Enter a month" aria-required="true"/>
+                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" data-val-required="Enter a year" aria-required="true" />
+                </div>
+            </fieldset>
+        </form>`;
+        
+        const dateErrorNode = document.querySelector('#date-error-message');
+        const dayInput = document.querySelector('#dateDay');
+        const dayErrorNode = document.querySelector('#date-Day-error-message');
+        const monthInput = document.querySelector('#dateMonth');
+        const monthErrorNode = document.querySelector('#date-Month-error-message');
+        const yearInput = document.querySelector('#dateYear');
+        const yearErrorNode = document.querySelector('#date-Year-error-message');
+        const [ validator ] = validate('form');
+
+        expect(validator.getState().groups).toEqual({
+            dateDay: {
+                serverErrorNode: dayErrorNode,
+                validators: [{ type: 'required', message: 'Enter a day' }],
+                fields: [dayInput],
+                valid: false
+            },
+            dateMonth: {
+                serverErrorNode: monthErrorNode,
+                validators: [{ type: 'required', message: 'Enter a month'  }],
+                fields: [monthInput],
+                valid: false
+            },
+            dateYear: {
+                serverErrorNode: yearErrorNode,
+                validators: [{ type: 'required', message: 'Enter a year'  }],
+                fields: [yearInput],
+                valid: false
+            }
+        });
+        const dateFields = [ dayInput, monthInput, yearInput ];
+        const message = 'Enter a date in the past';
+        validator.addMethod('date', isPastDate, message, dateFields);
+
+        expect(validator.getState().groups).toEqual({
+            dateDay: {
+                serverErrorNode: dayErrorNode,
+                validators: [{ type: 'required', message: 'Enter a day' }],
+                fields: [dayInput],
+                valid: false
+            },
+            dateMonth: {
+                serverErrorNode: monthErrorNode,
+                validators: [{ type: 'required', message: 'Enter a month'  }],
+                fields: [monthInput],
+                valid: false
+            },
+            dateYear: {
+                serverErrorNode: yearErrorNode,
+                validators: [{ type: 'required', message: 'Enter a year'  }],
+                fields: [yearInput],
+                valid: false
+            },
+            date: {
+                serverErrorNode: dateErrorNode,
+                validators: [{ type: 'custom', method: isPastDate, message }],
+                fields: dateFields,
+                valid: false
+            }
+        });
+    });
+
+    it('should return false for a date in the future', async () => {
+        const currentDateYear = new Date().getFullYear();
+        document.body.innerHTML = `<form class="form">
+            <fieldset>
+                <legend>
+                    <span>Date</span>
+                    <span data-valmsg-for="date" id="date-error-message"></span>
+                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
+                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
+                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
+                </legend>
+                <div class="flex">
+                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="01" />
+                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="02" />
+                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="${currentDateYear+1}" />
+                </div>
+            </fieldset>
+        </form>`;
+        
+        const dateErrorNode = document.querySelector('#date-error-message');
+        const dayInput = document.querySelector('#dateDay');
+        const monthInput = document.querySelector('#dateMonth');
+        const yearInput = document.querySelector('#dateYear');
+        const [ validator ] = validate('form');
+
+        const dateFields = [ dayInput, monthInput, yearInput ];
+        const message = 'Enter a date in the past';
+        validator.addMethod('date', isPastDate, message, dateFields);
+
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        expect(dateErrorNode.textContent).toEqual(message);
+    });
+
+    it('should return true for a date in the past', async () => {
+        document.body.innerHTML = `<form class="form">
+            <fieldset>
+                <legend>
+                    <span>Date</span>
+                    <span data-valmsg-for="date" id="date-error-message"></span>
+                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
+                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
+                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
+                </legend>
+                <div class="flex">
+                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="28" />
+                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="02" />
+                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="2000" />
+                </div>
+            </fieldset>
+        </form>`;
+        
+        const dayInput = document.querySelector('#dateDay');
+        const monthInput = document.querySelector('#dateMonth');
+        const yearInput = document.querySelector('#dateYear');
+        const [ validator ] = validate('form');
+
+        const dateFields = [ dayInput, monthInput, yearInput ];
+        const message = 'Enter a date in the past';
+        validator.addMethod('date', isPastDate, message, dateFields);
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
+    it('should return true for todays date', async () => {
+        const currentDateYear = new Date().getFullYear();
+        const currentDateMonth = new Date().getMonth() + 1;
+        const currentDateDay = new Date().getDate();
+
+        document.body.innerHTML = `<form class="form">
+            <fieldset>
+                <legend>
+                    <span>Date</span>
+                    <span data-valmsg-for="date" id="date-error-message"></span>
+                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
+                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
+                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
+                </legend>
+                <div class="flex">
+                    <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" value="${currentDateDay}" />
+                    <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" value="${currentDateMonth}" />
+                    <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" value="${currentDateYear}" />
+                </div>
+            </fieldset>
+        </form>`;
+        
+        const dayInput = document.querySelector('#dateDay');
+        const monthInput = document.querySelector('#dateMonth');
+        const yearInput = document.querySelector('#dateYear');
+        const [ validator ] = validate('form');
+
+        const dateFields = [ dayInput, monthInput, yearInput ];
+        const message = 'Enter a date in the past';
+        validator.addMethod('date', isPastDate, message, dateFields);
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/plugins/luhn.js b/packages/validate/__tests__/jest/integration/plugins/luhn.js
similarity index 95%
rename from packages/validate/__tests__/integration/plugins/luhn.js
rename to packages/validate/__tests__/jest/integration/plugins/luhn.js
index 8665ab92..a4d10a31 100644
--- a/packages/validate/__tests__/integration/plugins/luhn.js
+++ b/packages/validate/__tests__/jest/integration/plugins/luhn.js
@@ -1,123 +1,123 @@
-import validate from '../../../src';
-import luhn from '../../../src/lib/plugins/methods/luhn';
-
-describe('Validate > Integration > Plugins > Luhn', () => {
-
-    it('should add a validation method to a group', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                required
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const [ validator ] = validate('form');
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-        const message = 'Custom error';
-        validator.addMethod('group1', luhn, message);
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }, { type: 'custom', method: luhn, message }],
-                fields: [input],
-                valid: false
-            }
-        });
-    });
-
-    it('should not validate a clean optional field', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                type="text" />
-        </form>`;
-        const [ validator ] = validate('form');
-        const message = 'Custom error';
-        validator.addMethod('group1', luhn, message);
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(true);
-    });
-
-    it('should return false for a malformed credit card number', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value="123456789"
-                type="text" />
-        </form>`;
-        const [ validator ] = validate('form');
-        const message = 'Custom error';
-        validator.addMethod('group1', luhn, message);
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-    });
-
-    it('should return true for valid credit card numbers', async () => {
-        const formats = {
-            'American Express': 378282246310005,
-            'American Express 2': 371449635398431,
-            'American Express Corporate': 378734493671000,
-            'Australian BankCard': 5610591081018250,
-            'Diners Club': 30569309025904,
-            Discover: 6011111111111117,
-            'Discover 2': 6011000990139424,
-            JCB: 3530111333300000,
-            'JCB 2': 3566002020360505,
-            MasterCard: 5555555555554444,
-            'MasterCard 2': 5105105105105100,
-            Visa: 4111111111111111,
-            'Visa 2': 4012888888881881
-        };
-        expect.assertions(Object.values(formats).length);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                required
-                type="text" />
-        </form>`;
-        const [ validator ] = validate('form');
-        const field  = document.querySelector('#group1-1');
-        const message = 'Custom error';
-        validator.addMethod('group1', luhn, message);
-
-        for (let format in formats) {
-            field.value = formats[format];
-            const validityState = await validator.validate();
-            expect(validityState).toEqual(true);
-        }
-
-        // Alternative implementation of the test... 
-        // const validityStates = await Promise.all(Object.values(formats).map(format => async () => {
-        //     field.value = formats[format];
-        //     return await validator.validate();
-        // }));
-
-        // const aggregage = validityStates.reduce((acc, curr) => !curr ? false : acc, true);
-        // expect(aggregage).toEqual(true);
-    });
-
+import validate from '../../../../src';
+import luhn from '../../../../src/lib/plugins/methods/luhn';
+
+describe('Validate > Integration > Plugins > Luhn', () => {
+
+    it('should add a validation method to a group', async () => {
+        expect.assertions(2);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                required
+                type="text" />
+        </form>`;
+        // const form = document.querySelector('.form');
+        const input = document.querySelector('#group1-1');
+        const [ validator ] = validate('form');
+
+        expect(validator.getState().groups).toEqual({
+            group1: {
+                serverErrorNode: false,
+                validators: [{ type: 'required' }],
+                fields: [input],
+                valid: false
+            }
+        });
+        const message = 'Custom error';
+        validator.addMethod('group1', luhn, message);
+
+        expect(validator.getState().groups).toEqual({
+            group1: {
+                serverErrorNode: false,
+                validators: [{ type: 'required' }, { type: 'custom', method: luhn, message }],
+                fields: [input],
+                valid: false
+            }
+        });
+    });
+
+    it('should not validate a clean optional field', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                type="text" />
+        </form>`;
+        const [ validator ] = validate('form');
+        const message = 'Custom error';
+        validator.addMethod('group1', luhn, message);
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(true);
+    });
+
+    it('should return false for a malformed credit card number', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value="123456789"
+                type="text" />
+        </form>`;
+        const [ validator ] = validate('form');
+        const message = 'Custom error';
+        validator.addMethod('group1', luhn, message);
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+    });
+
+    it('should return true for valid credit card numbers', async () => {
+        const formats = {
+            'American Express': 378282246310005,
+            'American Express 2': 371449635398431,
+            'American Express Corporate': 378734493671000,
+            'Australian BankCard': 5610591081018250,
+            'Diners Club': 30569309025904,
+            Discover: 6011111111111117,
+            'Discover 2': 6011000990139424,
+            JCB: 3530111333300000,
+            'JCB 2': 3566002020360505,
+            MasterCard: 5555555555554444,
+            'MasterCard 2': 5105105105105100,
+            Visa: 4111111111111111,
+            'Visa 2': 4012888888881881
+        };
+        expect.assertions(Object.values(formats).length);
+        document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                required
+                type="text" />
+        </form>`;
+        const [ validator ] = validate('form');
+        const field  = document.querySelector('#group1-1');
+        const message = 'Custom error';
+        validator.addMethod('group1', luhn, message);
+
+        for (let format in formats) {
+            field.value = formats[format];
+            const validityState = await validator.validate();
+            expect(validityState).toEqual(true);
+        }
+
+        // Alternative implementation of the test... 
+        // const validityStates = await Promise.all(Object.values(formats).map(format => async () => {
+        //     field.value = formats[format];
+        //     return await validator.validate();
+        // }));
+
+        // const aggregage = validityStates.reduce((acc, curr) => !curr ? false : acc, true);
+        // expect(aggregage).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/real-time/index.js b/packages/validate/__tests__/jest/integration/real-time/index.js
similarity index 94%
rename from packages/validate/__tests__/integration/real-time/index.js
rename to packages/validate/__tests__/jest/integration/real-time/index.js
index f0c72891..2bac39ad 100644
--- a/packages/validate/__tests__/integration/real-time/index.js
+++ b/packages/validate/__tests__/jest/integration/real-time/index.js
@@ -1,138 +1,138 @@
-import validate from '../../../src';
-import defaults from '../../../src/lib/defaults';
-import { DOTNET_CLASSNAMES } from '../../../src/lib/constants';
-
-
-describe('Validate > Integration > Real-time', () => {
-
-    it('should start real-time validation after first form submission', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form method="post" action="">
-            <label for="group1">Group1</label>
-            <input
-                id="group1"
-                name="group1"
-                value=""
-                required>
-        </form>`;
-
-        const form = document.querySelector('form');
-        const [ validator ] = validate(form);
-        await validator.validate();
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        expect(validator.getState().realTimeValidation).toEqual(true);
-    });
-
-    it('should remove error message and not replace if field is valid', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form method="post" action="">
-            <label for="group1">Group1</label>
-            <input
-                id="group1"
-                name="group1"
-                value=""
-                required>
-        </form>`;
-
-        const form = document.querySelector('form');
-        const input = document.querySelector('input');
-        const [ validator ] = validate(form);
-        await validator.validate();
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`)).toBeDefined();
-        input.value = 'Super';
-        const event = new Event('input', { bubbles: false });
-        input.dispatchEvent(event);
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`)).toBeNull();
-    });
-
-    
-    it('should update error message based on real-time validation', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form method="post" action="">
-            <label for="group1">Group1</label>
-            <input
-                type="email"
-                id="group1"
-                name="group1"
-                required>
-        </form>`;
-
-        const form = document.querySelector('form');
-        const input = document.querySelector('input');
-        const [ validator ] = validate(form);
-        await validator.validate();
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
-        input.value = 'Super';
-        const event = new Event('input', { bubbles: false });
-        input.dispatchEvent(event);
-        
-        //have to game Jest to ensure that the error is rendered in time for the assertion
-        const nextMsg = await new Promise((resolve, reject) => setTimeout(() => {
-            resolve(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent);
-        }, 16));
-
-        expect(nextMsg).toEqual(defaults.messages.email());
-    });
-
-    it('should trigger real-time validation with appropriate event for the input type', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form method="post" action="">
-            <label for="group1">Group1</label>
-            <input
-                type="checkbox"
-                id="group1"
-                name="group1"
-                required>
-        </form>`;
-
-        const form = document.querySelector('form');
-        const input = document.querySelector('input');
-        const [ validator ] = validate(form);
-        await validator.validate();
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
-        input.checked = 'checked';
-        const event = new Event('change', { bubbles: false });
-        input.dispatchEvent(event);
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`)).toBeNull();
-    });
-
-    it('should run realtime validation after a new group is added post first validation', async () => {
-        expect.assertions(3);
-        document.body.innerHTML = `<form method="post" action="">
-            <label for="group1">Group1</label>
-            <input
-                type="checkbox"
-                id="group1"
-                name="group1"
-                required />
-        </form>`;
-
-        const form = document.querySelector('form');
-        const [ validator ] = validate(form);
-        await validator.validate();
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
-
-        const newLabel = document.createElement('label');
-        newLabel.textContent = 'Group2';
-        newLabel.setAttribute('for', 'group2');
-        form.appendChild(newLabel);
-
-        const newInput = document.createElement('input');
-        newInput.setAttribute('type', 'text');
-        newInput.setAttribute('id', 'group2');
-        newInput.setAttribute('name', 'group2');
-        newInput.required = true;
-        form.appendChild(newInput);
-
-        validator.addGroup([newInput]);
-        await validator.validate();
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
-
-        newInput.value = 'Sample';
-        const event = new Event('input', { bubbles: false });
-        newInput.dispatchEvent(event);
-        expect([].slice.call(document.querySelectorAll(`.${DOTNET_CLASSNAMES.ERROR}`)).length).toEqual(1);
-    });
-    
+import validate from '../../../../src';
+import defaults from '../../../../src/lib/defaults';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
+
+
+describe('Validate > Integration > Real-time', () => {
+
+    it('should start real-time validation after first form submission', async () => {
+        expect.assertions(2);
+        document.body.innerHTML = `<form method="post" action="">
+            <label for="group1">Group1</label>
+            <input
+                id="group1"
+                name="group1"
+                value=""
+                required>
+        </form>`;
+
+        const form = document.querySelector('form');
+        const [ validator ] = validate(form);
+        await validator.validate();
+        const validityState = await validator.validate();
+        expect(validityState).toEqual(false);
+        expect(validator.getState().realTimeValidation).toEqual(true);
+    });
+
+    it('should remove error message and not replace if field is valid', async () => {
+        expect.assertions(2);
+        document.body.innerHTML = `<form method="post" action="">
+            <label for="group1">Group1</label>
+            <input
+                id="group1"
+                name="group1"
+                value=""
+                required>
+        </form>`;
+
+        const form = document.querySelector('form');
+        const input = document.querySelector('input');
+        const [ validator ] = validate(form);
+        await validator.validate();
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`)).toBeDefined();
+        input.value = 'Super';
+        const event = new Event('input', { bubbles: false });
+        input.dispatchEvent(event);
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`)).toBeNull();
+    });
+
+    
+    it('should update error message based on real-time validation', async () => {
+        expect.assertions(2);
+        document.body.innerHTML = `<form method="post" action="">
+            <label for="group1">Group1</label>
+            <input
+                type="email"
+                id="group1"
+                name="group1"
+                required>
+        </form>`;
+
+        const form = document.querySelector('form');
+        const input = document.querySelector('input');
+        const [ validator ] = validate(form);
+        await validator.validate();
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
+        input.value = 'Super';
+        const event = new Event('input', { bubbles: false });
+        input.dispatchEvent(event);
+        
+        //have to game Jest to ensure that the error is rendered in time for the assertion
+        const nextMsg = await new Promise((resolve, reject) => setTimeout(() => {
+            resolve(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent);
+        }, 16));
+
+        expect(nextMsg).toEqual(defaults.messages.email());
+    });
+
+    it('should trigger real-time validation with appropriate event for the input type', async () => {
+        expect.assertions(2);
+        document.body.innerHTML = `<form method="post" action="">
+            <label for="group1">Group1</label>
+            <input
+                type="checkbox"
+                id="group1"
+                name="group1"
+                required>
+        </form>`;
+
+        const form = document.querySelector('form');
+        const input = document.querySelector('input');
+        const [ validator ] = validate(form);
+        await validator.validate();
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
+        input.checked = 'checked';
+        const event = new Event('change', { bubbles: false });
+        input.dispatchEvent(event);
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`)).toBeNull();
+    });
+
+    it('should run realtime validation after a new group is added post first validation', async () => {
+        expect.assertions(3);
+        document.body.innerHTML = `<form method="post" action="">
+            <label for="group1">Group1</label>
+            <input
+                type="checkbox"
+                id="group1"
+                name="group1"
+                required />
+        </form>`;
+
+        const form = document.querySelector('form');
+        const [ validator ] = validate(form);
+        await validator.validate();
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
+
+        const newLabel = document.createElement('label');
+        newLabel.textContent = 'Group2';
+        newLabel.setAttribute('for', 'group2');
+        form.appendChild(newLabel);
+
+        const newInput = document.createElement('input');
+        newInput.setAttribute('type', 'text');
+        newInput.setAttribute('id', 'group2');
+        newInput.setAttribute('name', 'group2');
+        newInput.required = true;
+        form.appendChild(newInput);
+
+        validator.addGroup([newInput]);
+        await validator.validate();
+        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
+
+        newInput.value = 'Sample';
+        const event = new Event('input', { bubbles: false });
+        newInput.dispatchEvent(event);
+        expect([].slice.call(document.querySelectorAll(`.${DOTNET_CLASSNAMES.ERROR}`)).length).toEqual(1);
+    });
+    
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/reset/index.js b/packages/validate/__tests__/jest/integration/reset/index.js
similarity index 98%
rename from packages/validate/__tests__/integration/reset/index.js
rename to packages/validate/__tests__/jest/integration/reset/index.js
index b148e257..4f42b000 100644
--- a/packages/validate/__tests__/integration/reset/index.js
+++ b/packages/validate/__tests__/jest/integration/reset/index.js
@@ -1,4 +1,4 @@
-import validate from '../../../src';
+import validate from '../../../../src';
 
 describe('Validate > Integration > Reset', () => {
 
diff --git a/packages/validate/__tests__/integration/submit/index.js b/packages/validate/__tests__/jest/integration/submit/index.js
similarity index 97%
rename from packages/validate/__tests__/integration/submit/index.js
rename to packages/validate/__tests__/jest/integration/submit/index.js
index dd39eded..1361b9f9 100644
--- a/packages/validate/__tests__/integration/submit/index.js
+++ b/packages/validate/__tests__/jest/integration/submit/index.js
@@ -1,4 +1,4 @@
-import validate from '../../../src';
+import validate from '../../../../src';
 
 describe('Validate > Integration > Submit', () => {
 
diff --git a/packages/validate/__tests__/integration/validator/custom.js b/packages/validate/__tests__/jest/integration/validator/custom.js
similarity index 97%
rename from packages/validate/__tests__/integration/validator/custom.js
rename to packages/validate/__tests__/jest/integration/validator/custom.js
index 32385da5..c1581328 100644
--- a/packages/validate/__tests__/integration/validator/custom.js
+++ b/packages/validate/__tests__/jest/integration/validator/custom.js
@@ -1,4 +1,4 @@
-import { validate } from '../../../src/lib/validator';
+import { validate } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > validator > custom', () => {
 
diff --git a/packages/validate/__tests__/integration/validator/dateISO.js b/packages/validate/__tests__/jest/integration/validator/dateISO.js
similarity index 93%
rename from packages/validate/__tests__/integration/validator/dateISO.js
rename to packages/validate/__tests__/jest/integration/validator/dateISO.js
index a22dc78b..1f919065 100644
--- a/packages/validate/__tests__/integration/validator/dateISO.js
+++ b/packages/validate/__tests__/jest/integration/validator/dateISO.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > validator > dateISO', () => {
 
diff --git a/packages/validate/__tests__/integration/validator/digits.js b/packages/validate/__tests__/jest/integration/validator/digits.js
similarity index 91%
rename from packages/validate/__tests__/integration/validator/digits.js
rename to packages/validate/__tests__/jest/integration/validator/digits.js
index 9e292882..6bf45c23 100644
--- a/packages/validate/__tests__/integration/validator/digits.js
+++ b/packages/validate/__tests__/jest/integration/validator/digits.js
@@ -1,33 +1,33 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > digits', () => {
-
-    it('should return the validityState false for data-val digits validator with non-spec date', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-digits="Digits error message"
-            value="Not a digit"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for data-val digits validator with an no-spec date', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-digits="Digits error message"
-            value="13465789"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-    
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > digits', () => {
+
+    it('should return the validityState false for data-val digits validator with non-spec date', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-digits="Digits error message"
+            value="Not a digit"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for data-val digits validator with an no-spec date', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-digits="Digits error message"
+            value="13465789"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+    
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/email.js b/packages/validate/__tests__/jest/integration/validator/email.js
similarity index 95%
rename from packages/validate/__tests__/integration/validator/email.js
rename to packages/validate/__tests__/jest/integration/validator/email.js
index 173deed4..e27bc85b 100644
--- a/packages/validate/__tests__/integration/validator/email.js
+++ b/packages/validate/__tests__/jest/integration/validator/email.js
@@ -1,113 +1,113 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > email', () => {
-    //html5 spec regex approximation:
-    ///^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
-    it('should return the validityState false for HTML5 email validator with non-spec email address', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            value="not.an.email.address"
-			type="email">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for HTML5 email validator with an on-spec email address', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            value="an.email.address@storm"
-			type="email">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for non-required empty HTML5 email validator field', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            value=""
-			type="email">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for data-val email validator with non-spec email address', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-email="Email error message"
-            value="not.an.email.address"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for data-val email validator with an on-spec email address', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-email="Email error message"
-            value="an.email.address@storm"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for non-required empty data-val email validator field', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-        id="group1"
-        name="group1"
-        data-val="true"
-        data-val-email="Email error message"
-            value=""
-			type="email">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for emails names containing accents and diacritic marks', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-            id="group1"
-            name="group1"
-            data-val="true"
-            data-val-email="Email error message"
-            value="Žöé.Štévè@example.com"
-			type="email">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for emails containing accents and diacritic marks in the domain name', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-            id="group1"
-            name="group1"
-            data-val="true"
-            data-val-email="Email error message"
-            value="test@exämple.com"
-			type="email">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > email', () => {
+    //html5 spec regex approximation:
+    ///^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+    it('should return the validityState false for HTML5 email validator with non-spec email address', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            value="not.an.email.address"
+			type="email">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for HTML5 email validator with an on-spec email address', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            value="an.email.address@storm"
+			type="email">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for non-required empty HTML5 email validator field', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            value=""
+			type="email">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for data-val email validator with non-spec email address', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-email="Email error message"
+            value="not.an.email.address"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for data-val email validator with an on-spec email address', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-email="Email error message"
+            value="an.email.address@storm"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for non-required empty data-val email validator field', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+        id="group1"
+        name="group1"
+        data-val="true"
+        data-val-email="Email error message"
+            value=""
+			type="email">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for emails names containing accents and diacritic marks', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+            id="group1"
+            name="group1"
+            data-val="true"
+            data-val-email="Email error message"
+            value="Žöé.Štévè@example.com"
+			type="email">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for emails containing accents and diacritic marks in the domain name', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+            id="group1"
+            name="group1"
+            data-val="true"
+            data-val-email="Email error message"
+            value="test@exämple.com"
+			type="email">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/equalto.js b/packages/validate/__tests__/jest/integration/validator/equalto.js
similarity index 96%
rename from packages/validate/__tests__/integration/validator/equalto.js
rename to packages/validate/__tests__/jest/integration/validator/equalto.js
index d9ea5cec..e31a9897 100644
--- a/packages/validate/__tests__/integration/validator/equalto.js
+++ b/packages/validate/__tests__/jest/integration/validator/equalto.js
@@ -1,141 +1,141 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > equalto', () => {
-    
-    it('should return the validityState false for data-val equalto validator with a value not matching another single field', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-                class="input"
-                type="email"
-                id="mce-EMAIL"
-                name="EMAIL"
-                data-val="true"
-                data-val-required="Required error message"
-                value="example@stormid.com"
-            />
-            <input
-                class="input"
-                type="email"
-                id="VERIFY-EMAIL"
-                name="VERIFY-EMAIL"
-                value="not.matching@stormid.com"
-                data-val="true"
-                data-val-equalto="'Verify email' must match 'email'"
-                data-val-equalto-other="EMAIL"
-            />`;
-        const input = document.querySelector('#VERIFY-EMAIL');
-        const group = assembleValidationGroup({}, input)['VERIFY-EMAIL'];
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for data-val equalto validator with a value matching another single field', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-                class="input"
-                type="email"
-                id="mce-EMAIL"
-                name="EMAIL"
-                data-val="true"
-                data-val-required="Required error message"
-                value="example@stormid.com"
-            />
-            <input
-                class="input"
-                type="email"
-                id="VERIFY-EMAIL"
-                name="VERIFY-EMAIL"
-                value="example@stormid.com"
-                data-val="true"
-                data-val-equalto="'Verify email' must match 'email'"
-                data-val-equalto-other="EMAIL"
-            />`;
-        const input = document.querySelector('#VERIFY-EMAIL');
-        const group = assembleValidationGroup({}, input)['VERIFY-EMAIL'];
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for data-val equalto validator with a value not matching the other field(s)', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-                id="Email"
-                name="Email"
-                value="example@stormid.com" />
-            <input
-                id="ConfirmEmail"
-                name="ConfirmEmail"
-                value="example@stormid.com" />
-            <input data-val="true" 
-                data-val-equalto="Equalto error message"
-                data-val-equalto-other="Email,ConfirmEmail"
-                id="DoubleConfirmEmail"
-                name="DoubleConfirmEmail"
-                value="not.the.same.email.address@stormid.com" />`;
-        const input = document.querySelector('#DoubleConfirmEmail');
-        const group = assembleValidationGroup({}, input).DoubleConfirmEmail;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState false for data-val equalto validator with a value not matching the other field(s) with an empty value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-                id="Email"
-                name="Email"
-                value="example@stormid.com" />
-            <input
-                id="ConfirmEmail"
-                name="ConfirmEmail"
-                value="" />
-            <input data-val="true" 
-                data-val-equalto="Equalto error message"
-                data-val-equalto-other="Email,ConfirmEmail"
-                id="DoubleConfirmEmail"
-                name="DoubleConfirmEmail"
-                value="example@stormid.com" />`;
-        const input = document.querySelector('#DoubleConfirmEmail');
-        const group = assembleValidationGroup({}, input).DoubleConfirmEmail;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for data-val equalto validator with a value matching the other field(s)', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-                id="Email"
-                name="Email"
-                value="example@stormid.com" />
-            <input
-                id="ConfirmEmail"
-                name="ConfirmEmail"
-                value="example@stormid.com" />
-            <input data-val="true" 
-                data-val-equalto="Equalto error message"
-                data-val-equalto-other="Email,ConfirmEmail"
-                id="DoubleConfirmEmail"
-                name="DoubleConfirmEmail"
-                value="example@stormid.com" />`;
-        const input = document.querySelector('#DoubleConfirmEmail');
-        const group = assembleValidationGroup({}, input).DoubleConfirmEmail;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for an unrequired data-val equalto validator with no value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-                id="Email"
-                name="Email"
-                value="example@stormid.com" />
-            <input
-                id="ConfirmEmail"
-                name="ConfirmEmail"
-                value="example@stormid.com" />
-            <input data-val="true" 
-                data-val-equalto="Equalto error message"
-                data-val-equalto-other="Email,ConfirmEmail"
-                id="DoubleConfirmEmail"
-                name="DoubleConfirmEmail"
-                value="" />`;
-        const input = document.querySelector('#DoubleConfirmEmail');
-        const group = assembleValidationGroup({}, input).DoubleConfirmEmail;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > equalto', () => {
+    
+    it('should return the validityState false for data-val equalto validator with a value not matching another single field', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+                class="input"
+                type="email"
+                id="mce-EMAIL"
+                name="EMAIL"
+                data-val="true"
+                data-val-required="Required error message"
+                value="example@stormid.com"
+            />
+            <input
+                class="input"
+                type="email"
+                id="VERIFY-EMAIL"
+                name="VERIFY-EMAIL"
+                value="not.matching@stormid.com"
+                data-val="true"
+                data-val-equalto="'Verify email' must match 'email'"
+                data-val-equalto-other="EMAIL"
+            />`;
+        const input = document.querySelector('#VERIFY-EMAIL');
+        const group = assembleValidationGroup({}, input)['VERIFY-EMAIL'];
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for data-val equalto validator with a value matching another single field', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+                class="input"
+                type="email"
+                id="mce-EMAIL"
+                name="EMAIL"
+                data-val="true"
+                data-val-required="Required error message"
+                value="example@stormid.com"
+            />
+            <input
+                class="input"
+                type="email"
+                id="VERIFY-EMAIL"
+                name="VERIFY-EMAIL"
+                value="example@stormid.com"
+                data-val="true"
+                data-val-equalto="'Verify email' must match 'email'"
+                data-val-equalto-other="EMAIL"
+            />`;
+        const input = document.querySelector('#VERIFY-EMAIL');
+        const group = assembleValidationGroup({}, input)['VERIFY-EMAIL'];
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for data-val equalto validator with a value not matching the other field(s)', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+                id="Email"
+                name="Email"
+                value="example@stormid.com" />
+            <input
+                id="ConfirmEmail"
+                name="ConfirmEmail"
+                value="example@stormid.com" />
+            <input data-val="true" 
+                data-val-equalto="Equalto error message"
+                data-val-equalto-other="Email,ConfirmEmail"
+                id="DoubleConfirmEmail"
+                name="DoubleConfirmEmail"
+                value="not.the.same.email.address@stormid.com" />`;
+        const input = document.querySelector('#DoubleConfirmEmail');
+        const group = assembleValidationGroup({}, input).DoubleConfirmEmail;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState false for data-val equalto validator with a value not matching the other field(s) with an empty value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+                id="Email"
+                name="Email"
+                value="example@stormid.com" />
+            <input
+                id="ConfirmEmail"
+                name="ConfirmEmail"
+                value="" />
+            <input data-val="true" 
+                data-val-equalto="Equalto error message"
+                data-val-equalto-other="Email,ConfirmEmail"
+                id="DoubleConfirmEmail"
+                name="DoubleConfirmEmail"
+                value="example@stormid.com" />`;
+        const input = document.querySelector('#DoubleConfirmEmail');
+        const group = assembleValidationGroup({}, input).DoubleConfirmEmail;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for data-val equalto validator with a value matching the other field(s)', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+                id="Email"
+                name="Email"
+                value="example@stormid.com" />
+            <input
+                id="ConfirmEmail"
+                name="ConfirmEmail"
+                value="example@stormid.com" />
+            <input data-val="true" 
+                data-val-equalto="Equalto error message"
+                data-val-equalto-other="Email,ConfirmEmail"
+                id="DoubleConfirmEmail"
+                name="DoubleConfirmEmail"
+                value="example@stormid.com" />`;
+        const input = document.querySelector('#DoubleConfirmEmail');
+        const group = assembleValidationGroup({}, input).DoubleConfirmEmail;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for an unrequired data-val equalto validator with no value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+                id="Email"
+                name="Email"
+                value="example@stormid.com" />
+            <input
+                id="ConfirmEmail"
+                name="ConfirmEmail"
+                value="example@stormid.com" />
+            <input data-val="true" 
+                data-val-equalto="Equalto error message"
+                data-val-equalto-other="Email,ConfirmEmail"
+                id="DoubleConfirmEmail"
+                name="DoubleConfirmEmail"
+                value="" />`;
+        const input = document.querySelector('#DoubleConfirmEmail');
+        const group = assembleValidationGroup({}, input).DoubleConfirmEmail;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/index.js b/packages/validate/__tests__/jest/integration/validator/index.js
similarity index 93%
rename from packages/validate/__tests__/integration/validator/index.js
rename to packages/validate/__tests__/jest/integration/validator/index.js
index 7030ac19..acab1ac7 100644
--- a/packages/validate/__tests__/integration/validator/index.js
+++ b/packages/validate/__tests__/jest/integration/validator/index.js
@@ -1,4 +1,4 @@
-import { validate } from '../../../src/lib/validator';
+import { validate } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > validator > error handling', () => {
 
diff --git a/packages/validate/__tests__/integration/validator/isHidden.js b/packages/validate/__tests__/jest/integration/validator/isHidden.js
similarity index 98%
rename from packages/validate/__tests__/integration/validator/isHidden.js
rename to packages/validate/__tests__/jest/integration/validator/isHidden.js
index c0e39043..0c3e86c9 100644
--- a/packages/validate/__tests__/integration/validator/isHidden.js
+++ b/packages/validate/__tests__/jest/integration/validator/isHidden.js
@@ -1,4 +1,4 @@
-import { isFormValid, getValidityState, assembleValidationGroup } from '../../../src/lib/validator';
+import { isFormValid, getValidityState, assembleValidationGroup } from '../../../../src/lib/validator';
 
 describe('Validate > Integration > assembleValidationGroup > With hidden element', () => {
     it('should return the validation group minus hidden inputs', async () => {
diff --git a/packages/validate/__tests__/integration/validator/length.js b/packages/validate/__tests__/jest/integration/validator/length.js
similarity index 93%
rename from packages/validate/__tests__/integration/validator/length.js
rename to packages/validate/__tests__/jest/integration/validator/length.js
index 05ef617d..38af4d1f 100644
--- a/packages/validate/__tests__/integration/validator/length.js
+++ b/packages/validate/__tests__/jest/integration/validator/length.js
@@ -1,53 +1,53 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > length', () => {
-    
-    it('should return the validityState false for data-val length validator with value greater than max length', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-length="Length error message"
-            data-val-length-min="2"
-            data-val-length-max="8"
-            value="Value is too long"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for data-val length validator with value within the min and max length range', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-length="Length error message"
-            data-val-length-min="2"
-            data-val-length-max="8"
-            value="Pass"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for unrequired data-val length validator with no value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-length="Length error message"
-            data-val-length-min="2"
-            data-val-length-max="8"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > length', () => {
+    
+    it('should return the validityState false for data-val length validator with value greater than max length', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-length="Length error message"
+            data-val-length-min="2"
+            data-val-length-max="8"
+            value="Value is too long"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for data-val length validator with value within the min and max length range', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-length="Length error message"
+            data-val-length-min="2"
+            data-val-length-max="8"
+            value="Pass"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for unrequired data-val length validator with no value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-length="Length error message"
+            data-val-length-min="2"
+            data-val-length-max="8"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/max.js b/packages/validate/__tests__/jest/integration/validator/max.js
similarity index 95%
rename from packages/validate/__tests__/integration/validator/max.js
rename to packages/validate/__tests__/jest/integration/validator/max.js
index a350c23a..639a14f5 100644
--- a/packages/validate/__tests__/integration/validator/max.js
+++ b/packages/validate/__tests__/jest/integration/validator/max.js
@@ -1,118 +1,118 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > max', () => {
-    
-    it('should return the validityState false for HTML5 max validator with value greater than max', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            max="2"
-            value="3"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState false for data-val max validator with value greater than max', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-max="Max error message"
-            data-val-max-max="2"
-            value="3"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for HTML5 max validator with value less than or equal to max', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            max="2"
-            value="2"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for data-val max validator with value less or equal to max', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-max="Max error message"
-            data-val-max-max="2"
-            value="2"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for HTML5 max validator with a non-numeric value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            max="2"
-            value="Not a number"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState false for data-val max validator with a non-numeric value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-max="Max error message"
-            data-val-max-max="2"
-            value="Not a number"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for unrequired HTML5 max validator with no value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            max="2"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for unrequired data-val max validator with no value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-max="Max error message"
-            data-val-max-max="2"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > max', () => {
+    
+    it('should return the validityState false for HTML5 max validator with value greater than max', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            max="2"
+            value="3"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState false for data-val max validator with value greater than max', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-max="Max error message"
+            data-val-max-max="2"
+            value="3"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for HTML5 max validator with value less than or equal to max', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            max="2"
+            value="2"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for data-val max validator with value less or equal to max', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-max="Max error message"
+            data-val-max-max="2"
+            value="2"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for HTML5 max validator with a non-numeric value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            max="2"
+            value="Not a number"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState false for data-val max validator with a non-numeric value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-max="Max error message"
+            data-val-max-max="2"
+            value="Not a number"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for unrequired HTML5 max validator with no value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            max="2"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for unrequired data-val max validator with no value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-max="Max error message"
+            data-val-max-max="2"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/maxlength.js b/packages/validate/__tests__/jest/integration/validator/maxlength.js
similarity index 95%
rename from packages/validate/__tests__/integration/validator/maxlength.js
rename to packages/validate/__tests__/jest/integration/validator/maxlength.js
index aa4270e7..33d7505e 100644
--- a/packages/validate/__tests__/integration/validator/maxlength.js
+++ b/packages/validate/__tests__/jest/integration/validator/maxlength.js
@@ -1,89 +1,89 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > maxlength', () => {
-    
-    it('should return the validityState false for data-val maxlength validator with value length greater than maxlength', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-maxlength="Maxlength error message"
-            data-val-maxlength-max="5"
-            value="Falsey"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for data-val maxlength validator with value length less than the max', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-			name="group1"
-            data-val="true"
-            data-val-maxlength="Maxlength error message"
-            data-val-maxlength-max="5"
-            value="Pass"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for unrequired data-val maxlength validator with no value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-maxlength="Maxength error message"
-            data-val-maxlength-max="5"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for HTML5 maxlength validator with value length greater than max', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            maxlength="5"
-            value="Falsey"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState false for HTML5 maxlength validator with value length less than max', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            maxlength="5"
-            value="Pass"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for unrequired HTML5 maxlength validator with no value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            maxlength="5"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > maxlength', () => {
+    
+    it('should return the validityState false for data-val maxlength validator with value length greater than maxlength', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-maxlength="Maxlength error message"
+            data-val-maxlength-max="5"
+            value="Falsey"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for data-val maxlength validator with value length less than the max', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+			name="group1"
+            data-val="true"
+            data-val-maxlength="Maxlength error message"
+            data-val-maxlength-max="5"
+            value="Pass"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for unrequired data-val maxlength validator with no value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-maxlength="Maxength error message"
+            data-val-maxlength-max="5"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for HTML5 maxlength validator with value length greater than max', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            maxlength="5"
+            value="Falsey"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState false for HTML5 maxlength validator with value length less than max', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            maxlength="5"
+            value="Pass"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for unrequired HTML5 maxlength validator with no value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            maxlength="5"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/min.js b/packages/validate/__tests__/jest/integration/validator/min.js
similarity index 95%
rename from packages/validate/__tests__/integration/validator/min.js
rename to packages/validate/__tests__/jest/integration/validator/min.js
index 068a5d51..92393186 100644
--- a/packages/validate/__tests__/integration/validator/min.js
+++ b/packages/validate/__tests__/jest/integration/validator/min.js
@@ -1,105 +1,105 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > min', () => {
-    
-    it('should return the validityState false for HTML5 min validator with value less than min', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            min="5"
-            value="3"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState false for data-val min validator with value less than min', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-            name="group1"
-            id="group1"
-            data-val="true"
-            data-val-min="Min error message"
-            data-val-min-min="5"
-            value="3"
-			type="number">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-    
-
-    it('should return the validityState true for HTML5 min validator with value greater than min', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            min="5"
-            value="6"
-			type="number">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for data-val min validator with value greater than min', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-min="Min error message"
-            data-val-min-min="5"
-            value="6"
-			type="number">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for data-val min validator with a non-numeric value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-min="Min error message"
-            data-val-min-min="5"
-            value="Not a number"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for unrequired HTML5 min validator with no value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            min="5"
-            value=""
-			type="number">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for unrequired data-val min validator with no value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-min="Min error message"
-            data-val-min-min="5"
-            value=""
-			type="number">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > min', () => {
+    
+    it('should return the validityState false for HTML5 min validator with value less than min', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            min="5"
+            value="3"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState false for data-val min validator with value less than min', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+            name="group1"
+            id="group1"
+            data-val="true"
+            data-val-min="Min error message"
+            data-val-min-min="5"
+            value="3"
+			type="number">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+    
+
+    it('should return the validityState true for HTML5 min validator with value greater than min', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            min="5"
+            value="6"
+			type="number">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for data-val min validator with value greater than min', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-min="Min error message"
+            data-val-min-min="5"
+            value="6"
+			type="number">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for data-val min validator with a non-numeric value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-min="Min error message"
+            data-val-min-min="5"
+            value="Not a number"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for unrequired HTML5 min validator with no value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            min="5"
+            value=""
+			type="number">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for unrequired data-val min validator with no value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-min="Min error message"
+            data-val-min-min="5"
+            value=""
+			type="number">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/minlength.js b/packages/validate/__tests__/jest/integration/validator/minlength.js
similarity index 95%
rename from packages/validate/__tests__/integration/validator/minlength.js
rename to packages/validate/__tests__/jest/integration/validator/minlength.js
index f46570e5..6f444726 100644
--- a/packages/validate/__tests__/integration/validator/minlength.js
+++ b/packages/validate/__tests__/jest/integration/validator/minlength.js
@@ -1,89 +1,89 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > minlength', () => {
-    
-    it('should return the validityState false for data-val minlength validator with value length less than minlength', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-minlength="Minlength error message"
-            data-val-minlength-min="5"
-            value="No"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for data-val minlength validator with value length greater than the min', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-			name="group1"
-            data-val="true"
-            data-val-minlength="Minlength error message"
-            data-val-minlength-min="5"
-            value="Valid"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for unrequired data-val minlength validator with no value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-minlength="Maxlength error message"
-            data-val-minlength-min="5"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for HTML5 minlength validator with value length less than min length', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            minlength="5"
-            value="No"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState false for HTML5 minlength validator with value length greater than min length', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            minlength="5"
-            value="Valid"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for unrequired HTML5 minlength validator with no value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            minlength="5"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > minlength', () => {
+    
+    it('should return the validityState false for data-val minlength validator with value length less than minlength', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-minlength="Minlength error message"
+            data-val-minlength-min="5"
+            value="No"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for data-val minlength validator with value length greater than the min', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+			name="group1"
+            data-val="true"
+            data-val-minlength="Minlength error message"
+            data-val-minlength-min="5"
+            value="Valid"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for unrequired data-val minlength validator with no value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-minlength="Maxlength error message"
+            data-val-minlength-min="5"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for HTML5 minlength validator with value length less than min length', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            minlength="5"
+            value="No"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState false for HTML5 minlength validator with value length greater than min length', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            minlength="5"
+            value="Valid"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for unrequired HTML5 minlength validator with no value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            minlength="5"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/number.js b/packages/validate/__tests__/jest/integration/validator/number.js
similarity index 95%
rename from packages/validate/__tests__/integration/validator/number.js
rename to packages/validate/__tests__/jest/integration/validator/number.js
index ad6913bf..3e2fc09f 100644
--- a/packages/validate/__tests__/integration/validator/number.js
+++ b/packages/validate/__tests__/jest/integration/validator/number.js
@@ -1,88 +1,88 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > number', () => {
-
-    it('should return the validityState true for HTML5 number validator with a number', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            value="99"
-            type="number">
-            <input
-			id="group2"
-            name="group2"
-            value="-99"
-			type="number">`;
-        const input1 = document.querySelector('#group1');
-        const group1 = assembleValidationGroup({}, input1).group1;
-        const input2 = document.querySelector('#group2');
-        const group2 = assembleValidationGroup({}, input2).group2;
-        expect(await validate(group1, group1.validators[0])).toEqual(true);
-        expect(await validate(group2, group2.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for non-required empty HTML5 number validator field', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-            id="group1"
-            name="group1"
-            value=""
-			type="number">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for data-val number validator with non-number', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-number="Number error message"
-            value="not.a.number"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for data-val number validator with a number', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-number="Number error message"
-            value="99"
-			type="text"><input
-			id="group2"
-            name="group2"
-            data-val="true"
-            data-val-number="Number error message"
-            value="-99"
-			type="text">`;
-        const input1 = document.querySelector('#group1');
-        const group1 = assembleValidationGroup({}, input1).group1;
-        const input2 = document.querySelector('#group2');
-        const group2 = assembleValidationGroup({}, input2).group2;
-        expect(await validate(group1, group1.validators[0])).toEqual(true);
-        expect(await validate(group2, group2.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for non-required empty data-val number validator field', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-            id="group1"
-            name="group1"
-            data-val="true"
-            data-val-number="Number error message"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > number', () => {
+
+    it('should return the validityState true for HTML5 number validator with a number', async () => {
+        expect.assertions(2);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            value="99"
+            type="number">
+            <input
+			id="group2"
+            name="group2"
+            value="-99"
+			type="number">`;
+        const input1 = document.querySelector('#group1');
+        const group1 = assembleValidationGroup({}, input1).group1;
+        const input2 = document.querySelector('#group2');
+        const group2 = assembleValidationGroup({}, input2).group2;
+        expect(await validate(group1, group1.validators[0])).toEqual(true);
+        expect(await validate(group2, group2.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for non-required empty HTML5 number validator field', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+            id="group1"
+            name="group1"
+            value=""
+			type="number">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for data-val number validator with non-number', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-number="Number error message"
+            value="not.a.number"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for data-val number validator with a number', async () => {
+        expect.assertions(2);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-number="Number error message"
+            value="99"
+			type="text"><input
+			id="group2"
+            name="group2"
+            data-val="true"
+            data-val-number="Number error message"
+            value="-99"
+			type="text">`;
+        const input1 = document.querySelector('#group1');
+        const group1 = assembleValidationGroup({}, input1).group1;
+        const input2 = document.querySelector('#group2');
+        const group2 = assembleValidationGroup({}, input2).group2;
+        expect(await validate(group1, group1.validators[0])).toEqual(true);
+        expect(await validate(group2, group2.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for non-required empty data-val number validator field', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+            id="group1"
+            name="group1"
+            data-val="true"
+            data-val-number="Number error message"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/range.js b/packages/validate/__tests__/jest/integration/validator/range.js
similarity index 95%
rename from packages/validate/__tests__/integration/validator/range.js
rename to packages/validate/__tests__/jest/integration/validator/range.js
index 62aeeffb..46543931 100644
--- a/packages/validate/__tests__/integration/validator/range.js
+++ b/packages/validate/__tests__/jest/integration/validator/range.js
@@ -1,113 +1,113 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > range', () => {
-    
-    it('should return the validityState false for data-val range validator with value outside the specified range', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-range="Range error message"
-            data-val-range-min="2"
-            data-val-range-max="8"
-            value="9"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for data-val range validator with value inside the specified range', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-range="Range error message"
-            data-val-range-min="2"
-            data-val-range-max="8"
-            value="5"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for an unrequired data-val range validator with no value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-range="Range error message"
-            data-val-range-min="2"
-            data-val-range-max="8"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for data-val range validator with value > min with no max', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-range="Range error message"
-            data-val-range-min="2"
-            value="5"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for data-val range validator with value <= min with no max', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-range="Range error message"
-            data-val-range-min="5"
-            value="1"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for data-val range validator with value <= max with no min', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-range="Range error message"
-            data-val-range-max="5"
-            value="5"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for data-val range validator with value > max with no min', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-range="Range error message"
-            data-val-range-max="5"
-            value="6"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > range', () => {
+    
+    it('should return the validityState false for data-val range validator with value outside the specified range', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-range="Range error message"
+            data-val-range-min="2"
+            data-val-range-max="8"
+            value="9"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for data-val range validator with value inside the specified range', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-range="Range error message"
+            data-val-range-min="2"
+            data-val-range-max="8"
+            value="5"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for an unrequired data-val range validator with no value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-range="Range error message"
+            data-val-range-min="2"
+            data-val-range-max="8"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for data-val range validator with value > min with no max', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-range="Range error message"
+            data-val-range-min="2"
+            value="5"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for data-val range validator with value <= min with no max', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-range="Range error message"
+            data-val-range-min="5"
+            value="1"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for data-val range validator with value <= max with no min', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-range="Range error message"
+            data-val-range-max="5"
+            value="5"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for data-val range validator with value > max with no min', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-range="Range error message"
+            data-val-range-max="5"
+            value="6"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/regex-pattern.js b/packages/validate/__tests__/jest/integration/validator/regex-pattern.js
similarity index 95%
rename from packages/validate/__tests__/integration/validator/regex-pattern.js
rename to packages/validate/__tests__/jest/integration/validator/regex-pattern.js
index 8bed4169..5eb4ff7b 100644
--- a/packages/validate/__tests__/integration/validator/regex-pattern.js
+++ b/packages/validate/__tests__/jest/integration/validator/regex-pattern.js
@@ -1,88 +1,88 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > regex/pattern', () => {
-    it('should return the validityState false for HTML5 pattern validator with non-matching value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            pattern="^(pass)$"
-            value="fail"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-    
-    it('should return the validityState false for HTML5 pattern validator with matching value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            pattern="^(pass)$"
-            value="pass"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for non-required empty HTML5 pattern validator field', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-            id="group1"
-            name="group1"
-            pattern="^(pass)$"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for data-val regex validator with non-matching value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-regex="Regex error message"
-            data-val-regex-pattern="^(pass)$"
-            value="fail"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for data-val regex validator with a matching value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-regex="Regex error message"
-            data-val-regex-pattern="^(pass)$"
-            value="pass"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for non-required empty data-val pattern validator field', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-            id="group1"
-            name="group1"
-            data-val="true"
-            data-val-regex="Regex error message"
-            data-val-regex-pattern="^(pass)$"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > regex/pattern', () => {
+    it('should return the validityState false for HTML5 pattern validator with non-matching value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            pattern="^(pass)$"
+            value="fail"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+    
+    it('should return the validityState false for HTML5 pattern validator with matching value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            pattern="^(pass)$"
+            value="pass"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for non-required empty HTML5 pattern validator field', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+            id="group1"
+            name="group1"
+            pattern="^(pass)$"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for data-val regex validator with non-matching value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-regex="Regex error message"
+            data-val-regex-pattern="^(pass)$"
+            value="fail"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for data-val regex validator with a matching value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-regex="Regex error message"
+            data-val-regex-pattern="^(pass)$"
+            value="pass"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for non-required empty data-val pattern validator field', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+            id="group1"
+            name="group1"
+            data-val="true"
+            data-val-regex="Regex error message"
+            data-val-regex-pattern="^(pass)$"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/remote.js b/packages/validate/__tests__/jest/integration/validator/remote.js
similarity index 93%
rename from packages/validate/__tests__/integration/validator/remote.js
rename to packages/validate/__tests__/jest/integration/validator/remote.js
index 7faece60..dffff81e 100644
--- a/packages/validate/__tests__/integration/validator/remote.js
+++ b/packages/validate/__tests__/jest/integration/validator/remote.js
@@ -1,66 +1,66 @@
-import mock from 'xhr-mock';
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > remote', () => {
-    
-    beforeEach(() => mock.setup());
-
-    afterEach(() => mock.teardown());
-
-    it('should return the validityState false for data-val remote validator with a failed remote validation', async () => {
-        expect.assertions(1);
- 
-        mock.post('/api/validate', {
-            status: 201,
-            body: 'false'
-        });
-        document.body.innerHTML = `<input
-            id="group1"
-            name="group1"
-            data-val="true"
-            data-val-remote="Remote error message"
-            data-val-remote-type="post"
-            data-val-remote-url="/api/validate"
-            data-val-remote-additionalfields="group2"
-            value="Failure"
-            type="text">
-        <input
-            id="group2"
-            name="group2"
-            value="Value 2"
-            type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        const res = await validate(group, group.validators[0]);
-        expect(res).toEqual('false');
-    });
-
-    it('should return the validityState true for data-val remote validator with a passed remote validation', async () => {
-        expect.assertions(1);
-
-        mock.post('/api/validate', {
-            status: 201,
-            body: 'true'
-        });
-        document.body.innerHTML = `<input
-            id="group1"
-            name="group1"
-            data-val="true"
-            data-val-remote="Remote error message"
-            data-val-remote-type="post"
-            data-val-remote-url="/api/validate"
-            data-val-remote-additionalfields="group2"
-            value="Pass"
-            type="text">
-        <input
-            id="group2"
-            name="group2"
-            value="Value 2"
-            type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        const res = await validate(group, group.validators[0]);
-        expect(res).toEqual('true');
-    });
-      
+import mock from 'xhr-mock';
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > remote', () => {
+    
+    beforeEach(() => mock.setup());
+
+    afterEach(() => mock.teardown());
+
+    it('should return the validityState false for data-val remote validator with a failed remote validation', async () => {
+        expect.assertions(1);
+ 
+        mock.post('/api/validate', {
+            status: 201,
+            body: 'false'
+        });
+        document.body.innerHTML = `<input
+            id="group1"
+            name="group1"
+            data-val="true"
+            data-val-remote="Remote error message"
+            data-val-remote-type="post"
+            data-val-remote-url="/api/validate"
+            data-val-remote-additionalfields="group2"
+            value="Failure"
+            type="text">
+        <input
+            id="group2"
+            name="group2"
+            value="Value 2"
+            type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        const res = await validate(group, group.validators[0]);
+        expect(res).toEqual('false');
+    });
+
+    it('should return the validityState true for data-val remote validator with a passed remote validation', async () => {
+        expect.assertions(1);
+
+        mock.post('/api/validate', {
+            status: 201,
+            body: 'true'
+        });
+        document.body.innerHTML = `<input
+            id="group1"
+            name="group1"
+            data-val="true"
+            data-val-remote="Remote error message"
+            data-val-remote-type="post"
+            data-val-remote-url="/api/validate"
+            data-val-remote-additionalfields="group2"
+            value="Pass"
+            type="text">
+        <input
+            id="group2"
+            name="group2"
+            value="Value 2"
+            type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        const res = await validate(group, group.validators[0]);
+        expect(res).toEqual('true');
+    });
+      
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/required.js b/packages/validate/__tests__/jest/integration/validator/required.js
similarity index 95%
rename from packages/validate/__tests__/integration/validator/required.js
rename to packages/validate/__tests__/jest/integration/validator/required.js
index 9b127389..2a64b9d0 100644
--- a/packages/validate/__tests__/integration/validator/required.js
+++ b/packages/validate/__tests__/jest/integration/validator/required.js
@@ -1,106 +1,106 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > assembleValidationGroup > required', () => {
-    it('should return the validation group for HTML5 required validator', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1-1"
-            name="group1"
-            required
-            value=""
-            type="text">`;
-        const input = document.querySelector('#group1-1');
-        const group = [input].reduce(assembleValidationGroup, {});
-        expect(group).toEqual({
-            group1: {
-                valid: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                serverErrorNode: false
-            }
-        });
-    });
-});
-
-describe('Validate > Integration > validator > required', () => {
-    it('should return the validityState false for HTML5 required validator with no value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            required
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState false for HTML5 required validator with no value other than whitespace', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            required
-            value="     "
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for HTML5 required validator with a value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            required
-            value="Test"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for data-val required validator with no value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-required="This field is required"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState false for data-val required validator with no value but whitespace', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-required="This field is required"
-            value="    "
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for data-val required validator with a value', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-required="This field is required"
-            value="Test"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > assembleValidationGroup > required', () => {
+    it('should return the validation group for HTML5 required validator', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1-1"
+            name="group1"
+            required
+            value=""
+            type="text">`;
+        const input = document.querySelector('#group1-1');
+        const group = [input].reduce(assembleValidationGroup, {});
+        expect(group).toEqual({
+            group1: {
+                valid: false,
+                validators: [{ type: 'required' }],
+                fields: [input],
+                serverErrorNode: false
+            }
+        });
+    });
+});
+
+describe('Validate > Integration > validator > required', () => {
+    it('should return the validityState false for HTML5 required validator with no value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            required
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState false for HTML5 required validator with no value other than whitespace', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            required
+            value="     "
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for HTML5 required validator with a value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            required
+            value="Test"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for data-val required validator with no value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-required="This field is required"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState false for data-val required validator with no value but whitespace', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-required="This field is required"
+            value="    "
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for data-val required validator with a value', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-required="This field is required"
+            value="Test"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/stringlength.js b/packages/validate/__tests__/jest/integration/validator/stringlength.js
similarity index 93%
rename from packages/validate/__tests__/integration/validator/stringlength.js
rename to packages/validate/__tests__/jest/integration/validator/stringlength.js
index b262852d..0ea3e4b6 100644
--- a/packages/validate/__tests__/integration/validator/stringlength.js
+++ b/packages/validate/__tests__/jest/integration/validator/stringlength.js
@@ -1,50 +1,50 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > stringlength', () => {
-    
-    it('should return the validityState false for data-val stringlength validator with value greater than max length', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-stringlength="Stringlength error message"
-            data-val-length-max="8"
-            value="String longer than 8 characters"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState true for non-required empty data-val stringlength validator field', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-stringlength="Stringlength error message"
-            data-val-length-max="8"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for data-val stringlength validator with value less than max length', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-stringlength="Stringlength error message"
-            data-val-length-max="8"
-            value="Valid"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > stringlength', () => {
+    
+    it('should return the validityState false for data-val stringlength validator with value greater than max length', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-stringlength="Stringlength error message"
+            data-val-length-max="8"
+            value="String longer than 8 characters"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState true for non-required empty data-val stringlength validator field', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-stringlength="Stringlength error message"
+            data-val-length-max="8"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for data-val stringlength validator with value less than max length', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-stringlength="Stringlength error message"
+            data-val-length-max="8"
+            value="Valid"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/validator/url.js b/packages/validate/__tests__/jest/integration/validator/url.js
similarity index 94%
rename from packages/validate/__tests__/integration/validator/url.js
rename to packages/validate/__tests__/jest/integration/validator/url.js
index 3f643dff..8590d1f5 100644
--- a/packages/validate/__tests__/integration/validator/url.js
+++ b/packages/validate/__tests__/jest/integration/validator/url.js
@@ -1,71 +1,71 @@
-import { validate, assembleValidationGroup } from '../../../src/lib/validator';
-
-describe('Validate > Integration > validator > url', () => {
-    //html5 spec regex approximation:
-    ///^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
-    it('should return the validityState false for HTML5 url validator with non-spec url', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            value="not.a.url.com"
-			type="url">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-
-    it('should return the validityState false for data-val url validator with non-spec url', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            data-val="true"
-            data-val-url="Not a valid url"
-            value="not.a.url.com"
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(false);
-    });
-    
-    it('should return the validityState true for non-required empty HTML5 url validator field', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            value=""
-			type="url">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState true for non-required empty data-val url validator field', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-            id="group1"
-            name="group1"
-            data-val="true"
-            data-val-url="Not a valid url"
-            value=""
-			type="text">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-    it('should return the validityState false for HTML5 url validator with an on-spec url', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<input
-			id="group1"
-            name="group1"
-            value="https://a.url.com"
-			type="url">`;
-        const input = document.querySelector('#group1');
-        const group = assembleValidationGroup({}, input).group1;
-        expect(await validate(group, group.validators[0])).toEqual(true);
-    });
-
-
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+
+describe('Validate > Integration > validator > url', () => {
+    //html5 spec regex approximation:
+    ///^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
+    it('should return the validityState false for HTML5 url validator with non-spec url', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            value="not.a.url.com"
+			type="url">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+
+    it('should return the validityState false for data-val url validator with non-spec url', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            data-val="true"
+            data-val-url="Not a valid url"
+            value="not.a.url.com"
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(false);
+    });
+    
+    it('should return the validityState true for non-required empty HTML5 url validator field', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            value=""
+			type="url">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState true for non-required empty data-val url validator field', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+            id="group1"
+            name="group1"
+            data-val="true"
+            data-val-url="Not a valid url"
+            value=""
+			type="text">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+    it('should return the validityState false for HTML5 url validator with an on-spec url', async () => {
+        expect.assertions(1);
+        document.body.innerHTML = `<input
+			id="group1"
+            name="group1"
+            value="https://a.url.com"
+			type="url">`;
+        const input = document.querySelector('#group1');
+        const group = assembleValidationGroup({}, input).group1;
+        expect(await validate(group, group.validators[0])).toEqual(true);
+    });
+
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/unit/dom/errors.js b/packages/validate/__tests__/jest/unit/dom/errors.js
similarity index 99%
rename from packages/validate/__tests__/unit/dom/errors.js
rename to packages/validate/__tests__/jest/unit/dom/errors.js
index 8e4caef0..93e047af 100644
--- a/packages/validate/__tests__/unit/dom/errors.js
+++ b/packages/validate/__tests__/jest/unit/dom/errors.js
@@ -5,8 +5,8 @@ import {
     renderError,
     renderErrors,
     updateMessageValues
-} from '../../../src/lib/dom';
-import { DOTNET_CLASSNAMES } from '../../../src/lib/constants';
+} from '../../../../src/lib/dom';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
 
 //clearError
 describe('Validate > Unit > DOM > clearError', () => {
diff --git a/packages/validate/__tests__/unit/dom/index.js b/packages/validate/__tests__/jest/unit/dom/index.js
similarity index 98%
rename from packages/validate/__tests__/unit/dom/index.js
rename to packages/validate/__tests__/jest/unit/dom/index.js
index 1f571689..92e4a38b 100644
--- a/packages/validate/__tests__/unit/dom/index.js
+++ b/packages/validate/__tests__/jest/unit/dom/index.js
@@ -4,8 +4,8 @@ import {
     focusFirstInvalidField,
     createButtonValueNode,
     addAXAttributes
-} from '../../../src/lib/dom';
-import { DOTNET_CLASSNAMES } from '../../../src/lib/constants';
+} from '../../../../src/lib/dom';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
 
 describe('Validate > Unit > DOM > h', () => {
     
diff --git a/packages/validate/__tests__/unit/initialisation.js b/packages/validate/__tests__/jest/unit/initialisation.js
similarity index 98%
rename from packages/validate/__tests__/unit/initialisation.js
rename to packages/validate/__tests__/jest/unit/initialisation.js
index 998243ab..ded77ce9 100644
--- a/packages/validate/__tests__/unit/initialisation.js
+++ b/packages/validate/__tests__/jest/unit/initialisation.js
@@ -1,6 +1,6 @@
-import validate from '../../src';
-import defaults from '../../src/lib/defaults';
-import { getSelection } from '../../src/lib/validator/utils';
+import validate from '../../../src';
+import defaults from '../../../src/lib/defaults';
+import { getSelection } from '../../../src/lib/validator/utils';
 
 let validators;
 const setUpDOM = () => {
diff --git a/packages/validate/__tests__/unit/reducers.js b/packages/validate/__tests__/jest/unit/reducers.js
similarity index 99%
rename from packages/validate/__tests__/unit/reducers.js
rename to packages/validate/__tests__/jest/unit/reducers.js
index 44bbefee..eeed0922 100644
--- a/packages/validate/__tests__/unit/reducers.js
+++ b/packages/validate/__tests__/jest/unit/reducers.js
@@ -1,5 +1,5 @@
-import { ACTIONS, GROUP_ATTRIBUTE } from '../../src/lib/constants';
-import Reducers from '../../src/lib/reducers';
+import { ACTIONS, GROUP_ATTRIBUTE } from '../../../src/lib/constants';
+import Reducers from '../../../src/lib/reducers';
 
 //set initial state
 describe('Validate > Unit > Reducers > Set initial state', () => {
diff --git a/packages/validate/__tests__/unit/store.js b/packages/validate/__tests__/jest/unit/store.js
similarity index 92%
rename from packages/validate/__tests__/unit/store.js
rename to packages/validate/__tests__/jest/unit/store.js
index f54b4d43..b736b524 100644
--- a/packages/validate/__tests__/unit/store.js
+++ b/packages/validate/__tests__/jest/unit/store.js
@@ -1,6 +1,6 @@
-import { createStore } from '../../src/lib/store';
-import { ACTIONS } from '../../src/lib/constants';
-import reducers from '../../src/lib/reducers';
+import { createStore } from '../../../src/lib/store';
+import { ACTIONS } from '../../../src/lib/constants';
+import reducers from '../../../src/lib/reducers';
 let Store;
 beforeAll(() => {
     Store = createStore();
diff --git a/packages/validate/__tests__/unit/validator/index.js b/packages/validate/__tests__/jest/unit/validator/index.js
similarity index 99%
rename from packages/validate/__tests__/unit/validator/index.js
rename to packages/validate/__tests__/jest/unit/validator/index.js
index 12371ba8..22c4b9a6 100644
--- a/packages/validate/__tests__/unit/validator/index.js
+++ b/packages/validate/__tests__/jest/unit/validator/index.js
@@ -4,11 +4,10 @@ import {
     extractDataValValidators,
     extractAttrValidators,
     extractErrorMessage,
-    // reduceErrorMessages,
     removeUnvalidatableGroups,
     getInitialState
-} from '../../../src/lib/validator';
-import defaults from '../../../src/lib/defaults';
+} from '../../../../src/lib/validator';
+import defaults from '../../../../src/lib/defaults';
 
 //resolveParam
 describe('Validate > Unit > Validator > resolveParam', () => {
diff --git a/packages/validate/__tests__/unit/validator/methods.js b/packages/validate/__tests__/jest/unit/validator/methods.js
similarity index 96%
rename from packages/validate/__tests__/unit/validator/methods.js
rename to packages/validate/__tests__/jest/unit/validator/methods.js
index ed51976f..372c55ba 100644
--- a/packages/validate/__tests__/unit/validator/methods.js
+++ b/packages/validate/__tests__/jest/unit/validator/methods.js
@@ -1,828 +1,828 @@
-import mock from 'xhr-mock';
-import Methods from '../../../src/lib/validator/methods';
-
-//required
-describe('Validate > Unit > Validator > methods > required', () => {
-
-    it('should return false for group containing a single empty field', () => {
-        document.body.innerHTML = `<form><input name="field" id="field" value="" required /></form>`;
-        const group = { fields: [document.querySelector('#field')] };
-        expect(Methods.required(group)).toEqual(false);
-    });
-    
-    it('should return false for group  with no value', () => {
-        document.body.innerHTML = `<form>
-            <input type="checkbox" name="field" id="field-1" />
-            <input type="checkbox" name="field" id="field-2" />
-        </form>`;
-        const group = { fields: [document.querySelector('#field-1'), document.querySelector('#field-1')] };
-        expect(Methods.required(group)).toEqual(false);
-    });
-
-    it('should return true for a group with a single required field wuith a value', () => {
-        document.body.innerHTML = `<form><input name="field" id="field" value="Test" required /></form>`;
-        const group = { fields: [document.querySelector('#field')] };
-        expect(Methods.required(group)).toEqual(true);
-    });
-    
-    it('should return true for group with value', () => {
-        document.body.innerHTML = `<form>
-            <input type="checkbox" name="field" id="field-1" checked />
-            <input type="checkbox" name="field" id="field-2" />
-        </form>`;
-        const group = { fields: [document.querySelector('#field-1'), document.querySelector('#field-1')] };
-        expect(Methods.required(group)).toEqual(true);
-    });
-
-});
-
-
-//email
-describe('Validate > Unit > Validator > methods > email', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="email" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.email(group)).toEqual(true);
-    });
-
-    it('should return false for group containing a non-spec value', () => {
-        document.body.innerHTML = `<form><input type="email" name="field" id="field" value="no" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.email(group)).toEqual(false);
-    });
-
-    it('should return true for group containing an on-spec value', () => {
-        document.body.innerHTML = `<form><input type="email" name="field" id="field" value="me@email" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.email(group)).toEqual(true);
-    });
-
-});
-
-
-//url
-describe('Validate > Unit > Validator > methods > url', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="url" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.url(group)).toEqual(true);
-    });
-
-    it('should return false for group containing a non-spec value', () => {
-        document.body.innerHTML = `<form><input type="url" name="field" id="field" value="no" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.url(group)).toEqual(false);
-    });
-
-    it('should return true for group containing an on-spec value', () => {
-        document.body.innerHTML = `<form><input type="url" name="field" id="field" value="https://a.valid.url" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.url(group)).toEqual(true);
-    });
-    
-});
-
-//dateISO
-describe('Validate > Unit > Validator > methods > dateISO', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.dateISO(group)).toEqual(true);
-    });
-
-    it('should return false for group containing a non-spec value', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="12/12/12" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.dateISO(group)).toEqual(false);
-    });
-
-    it('should return true for group containing an on-spec value', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="2019-05-14" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.dateISO(group)).toEqual(true);
-    });
-    
-});
-
-//number
-describe('Validate > Unit > Validator > methods > number', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.number(group)).toEqual(true);
-    });
-
-    it('should return false for group containing a non-spec value', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="no" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.number(group)).toEqual(false);
-    });
-
-    it('should return true for group containing an on-spec value', () => {
-        document.body.innerHTML = `<form>
-            <input type="text" name="field1" id="field1" value="100" />
-            <input type="text" name="field2" id="field2" value="0.100" />
-            <input type="text" name="field3" id="field3" value="-100" />
-        </form>`;
-        const group1 = {
-            validators: [],
-            fields: [document.querySelector('#field1')]
-        };
-        expect(Methods.number(group1)).toEqual(true);
-        const group2 = {
-            validators: [],
-            fields: [document.querySelector('#field2')]
-        };
-        expect(Methods.number(group2)).toEqual(true);
-        const group3 = {
-            validators: [],
-            fields: [document.querySelector('#field3')]
-        };
-        expect(Methods.number(group3)).toEqual(true);
-    });
-    
-});
-
-
-//digits
-describe('Validate > Unit > Validator > methods > digits', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.digits(group)).toEqual(true);
-    });
-
-    it('should return false for group containing a non-spec value', () => {
-        document.body.innerHTML = `<form>
-            <input type="text" name="field" id="field1" value="no" />
-            <input type="text" name="field2" id="field2" value="0.100" />
-            <input type="text" name="field3" id="field3" value="-100" />
-        </form>`;
-        const group1 = {
-            validators: [],
-            fields: [document.querySelector('#field1')]
-        };
-        expect(Methods.digits(group1)).toEqual(false);
-        
-        const group2 = {
-            validators: [],
-            fields: [document.querySelector('#field2')]
-        };
-        expect(Methods.digits(group2)).toEqual(false);
-
-        const group3 = {
-            validators: [],
-            fields: [document.querySelector('#field3')]
-        };
-        expect(Methods.digits(group3)).toEqual(false);
-    });
-
-    it('should return true for group containing an on-spec value', () => {
-        document.body.innerHTML = `<form>
-            <input type="text" name="field1" id="field1" value="100" />
-        </form>`;
-        const group1 = {
-            validators: [],
-            fields: [document.querySelector('#field1')]
-        };
-        expect(Methods.digits(group1)).toEqual(true);
-    });
-    
-});
-
-
-//minlength
-describe('Validate > Unit > Validator > methods > minlength', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'minlength',
-                    params: { min: 3 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.minlength(group)).toEqual(true);
-    });
-
-    it('should return false for group with a value < min', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="no" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'minlength',
-                    params: { min: 3 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.minlength(group)).toEqual(false);
-    });
-
-    it('should return true for group with a value => min', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="fine" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'minlength',
-                    params: { min: 3 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.minlength(group)).toEqual(true);
-    });
-    
-});
-
-//maxlength
-describe('Validate > Unit > Validator > methods > maxlength', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'maxlength',
-                    params: { max: 3 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.maxlength(group)).toEqual(true);
-    });
-
-    it('should return false for group with a value > max', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="not good" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'maxlength',
-                    params: { max: 5 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.maxlength(group)).toEqual(false);
-    });
-
-    it('should return true for group with a value <= max', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="fine" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'maxlength',
-                    params: { max: 5 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.maxlength(group)).toEqual(true);
-    });
-    
-});
-
-//equalto
-describe('Validate > Unit > Validator > methods > equalto', () => {
-
-    it('should return true for groups with no value', () => {
-        document.body.innerHTML = `<form>
-            <input type="text" name="field1" id="field1" value="" />
-            <input type="text" name="field2" id="field2" value="" />
-        </form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'equalto',
-                    params: { other: [[document.querySelector('#field2')]] }
-                }
-            ],
-            fields: [document.querySelector('#field1')]
-        };
-        expect(Methods.equalto(group)).toEqual(true);
-    });
-
-    it('should return false for groups with unequal values', () => {
-        document.body.innerHTML = `<form>
-            <input type="text" name="field1" id="field1" value="Yes" />
-            <input type="text" name="field2" id="field2" value="No" />
-        </form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'equalto',
-                    params: { other: [[document.querySelector('#field2')]] }
-                }
-            ],
-            fields: [document.querySelector('#field1')]
-        };
-        expect(Methods.equalto(group)).toEqual(false);
-    });
-
-    it('should return true for groups with unequal values', () => {
-        document.body.innerHTML = `<form>
-            <input type="text" name="field1" id="field1" value="Yes" />
-            <input type="text" name="field2" id="field2" value="Yes" />
-        </form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'equalto',
-                    params: { other: [[document.querySelector('#field2')]] }
-                }
-            ],
-            fields: [document.querySelector('#field1')]
-        };
-        expect(Methods.equalto(group)).toEqual(true);
-    });
-    
-});
-
-
-//pattern
-describe('Validate > Unit > Validator > methods > pattern', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'pattern',
-                    params: { regex: /^(pass)$/ }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.pattern(group)).toEqual(true);
-    });
-
-    it('should return false for group with a non-matching value', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="fail" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'pattern',
-                    params: { regex: /^(pass)$/ }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.pattern(group)).toEqual(false);
-    });
-
-    it('should return false for group with a matching value', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="pass" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'pattern',
-                    params: { regex: /^(pass)$/ }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.pattern(group)).toEqual(true);
-    });
-    
-});
-
-
-//regex
-describe('Validate > Unit > Validator > methods > regex', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'regex',
-                    params: { pattern: /^(pass)$/ }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.regex(group)).toEqual(true);
-    });
-
-    it('should return false for group with a non-matching value', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="fail" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'regex',
-                    params: { pattern: /^(pass)$/ }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.regex(group)).toEqual(false);
-    });
-
-    it('should return false for group with a matching value', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="pass" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'regex',
-                    params: { pattern: /^(pass)$/ }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.regex(group)).toEqual(true);
-    });
-    
-});
-
-//min
-describe('Validate > Unit > Validator > methods > min', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'min',
-                    params: { min: 3 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.min(group)).toEqual(true);
-    });
-
-    it('should return false for group with a value < min', () => {
-        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="2" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'min',
-                    params: { min: 3 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.min(group)).toEqual(false);
-    });
-
-    it('should return true for group with a value => min', () => {
-        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="4" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'min',
-                    params: { min: 3 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.min(group)).toEqual(true);
-    });
-    
-});
-
-//max
-describe('Validate > Unit > Validator > methods > max', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'max',
-                    params: { max: 3 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.max(group)).toEqual(true);
-    });
-
-    it('should return false for group with a value > max', () => {
-        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="5" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'max',
-                    params: { max: 3 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.max(group)).toEqual(false);
-    });
-
-    it('should return true for group with a value <= max', () => {
-        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="3" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'max',
-                    params: { max: 5 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.max(group)).toEqual(true);
-    });
-    
-});
-
-
-//stringlength
-describe('Validate > Unit > Validator > methods > stringlength', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'stringlength',
-                    params: { max: 3 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.stringlength(group)).toEqual(true);
-    });
-
-    it('should return false for group with a value > max', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="not good" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'stringlength',
-                    params: { max: 5 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.stringlength(group)).toEqual(false);
-    });
-
-    it('should return true for group with a value <= max', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="fine" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'stringlength',
-                    params: { max: 5 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.stringlength(group)).toEqual(true);
-    });
-    
-});
-
-
-//length
-describe('Validate > Unit > Validator > methods > length', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'length',
-                    params: { min: 5, max: 8 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.length(group)).toEqual(true);
-    });
-
-    it('should return false for group with a value > max', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="A string that is too long" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'length',
-                    params: { min: 5, max: 8 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.length(group)).toEqual(false);
-    });
-
-    it('should return false for group with a value < min', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="no" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'length',
-                    params: { min: 5, max: 8 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.length(group)).toEqual(false);
-    });
-
-    it('should return true for group with a value >= min and <= max', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="Super" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'length',
-                    params: { min: 5, max: 8 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.length(group)).toEqual(true);
-    });
-    
-});
-
-
-//range
-describe('Validate > Unit > Validator > methods > range', () => {
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'range',
-                    params: { min: 5, max: 8 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.range(group)).toEqual(true);
-    });
-
-    it('should return false for group with a value > max', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="10" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'range',
-                    params: { min: 5, max: 8 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.range(group)).toEqual(false);
-    });
-
-    it('should return false for group with a value < min', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="4" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'range',
-                    params: { min: 5, max: 8 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.range(group)).toEqual(false);
-    });
-
-    it('should return true for group with a value >= min and <= max', () => {
-        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="5" /></form>`;
-        const group = {
-            validators: [
-                {
-                    type: 'range',
-                    params: { min: 5, max: 8 }
-                }
-            ],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.range(group)).toEqual(true);
-    });
-    
-});
-
-
-//remote
-describe('Validate > Unit > Validator > methods > remote', () => {
-
-    beforeEach(() => mock.setup());
-
-    afterEach(() => mock.teardown());
-
-    it('should return false for when the remote validation returns \'false\'', async () => {
-
-        mock.post('/api/validate', {
-            status: 201,
-            body: 'false'
-        });
-
-        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        const params = {
-            url: '/api/validate'
-        };
-        const res = await Methods.remote(group, params);
-        expect(res).toEqual('false');
-    });
-
-    it('should return false for when the remote validation returns "false"', async () => {
-
-        mock.post('/api/validate', {
-            status: 201,
-            body: 'true'
-        });
-
-        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        const params = {
-            url: '/api/validate'
-        };
-        const res = await Methods.remote(group, params);
-        expect(res).toEqual('true');
-    });
-
-
-});
-
-//custom
-describe('Validate > Unit > Validator > methods > custom', () => {
-    const customValidator = (value, fields) => value === 'Contrived validator';
-
-    it('should return true for group with no value that is not required', () => {
-        document.body.innerHTML = `<form><input name="field" id="field" value="" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.custom(customValidator, group)).toEqual(true);
-    });
-    
-    it('should return false when the custom validation function return false', () => {
-        document.body.innerHTML = `<form><input name="field" id="field" value="No" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.custom(customValidator, group)).toEqual(false);
-    });
-    
-    
-    it('should return true when the custom validation function return true', () => {
-        document.body.innerHTML = `<form><input name="field" id="field" value="Contrived validator" /></form>`;
-        const group = {
-            validators: [],
-            fields: [document.querySelector('#field')]
-        };
-        expect(Methods.custom(customValidator, group)).toEqual(true);
-    });
-
+import mock from 'xhr-mock';
+import Methods from '../../../../src/lib/validator/methods';
+
+//required
+describe('Validate > Unit > Validator > methods > required', () => {
+
+    it('should return false for group containing a single empty field', () => {
+        document.body.innerHTML = `<form><input name="field" id="field" value="" required /></form>`;
+        const group = { fields: [document.querySelector('#field')] };
+        expect(Methods.required(group)).toEqual(false);
+    });
+    
+    it('should return false for group  with no value', () => {
+        document.body.innerHTML = `<form>
+            <input type="checkbox" name="field" id="field-1" />
+            <input type="checkbox" name="field" id="field-2" />
+        </form>`;
+        const group = { fields: [document.querySelector('#field-1'), document.querySelector('#field-1')] };
+        expect(Methods.required(group)).toEqual(false);
+    });
+
+    it('should return true for a group with a single required field wuith a value', () => {
+        document.body.innerHTML = `<form><input name="field" id="field" value="Test" required /></form>`;
+        const group = { fields: [document.querySelector('#field')] };
+        expect(Methods.required(group)).toEqual(true);
+    });
+    
+    it('should return true for group with value', () => {
+        document.body.innerHTML = `<form>
+            <input type="checkbox" name="field" id="field-1" checked />
+            <input type="checkbox" name="field" id="field-2" />
+        </form>`;
+        const group = { fields: [document.querySelector('#field-1'), document.querySelector('#field-1')] };
+        expect(Methods.required(group)).toEqual(true);
+    });
+
+});
+
+
+//email
+describe('Validate > Unit > Validator > methods > email', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="email" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.email(group)).toEqual(true);
+    });
+
+    it('should return false for group containing a non-spec value', () => {
+        document.body.innerHTML = `<form><input type="email" name="field" id="field" value="no" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.email(group)).toEqual(false);
+    });
+
+    it('should return true for group containing an on-spec value', () => {
+        document.body.innerHTML = `<form><input type="email" name="field" id="field" value="me@email" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.email(group)).toEqual(true);
+    });
+
+});
+
+
+//url
+describe('Validate > Unit > Validator > methods > url', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="url" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.url(group)).toEqual(true);
+    });
+
+    it('should return false for group containing a non-spec value', () => {
+        document.body.innerHTML = `<form><input type="url" name="field" id="field" value="no" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.url(group)).toEqual(false);
+    });
+
+    it('should return true for group containing an on-spec value', () => {
+        document.body.innerHTML = `<form><input type="url" name="field" id="field" value="https://a.valid.url" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.url(group)).toEqual(true);
+    });
+    
+});
+
+//dateISO
+describe('Validate > Unit > Validator > methods > dateISO', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.dateISO(group)).toEqual(true);
+    });
+
+    it('should return false for group containing a non-spec value', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="12/12/12" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.dateISO(group)).toEqual(false);
+    });
+
+    it('should return true for group containing an on-spec value', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="2019-05-14" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.dateISO(group)).toEqual(true);
+    });
+    
+});
+
+//number
+describe('Validate > Unit > Validator > methods > number', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.number(group)).toEqual(true);
+    });
+
+    it('should return false for group containing a non-spec value', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="no" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.number(group)).toEqual(false);
+    });
+
+    it('should return true for group containing an on-spec value', () => {
+        document.body.innerHTML = `<form>
+            <input type="text" name="field1" id="field1" value="100" />
+            <input type="text" name="field2" id="field2" value="0.100" />
+            <input type="text" name="field3" id="field3" value="-100" />
+        </form>`;
+        const group1 = {
+            validators: [],
+            fields: [document.querySelector('#field1')]
+        };
+        expect(Methods.number(group1)).toEqual(true);
+        const group2 = {
+            validators: [],
+            fields: [document.querySelector('#field2')]
+        };
+        expect(Methods.number(group2)).toEqual(true);
+        const group3 = {
+            validators: [],
+            fields: [document.querySelector('#field3')]
+        };
+        expect(Methods.number(group3)).toEqual(true);
+    });
+    
+});
+
+
+//digits
+describe('Validate > Unit > Validator > methods > digits', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.digits(group)).toEqual(true);
+    });
+
+    it('should return false for group containing a non-spec value', () => {
+        document.body.innerHTML = `<form>
+            <input type="text" name="field" id="field1" value="no" />
+            <input type="text" name="field2" id="field2" value="0.100" />
+            <input type="text" name="field3" id="field3" value="-100" />
+        </form>`;
+        const group1 = {
+            validators: [],
+            fields: [document.querySelector('#field1')]
+        };
+        expect(Methods.digits(group1)).toEqual(false);
+        
+        const group2 = {
+            validators: [],
+            fields: [document.querySelector('#field2')]
+        };
+        expect(Methods.digits(group2)).toEqual(false);
+
+        const group3 = {
+            validators: [],
+            fields: [document.querySelector('#field3')]
+        };
+        expect(Methods.digits(group3)).toEqual(false);
+    });
+
+    it('should return true for group containing an on-spec value', () => {
+        document.body.innerHTML = `<form>
+            <input type="text" name="field1" id="field1" value="100" />
+        </form>`;
+        const group1 = {
+            validators: [],
+            fields: [document.querySelector('#field1')]
+        };
+        expect(Methods.digits(group1)).toEqual(true);
+    });
+    
+});
+
+
+//minlength
+describe('Validate > Unit > Validator > methods > minlength', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'minlength',
+                    params: { min: 3 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.minlength(group)).toEqual(true);
+    });
+
+    it('should return false for group with a value < min', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="no" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'minlength',
+                    params: { min: 3 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.minlength(group)).toEqual(false);
+    });
+
+    it('should return true for group with a value => min', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="fine" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'minlength',
+                    params: { min: 3 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.minlength(group)).toEqual(true);
+    });
+    
+});
+
+//maxlength
+describe('Validate > Unit > Validator > methods > maxlength', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'maxlength',
+                    params: { max: 3 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.maxlength(group)).toEqual(true);
+    });
+
+    it('should return false for group with a value > max', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="not good" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'maxlength',
+                    params: { max: 5 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.maxlength(group)).toEqual(false);
+    });
+
+    it('should return true for group with a value <= max', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="fine" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'maxlength',
+                    params: { max: 5 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.maxlength(group)).toEqual(true);
+    });
+    
+});
+
+//equalto
+describe('Validate > Unit > Validator > methods > equalto', () => {
+
+    it('should return true for groups with no value', () => {
+        document.body.innerHTML = `<form>
+            <input type="text" name="field1" id="field1" value="" />
+            <input type="text" name="field2" id="field2" value="" />
+        </form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'equalto',
+                    params: { other: [[document.querySelector('#field2')]] }
+                }
+            ],
+            fields: [document.querySelector('#field1')]
+        };
+        expect(Methods.equalto(group)).toEqual(true);
+    });
+
+    it('should return false for groups with unequal values', () => {
+        document.body.innerHTML = `<form>
+            <input type="text" name="field1" id="field1" value="Yes" />
+            <input type="text" name="field2" id="field2" value="No" />
+        </form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'equalto',
+                    params: { other: [[document.querySelector('#field2')]] }
+                }
+            ],
+            fields: [document.querySelector('#field1')]
+        };
+        expect(Methods.equalto(group)).toEqual(false);
+    });
+
+    it('should return true for groups with unequal values', () => {
+        document.body.innerHTML = `<form>
+            <input type="text" name="field1" id="field1" value="Yes" />
+            <input type="text" name="field2" id="field2" value="Yes" />
+        </form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'equalto',
+                    params: { other: [[document.querySelector('#field2')]] }
+                }
+            ],
+            fields: [document.querySelector('#field1')]
+        };
+        expect(Methods.equalto(group)).toEqual(true);
+    });
+    
+});
+
+
+//pattern
+describe('Validate > Unit > Validator > methods > pattern', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'pattern',
+                    params: { regex: /^(pass)$/ }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.pattern(group)).toEqual(true);
+    });
+
+    it('should return false for group with a non-matching value', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="fail" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'pattern',
+                    params: { regex: /^(pass)$/ }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.pattern(group)).toEqual(false);
+    });
+
+    it('should return false for group with a matching value', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="pass" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'pattern',
+                    params: { regex: /^(pass)$/ }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.pattern(group)).toEqual(true);
+    });
+    
+});
+
+
+//regex
+describe('Validate > Unit > Validator > methods > regex', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'regex',
+                    params: { pattern: /^(pass)$/ }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.regex(group)).toEqual(true);
+    });
+
+    it('should return false for group with a non-matching value', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="fail" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'regex',
+                    params: { pattern: /^(pass)$/ }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.regex(group)).toEqual(false);
+    });
+
+    it('should return false for group with a matching value', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="pass" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'regex',
+                    params: { pattern: /^(pass)$/ }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.regex(group)).toEqual(true);
+    });
+    
+});
+
+//min
+describe('Validate > Unit > Validator > methods > min', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'min',
+                    params: { min: 3 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.min(group)).toEqual(true);
+    });
+
+    it('should return false for group with a value < min', () => {
+        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="2" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'min',
+                    params: { min: 3 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.min(group)).toEqual(false);
+    });
+
+    it('should return true for group with a value => min', () => {
+        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="4" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'min',
+                    params: { min: 3 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.min(group)).toEqual(true);
+    });
+    
+});
+
+//max
+describe('Validate > Unit > Validator > methods > max', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'max',
+                    params: { max: 3 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.max(group)).toEqual(true);
+    });
+
+    it('should return false for group with a value > max', () => {
+        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="5" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'max',
+                    params: { max: 3 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.max(group)).toEqual(false);
+    });
+
+    it('should return true for group with a value <= max', () => {
+        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="3" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'max',
+                    params: { max: 5 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.max(group)).toEqual(true);
+    });
+    
+});
+
+
+//stringlength
+describe('Validate > Unit > Validator > methods > stringlength', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'stringlength',
+                    params: { max: 3 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.stringlength(group)).toEqual(true);
+    });
+
+    it('should return false for group with a value > max', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="not good" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'stringlength',
+                    params: { max: 5 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.stringlength(group)).toEqual(false);
+    });
+
+    it('should return true for group with a value <= max', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="fine" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'stringlength',
+                    params: { max: 5 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.stringlength(group)).toEqual(true);
+    });
+    
+});
+
+
+//length
+describe('Validate > Unit > Validator > methods > length', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'length',
+                    params: { min: 5, max: 8 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.length(group)).toEqual(true);
+    });
+
+    it('should return false for group with a value > max', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="A string that is too long" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'length',
+                    params: { min: 5, max: 8 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.length(group)).toEqual(false);
+    });
+
+    it('should return false for group with a value < min', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="no" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'length',
+                    params: { min: 5, max: 8 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.length(group)).toEqual(false);
+    });
+
+    it('should return true for group with a value >= min and <= max', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="Super" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'length',
+                    params: { min: 5, max: 8 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.length(group)).toEqual(true);
+    });
+    
+});
+
+
+//range
+describe('Validate > Unit > Validator > methods > range', () => {
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'range',
+                    params: { min: 5, max: 8 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.range(group)).toEqual(true);
+    });
+
+    it('should return false for group with a value > max', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="10" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'range',
+                    params: { min: 5, max: 8 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.range(group)).toEqual(false);
+    });
+
+    it('should return false for group with a value < min', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="4" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'range',
+                    params: { min: 5, max: 8 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.range(group)).toEqual(false);
+    });
+
+    it('should return true for group with a value >= min and <= max', () => {
+        document.body.innerHTML = `<form><input type="text" name="field" id="field" value="5" /></form>`;
+        const group = {
+            validators: [
+                {
+                    type: 'range',
+                    params: { min: 5, max: 8 }
+                }
+            ],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.range(group)).toEqual(true);
+    });
+    
+});
+
+
+//remote
+describe('Validate > Unit > Validator > methods > remote', () => {
+
+    beforeEach(() => mock.setup());
+
+    afterEach(() => mock.teardown());
+
+    it('should return false for when the remote validation returns \'false\'', async () => {
+
+        mock.post('/api/validate', {
+            status: 201,
+            body: 'false'
+        });
+
+        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        const params = {
+            url: '/api/validate'
+        };
+        const res = await Methods.remote(group, params);
+        expect(res).toEqual('false');
+    });
+
+    it('should return false for when the remote validation returns "false"', async () => {
+
+        mock.post('/api/validate', {
+            status: 201,
+            body: 'true'
+        });
+
+        document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        const params = {
+            url: '/api/validate'
+        };
+        const res = await Methods.remote(group, params);
+        expect(res).toEqual('true');
+    });
+
+
+});
+
+//custom
+describe('Validate > Unit > Validator > methods > custom', () => {
+    const customValidator = (value, fields) => value === 'Contrived validator';
+
+    it('should return true for group with no value that is not required', () => {
+        document.body.innerHTML = `<form><input name="field" id="field" value="" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.custom(customValidator, group)).toEqual(true);
+    });
+    
+    it('should return false when the custom validation function return false', () => {
+        document.body.innerHTML = `<form><input name="field" id="field" value="No" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.custom(customValidator, group)).toEqual(false);
+    });
+    
+    
+    it('should return true when the custom validation function return true', () => {
+        document.body.innerHTML = `<form><input name="field" id="field" value="Contrived validator" /></form>`;
+        const group = {
+            validators: [],
+            fields: [document.querySelector('#field')]
+        };
+        expect(Methods.custom(customValidator, group)).toEqual(true);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/unit/validator/post-validation.js b/packages/validate/__tests__/jest/unit/validator/post-validation.js
similarity index 98%
rename from packages/validate/__tests__/unit/validator/post-validation.js
rename to packages/validate/__tests__/jest/unit/validator/post-validation.js
index d2efa429..1194d25e 100644
--- a/packages/validate/__tests__/unit/validator/post-validation.js
+++ b/packages/validate/__tests__/jest/unit/validator/post-validation.js
@@ -1,4 +1,4 @@
-import validate from '../../../src/';
+import validate from '../../../../src/';
 
 //isSubmitButton
 describe('Validate > Unit > postValidation', () => {
diff --git a/packages/validate/__tests__/unit/validator/utils.js b/packages/validate/__tests__/jest/unit/validator/utils.js
similarity index 99%
rename from packages/validate/__tests__/unit/validator/utils.js
rename to packages/validate/__tests__/jest/unit/validator/utils.js
index a0374663..25404446 100644
--- a/packages/validate/__tests__/unit/validator/utils.js
+++ b/packages/validate/__tests__/jest/unit/validator/utils.js
@@ -13,7 +13,7 @@ import {
     escapeAttributeValue,
     extractValueFromGroup,
     findErrors
-} from '../../../src/lib/validator/utils';
+} from '../../../../src/lib/validator/utils';
 
 describe('Validate > Unit > Utils > isCheckable', () => {
     it('should return true if the field is of type radio', async () => {
diff --git a/packages/validate/__tests__/playwright/playwright.spec.js b/packages/validate/__tests__/playwright/playwright.spec.js
new file mode 100644
index 00000000..b0704d58
--- /dev/null
+++ b/packages/validate/__tests__/playwright/playwright.spec.js
@@ -0,0 +1,20 @@
+const { test, expect } = require('@playwright/test');
+import AxeBuilder from '@axe-core/playwright';
+
+let tabKey;
+
+test.beforeEach(async ({ page }, testInfo) => {
+	await page.goto('/');
+	tabKey = testInfo.project.use.defaultBrowserType === 'webkit'
+			? "Alt+Tab"
+			: "Tab";
+});
+
+
+test.describe('Outliner > Axe', { tag: '@reduced'}, () => {
+	test('Should not have any automatically detectable accessibility issues', async ({ page }) => {	
+		const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); 
+		expect(accessibilityScanResults.violations).toEqual([]);
+	});
+});
+
diff --git a/packages/validate/example/src/index.html b/packages/validate/example/src/index.html
index 76f44b5e..ef1797e2 100644
--- a/packages/validate/example/src/index.html
+++ b/packages/validate/example/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
     <title>StormID</title>
     <style>
@@ -145,134 +145,78 @@
     </style>
   </head>
   <body>
-    <!-- <form class="js-validate" action="" autocomplete="off">
-        <input type="hidden" name="hidden-field" value="" required />
-        <div class="form-group">
-            <label for="RequiredString1">Required String</label>
-            <input class="form-control" type="text" id="RequiredString1" name="RequiredString1" value="" required />
-        </div>
-        <input type="submit" name="onward" value="Submit">
-        <input type="submit" name="onward" value="Submit and continue">
-    </form> -->
-    <!-- <button class="js-add">Required last field</button>
-    <form class="js-validate" action="#" autocomplete="off">
-        <input type="hidden" name="hidden-field" value="" required />
-        <div class="form-group">
-            <label for="RequiredString1">Required String</label>
-            <input class="form-control" type="text" id="RequiredString1" name="RequiredString1" value="" required />
-        </div>
-        <div class="form-group">
-            <label for="Password">Required Password</label>
-            <input class="form-control" type="password" id="Password" name="Password" value="" required />
-        </div>
-        <div class="form-group">
-            <label for="Later">Required later</label>
-            <input class="form-control" type="text" id="Later" name="Later" value="" />
-        </div>
-        <input type="submit" formaction="#back" value="Back">
-        <input type="submit" name="onward" value="Submit">
-        <input type="submit" value="Submit">
-    </form> -->
-    <!-- <button class="js-add">Required last field</button>
-    <form class="js-validate" action="#" autocomplete="off">
-        <div class="form-group">
-            <label for="RequiredString1">Required String</label>
-            <input class="form-control" type="text" id="RequiredString1" name="RequiredString1" value="" required />
-        </div>
-        <div class="form-group">
-            <label for="Later">Required later</label>
-            <input class="form-control" type="text" id="Later" name="Later" value="" />
-        </div>
-        <input type="submit" value="Submit">
-    </form> -->
-    <!-- <form class="js-validate" action="#" autocomplete="off">
-        <div class="form-group">
-            <label for="RequiredString1">Required String</label>
-            <input class="form-control" type="text" id="RequiredString1" name="RequiredString1" value="" required />
-        </div>
-        <div class="form-group">
-            <label for="Later">Required later</label>
-            <input class="form-control" type="hidden" id="Later" name="something" value="" />
-        </div>
-        <input type="submit" value="Submit">
-    </form> -->
-    <!-- <form class="js-validate" action="#" autocomplete="off">
-        <div class="form-group">
-            <label for="f1">Field 1</label>
-            <span data-valmsg-for="f1"></span>
-            <input class="form-control" id="f1" name="f1" value="" data-val="true" data-val-required="This field is required" type="email" data-val-email="{{value}} is not a valid email address"/>
-        </div>
-        <div class="form-group">
-            <label for="f2">Field 2</label>
-            <input class="form-control" id="f2" name="f2" value="" data-val="true" data-val-required="This field is required" />
-        </div>
-        <input type="submit" value="Submit">
-    </form> -->
-
-    <form class="js-validate" action="#" autocomplete="off">
-        <fieldset class="form-group">
-            <legend>Radios</legend>
-            <span data-valmsg-for="radio"></span>
-            <div class="boolean-group">
-                <input type="radio" id="radio-1" name="radio" data-val="true" data-val-required="Select an option" />
-                <label for="radio-1">option 1</label>
+    <main>
+        <h1>Validate example</h1>
+        <form class="js-validate" action="#" autocomplete="off">
+            <fieldset class="form-group">
+                <legend>Radios</legend>
+                <span data-valmsg-for="radio"></span>
+                <div class="boolean-group">
+                    <input type="radio" id="radio-1" name="radio" data-val="true" data-val-required="Select an option" />
+                    <label for="radio-1">option 1</label>
+                </div>
+                <div class="boolean-group">
+                    <input type="radio" id="radio-2" name="radio" data-val="true" data-val-required="Select an option" />
+                    <label for="radio-2">option 2</label>
+                </div>
+                <div class="boolean-group">
+                    <input type="radio" id="radio-3" name="radio" data-val="true" data-val-required="Select an option" />
+                    <label for="radio-3">option 3</label>
+                </div>
+                <div class="boolean-group">
+                    <input type="radio" id="radio-4" name="radio" data-val="true" data-val-required="Select an option" />
+                    <label for="radio-4">option 4</label>
+                </div>
+            </fieldset>
+            <fieldset class="form-group">
+                <legend>Checkboxes</legend>
+                <span data-valmsg-for="checkbox"></span>
+                <div class="boolean-group">
+                    <input type="checkbox" id="checkbox-1" name="checkbox" data-val="true" data-val-required="Select an option" />
+                    <label for="checkbox-1">option 1</label>
+                </div>
+                <div class="boolean-group">
+                    <input type="checkbox" id="checkbox-2" name="checkbox" data-val="true" data-val-required="Select an option" />
+                    <label for="checkbox-2">option 2</label>
+                </div>
+                <div class="boolean-group">
+                    <input type="checkbox" id="checkbox-3" name="checkbox" data-val="true" data-val-required="Select an option" />
+                    <label for="checkbox-3">option 3</label>
+                </div>
+                <div class="boolean-group">
+                    <input type="checkbox" id="radio-4" name="checkbox" data-val="true" data-val-required="Select an option" />
+                    <label for="checkbox-4">option 4</label>
+                </div>
+            </fieldset>
+            <fieldset class="form-group">          
+                <legend>Checkbox</legend>  
+                <span data-valmsg-for="checkbox-single"></span>
+                <div class="boolean-group">
+                    <input type="checkbox" id="checkbox" name="checkbox-single" data-val="true" data-val-required="Must check this to continue" />
+                    <label for="checkbox">option 1</label>
+                </div>
+            </fieldset>
+            <div class="input input--date">
+                <fieldset class="input__fieldset">
+                    <legend class="input__legend">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit?
+                    </legend>
+                    <div class="input input--date__day">
+                        <label for="dateDay" class="input__label">Day</label>
+                        <input id="dateDay" name="dateDay" type="text" class="input__input" />
+                    </div>
+                    <div class="input input--date__month">
+                        <label for="dateMonth" class="input__label">Month</label>
+                        <input id="dateDay" name="dateDay" type="text" class="input__input" />
+                    </div>
+                    <div class="input input--date__year">
+                        <label for="dateYear" class="input__label">Year</label>
+                        <input id="dateYear" name="dateYear" type="text" class="input__input" />
+                    </div>
+                </fieldset>
             </div>
-            <div class="boolean-group">
-                <input type="radio" id="radio-2" name="radio" data-val="true" data-val-required="Select an option" />
-                <label for="radio-2">option 2</label>
-            </div>
-            <div class="boolean-group">
-                <input type="radio" id="radio-3" name="radio" data-val="true" data-val-required="Select an option" />
-                <label for="radio-3">option 3</label>
-            </div>
-            <div class="boolean-group">
-                <input type="radio" id="radio-4" name="radio" data-val="true" data-val-required="Select an option" />
-                <label for="radio-4">option 4</label>
-            </div>
-        </fieldset>
-        <fieldset class="form-group">
-            <legend>Checkboxes</legend>
-            <span data-valmsg-for="checkbox"></span>
-            <div class="boolean-group">
-                <input type="checkbox" id="checkbox-1" name="checkbox" data-val="true" data-val-required="Select an option" />
-                <label for="checkbox-1">option 1</label>
-            </div>
-            <div class="boolean-group">
-                <input type="checkbox" id="checkbox-2" name="checkbox" data-val="true" data-val-required="Select an option" />
-                <label for="checkbox-2">option 2</label>
-            </div>
-            <div class="boolean-group">
-                <input type="checkbox" id="checkbox-3" name="checkbox" data-val="true" data-val-required="Select an option" />
-                <label for="checkbox-3">option 3</label>
-            </div>
-            <div class="boolean-group">
-                <input type="checkbox" id="radio-4" name="checkbox" data-val="true" data-val-required="Select an option" />
-                <label for="checkbox-4">option 4</label>
-            </div>
-        </fieldset>
-        <fieldset class="form-group">          
-            <legend>Checkbox</legend>  
-            <span data-valmsg-for="checkbox-single"></span>
-            <div class="boolean-group">
-                <input type="checkbox" id="checkbox" name="checkbox-single" data-val="true" data-val-required="Must check this to continue" />
-                <label for="checkbox">option 1</label>
-            </div>
-        </fieldset>
-        <fieldset>
-            <legend>
-                <span>Date</span>
-                <span data-valmsg-for="date" id="date-error-message"></span>
-                <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
-                <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
-                <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
-            </legend>
-            <div class="flex">
-                <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" data-val-required="Enter a day" aria-required="true"/>
-                <input id="dateMonth" name="dateMonth" inputmode="numeric" data-val="true" data-val-required="Enter a month" aria-required="true"/>
-                <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" data-val-required="Enter a year" aria-required="true" />
-            </div>
-        </fieldset>
-        <input type="submit" value="Submit">
-    </form>
+            <input type="submit" value="Submit">
+        </form>
+    </main>
   </body>
 </html>
diff --git a/packages/validate/package.json b/packages/validate/package.json
index fe3092fd..e57ac058 100644
--- a/packages/validate/package.json
+++ b/packages/validate/package.json
@@ -27,9 +27,9 @@
   ],
   "scripts": {
     "build": "microbundle --name Validate",
-    "test": "jest --coverage",
-    "dev": "webpack-dev-server --config example/webpack.config.js",
-    "prod": "webpack --config example/webpack.config.js --mode production",
+    "test": "jest --coverage & npx playwright test",
+    "dev": "webpack-dev-server --config tools/webpack.config.js",
+    "prod": "webpack --config tools/webpack.config.js --mode production",
     "prepublish": "npm run -s build"
   },
   "gitHead": "946d630c5e4305c47fedab448cb135d95c7b03af"
diff --git a/packages/validate/playwright.config.js b/packages/validate/playwright.config.js
new file mode 100644
index 00000000..0968cfa7
--- /dev/null
+++ b/packages/validate/playwright.config.js
@@ -0,0 +1,16 @@
+
+const { defineConfig } = require('@playwright/test');
+const baseConfig = require('../../tools/playwright/config.base.js');
+const server = require('./tools/playwright.webpack.config.js');
+
+module.exports = defineConfig({
+    ...baseConfig,
+    use: {
+        ...baseConfig.use,
+        baseURL: `http://localhost:${server.devServer.port}/`,
+    },
+    webServer: {
+        ...baseConfig.webServer,
+        url: `http://localhost:${server.devServer.port}/`,
+    },
+});
\ No newline at end of file
diff --git a/packages/validate/tools/playwright.webpack.config.js b/packages/validate/tools/playwright.webpack.config.js
new file mode 100644
index 00000000..63aa6a3e
--- /dev/null
+++ b/packages/validate/tools/playwright.webpack.config.js
@@ -0,0 +1,8 @@
+const baseConfig = require('./webpack.config');
+
+module.exports = {
+    ...baseConfig,
+    devServer: {
+        port: 8090
+    }
+};
diff --git a/packages/validate/example/webpack.config.js b/packages/validate/tools/webpack.config.js
similarity index 100%
rename from packages/validate/example/webpack.config.js
rename to packages/validate/tools/webpack.config.js

From 031c3f5c509a2115c071ecaae1dcf11ab0c98419 Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Mon, 25 Aug 2025 16:33:55 +0100
Subject: [PATCH 02/14] pre-submit tests

---
 .../jest/unit/validator/post-validation.js    |  75 --
 .../__tests__/playwright/playwright.spec.js   |  57 +-
 packages/validate/example/src/index.html      | 864 ++++++++++++++----
 packages/validate/example/src/js/index.js     |  62 +-
 packages/validate/example/src/mini.html       | 640 +++++++++++++
 packages/validate/tools/webpack.config.js     |   5 +
 6 files changed, 1416 insertions(+), 287 deletions(-)
 delete mode 100644 packages/validate/__tests__/jest/unit/validator/post-validation.js
 create mode 100644 packages/validate/example/src/mini.html

diff --git a/packages/validate/__tests__/jest/unit/validator/post-validation.js b/packages/validate/__tests__/jest/unit/validator/post-validation.js
deleted file mode 100644
index 1194d25e..00000000
--- a/packages/validate/__tests__/jest/unit/validator/post-validation.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import validate from '../../../../src/';
-
-//isSubmitButton
-describe('Validate > Unit > postValidation', () => {
-
-    it('should add name/value to the form data if the submit button clicked has a name and value', async () => {
-        document.body.innerHTML  = `<form action="/test">
-            <label for="tautology">Label</label>
-            <input value="value" name="tautology" id="tautology" required>
-            <button class="submit-btn">Submit</button>
-            <button class="continue-btn" name="continue" value="1">Submit and continue</button>
-        </form>`;
-        const form = document.querySelector('form');
-        const mockSubmit = jest.fn(() => {
-            const data = new FormData(form);
-            let body = {};
-            for (let kv of data.entries()) {
-                body[kv[0]] = kv[1];
-            }
-            expect(body).toEqual({ tautology: 'value', continue: '1' });
-        });
-        const [ validator ] = validate(document.querySelector('form'), { submit: mockSubmit });
-        // const submitBtn = document.querySelector('.submit-btn');
-        const continueBtn = document.querySelector('.continue-btn');
-        continueBtn.focus();
-        await validator.validate({
-            target: form,
-            preventDefault(){}
-        });
-        expect(mockSubmit).toBeCalled();
-    });
-
-    it('should mutate the action attribute of the form if the submit button clicked has a formaction', async () => {
-        document.body.innerHTML  = `<form action="/default">
-            <label for="tautology">Label</label>
-            <input value="value" name="tautology" id="tautology" required>
-            <button class="submit-btn">Submit</button>
-            <button class="alt-btn" formaction="/alternative">Alternative handler</button>
-        </form>`;
-        const form = document.querySelector('form');
-        const mockSubmit = jest.fn(() => {
-            expect(form.getAttribute('action')).toEqual('/alternative');
-        });
-        const [ validator ] = validate(document.querySelector('form'), { submit: mockSubmit });
-        // const submitBtn = document.querySelector('.submit-btn');
-        const altBtn = document.querySelector('.alt-btn');
-        altBtn.focus();
-        await validator.validate({
-            target: form,
-            preventDefault(){}
-        });
-        expect(mockSubmit).toBeCalled();
-        expect(form.getAttribute('action')).toEqual('/default');
-    });
-
-    it('should call the presubmit hook pre-submit', async () => {
-        document.body.innerHTML  = `<form action="/default">
-            <label for="tautology">Label</label>
-            <input value="value" name="tautology" id="tautology" required>
-            <button class="submit-btn">Submit</button>
-        </form>`;
-        const form = document.querySelector('form');
-        // const mockSubmit = jest.fn();
-        const mockPreSubmit = jest.fn();
-        const [ validator ] = validate(document.querySelector('form'), {
-            preSubmitHook: mockPreSubmit
-        });
-        await validator.validate({
-            target: form,
-            preventDefault(){}
-        });
-        expect(mockPreSubmit).toBeCalled();
-    });
-
-});
\ No newline at end of file
diff --git a/packages/validate/__tests__/playwright/playwright.spec.js b/packages/validate/__tests__/playwright/playwright.spec.js
index b0704d58..24be7dbb 100644
--- a/packages/validate/__tests__/playwright/playwright.spec.js
+++ b/packages/validate/__tests__/playwright/playwright.spec.js
@@ -11,10 +11,65 @@ test.beforeEach(async ({ page }, testInfo) => {
 });
 
 
-test.describe('Outliner > Axe', { tag: '@reduced'}, () => {
+test.describe('Validate > Axe', { tag: '@reduced'}, () => {
 	test('Should not have any automatically detectable accessibility issues', async ({ page }) => {	
 		const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); 
 		expect(accessibilityScanResults.violations).toEqual([]);
 	});
 });
 
+
+test.describe('Validate > Post-validation', { tag: '@all'}, () => {
+
+	test('Should add correct user input to the form data if the form is valid', async ({ page }) => {	
+
+		await page.route('**/test', async (route, request) => {
+			const postData = request.postData();
+			const params = new URLSearchParams(postData);
+			expect(params.get('fname')).toBe('John');
+			expect(params.get('lname')).toBe('Doe');
+			await route.fulfill({ status: 200, body: 'OK' });
+		});
+
+		await page.goto('/mini.html');
+		await page.fill("#fname", "John");
+		await page.fill("#lname", "Doe");
+		await page.click("#submit");
+
+	});
+
+	test('Should mutate the action attribute of the form if the submit button clicked has a formaction', async ({ page }) => {
+
+		await page.route('**/alternative', async (route, request) => {
+			const postData = request.postData();
+			const params = new URLSearchParams(postData);
+			expect(params.get('fname')).toBe('John');
+			expect(params.get('lname')).toBe('Doe');
+			await route.fulfill({ status: 200, body: 'OK' });
+		});
+
+		await page.goto('/mini.html');
+		await page.locator('#submit').evaluate((button) => {
+			button.setAttribute('formaction', '/alternative');
+		});
+		await page.fill("#fname", "John");
+		await page.fill("#lname", "Doe");
+		await page.click("#submit");
+	});
+
+	test('Should call the presubmit hook pre-submit', async ({ page }) => {
+		await page.route('**/test', async (route, request) => {
+			const postData = request.postData();
+			const params = new URLSearchParams(postData);
+			expect(params.get('hiddenCheck')).toBe('true');
+			await route.fulfill({ status: 200, body: 'OK' });
+		});
+
+		await page.goto('/mini.html');
+		await page.fill("#fname", "John");
+		await page.fill("#lname", "Doe");
+		await page.click("#submit");
+	});
+	
+});
+
diff --git a/packages/validate/example/src/index.html b/packages/validate/example/src/index.html
index ef1797e2..24371b25 100644
--- a/packages/validate/example/src/index.html
+++ b/packages/validate/example/src/index.html
@@ -1,222 +1,740 @@
 <!doctype html>
 <html lang="en">
-  <head>
+
+<head>
     <title>StormID</title>
     <style>
-        * {
-            margin:0;
-            padding:0;
-            box-sizing:border-box;
-            font-family: sans-serif;
+        *,
+        *:before,
+        *:after {
+            -moz-box-sizing: border-box;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            font-family: Arial, Helvetica, sans-serif;
         }
+
         html,
+        body,
+        div,
+        span,
+        applet object,
+        iframe,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        p,
+        blockquote,
+        pre,
+        a,
+        abbr,
+        acronym,
+        address,
+        big,
+        cite,
+        code,
+        del,
+        dfn,
+        em,
+        font,
+        img,
+        ins,
+        kbd,
+        q,
+        s,
+        samp,
+        small,
+        strike,
+        strong,
+        sub,
+        sup,
+        tt,
+        var,
+        b,
+        u,
+        i,
+        center,
+        dl,
+        dt,
+        dd,
+        ol,
+        ul,
+        li,
+        fieldset,
+        form,
+        label,
+        legend,
+        table,
+        caption,
+        tbody,
+        tfoot,
+        thead,
+        tr,
+        th,
+        td,
+        article,
+        aside,
+        canvas,
+        details,
+        figcaption,
+        figure,
+        footer,
+        header,
+        hgroup,
+        menu,
+        nav,
+        section,
+        summary,
+        time,
+        mark,
+        audio,
+        video,
+        main {
+            background: transparent;
+            border: 0;
+            font-size: 100%;
+            margin: 0;
+            padding: 0;
+            vertical-align: baseline;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+        }
+
+        html,
+        body {
+            background-color: hsl(0, 0%, 96%);
+            min-height: 100%;
+        }
+
+        html {
+            color-scheme: light dark;
+            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%;
+            text-rendering: optimizeSpeed;
+            height: 100%;
+
+            &:focus-within {
+                scroll-behavior: smooth;
+            }
+        }
+
         body {
-            height:100%;
+            min-height: 100%;
+            min-width: 100%;
+            font-size: 100%;
+            line-height: 1.5;
+            color: hsl(0, 0%, 30%);
+        }
+
+        article,
+        aside,
+        details,
+        figcaption,
+        figure,
+        footer,
+        header,
+        hgroup,
+        menu,
+        nav,
+        section,
+        main {
+            display: block;
+        }
+
+        ol,
+        ul {
+            list-style: none;
         }
+
+        ins {
+            text-decoration: none;
+        }
+
+        mark {
+            font-style: italic;
+            font-weight: 700;
+        }
+
+        del {
+            text-decoration: line-through;
+        }
+
+        dfn {
+            font-style: italic;
+        }
+
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+
+        td {
+            vertical-align: top;
+        }
+
         hr {
-            height:1px;
-            width:100%;
-            display:block;
-            background:#ddd;
-            margin:24px 0;
-            border:0 none;
-        }
-        h1 {
-            font: 1.25rem/1.2 sans-serif;
-            margin-bottom:1.5rem;
-        }
-        h2 {
-            font: 1.1rem/1.2 sans-serif;
-            margin-bottom:12px;
-            padding-top:12px;
-        }
-        h3 {
-            font: 1rem/1.2 sans-serif;
-            margin-bottom:12px;
-            padding-top:12px;
-        }
-        p {
-            margin-bottom:1.5rem;
-        }
-        header {
-            width:100%;
-            padding:20px;
-            margin-bottom:40px;
-        }
-        .container {
-            clear:both;
-            overflow:hidden;
-            margin:0 auto;
-            width:80%;
-            max-width:1200px;
-        }
-        .row {
-            margin-left:-30px;
-            overflow:hidden
-        }
-        .field-validation-error,
-        .error-message {
-            background-color:darkred;
-            color:#fff !important;
-            font-size: .875rem;
-            padding: 4px 12px;
-            position: relative;
-            margin-top: 8px;
-            display: inline-block;
+            border: 0;
+            display: block;
+            height: 1px;
+            margin: 0;
+            padding: 0;
+        }
+
+        legend {
+            border: 0;
+            padding: 0;
+            white-space: normal;
+        }
+
+        figure {
+            margin: 0;
+        }
+
+        [hidden] {
+            display: none;
+        }
+
+        :focus {
+            outline: none;
+        }
+
+        :focus-visible {
+            outline: 4px solid transparent;
+            box-shadow: 0px 0px 0px 4px hsl(49, 98%, 56%);
+        }
+
+        img {
+            display: block;
+            border: 0;
+            max-width: 100%;
+            height: auto;
+        }
+
+        a {
+            color: black
+        }
+        a:hover,
+        a:focus,
+        a:active {
+            text-decoration: none;
+            text-decoration-skip-ink: auto;
+        }
+
+
+        strong,
+        b {
+            font-weight: 700;
+        }
+
+        em,
+        i {
+            font-style: italic;
         }
-        .field-validation-error:before,
-        .error:before {
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-weight: 400;
+        }
+
+        blockquote,
+        q {
+            quotes: none;
+        }
+
+        blockquote:before,
+        blockquote:after,
+        q:before,
+        q:after {
             content: '';
-            position: absolute;
-            bottom: 100%;
-            border-style: solid;
-            border-width: 0 5px 5px 5px;
-            border-color: transparent transparent firebrick transparent;
+            content: none;
         }
-        form {
-            padding:40px;
-            margin:0 auto;
-            max-width:900px;
+
+        address {
+            font-style: 400;
         }
-        fieldset {
-            border: 0 none;
+
+        legend {
+            border: 0;
+            padding: 0;
+            white-space: normal;
         }
-        .form-group {
-            margin:0 0 30px 0;
+
+        figure {
+            margin: 0;
         }
-        .boolean-group {
-            padding: 16px 16px 2px 16px;
+
+
+        sub,
+        sup {
+            font-size: 75%;
+            line-height: 0;
             position: relative;
-            background: #f8f8f8;
+            vertical-align: baseline;
         }
-        .boolean-group:last-child{
-            padding-bottom: 13px;
+
+        sup {
+            top: -0.5em;
         }
-        .boolean-group label {
-            padding-left:25px;
+
+        sub {
+            bottom: -0.25em;
         }
-        .boolean-group input {
-            position: absolute;
-            left:17px;
-            top:17px;
-            width:auto !important;
+
+        input,
+        button,
+        select {
+            -moz-appearance: none;
+            -webkit-appearance: none;
         }
-        label {
-            display: block;
-            font-size:.875rem;
-            margin-bottom: 5px;
-            padding:0;
+
+        input,
+        button,
+        select {
+            border: 0 none;
+            border-radius: 0;
+            padding: 0;
+            vertical-align: middle;
+        }
+
+        select::-ms-expand {
+            display: none;
+        }
+
+        input[type="search"] {
+            border-radius: 0;
+            -moz-appearance: none;
+            -webkit-appearance: none;
+        }
+
+        input[type="search"]::-webkit-search-decoration,
+        input[type="search"]::-webkit-search-cancel-button,
+        input[type="search"]::-webkit-search-results-button,
+        input[type="search"]::-webkit-search-results-decoration {
+            display: none;
+        }
+
+        input[type="checkbox"] {
+            -moz-appearance: checkbox;
+            -webkit-appearance: checkbox;
+        }
+
+        input[type="radio"] {
+            -moz-appearance: radio;
+            -webkit-appearance: radio;
+        }
+
+        input[type="range"] {
+            -moz-appearance: slider-horizontal;
+            -webkit-appearance: slider-horizontal;
         }
-        input:not([type=submit]),
+
+        select {
+            -moz-appearance: none;
+            -webkit-appearance: none;
+        }
+
+        button::-moz-focus-inner,
+        input::-moz-focus-inner {
+            border: 0;
+            padding: 0;
+        }
+
+
+        input,
+        button,
         textarea,
         select {
-            padding:16px;
+            font: inherit;
+            letter-spacing: inherit;
+            word-spacing: inherit;
+        }
+
+        button,
+        input[type="button"],
+        input[type="reset"],
+        input[type="submit"] {
+            border: 0 none;
+            cursor: pointer;
+            -webkit-appearance: button;
+        }
+
+        a[disabled],
+        button[disabled],
+        input[disabled] {
+            cursor: default;
+            pointer-events: none;
+        }
+
+        textarea {
+            overflow: auto;
+            vertical-align: top;
+            resize: vertical;
+            width: 100%;
+        }
+
+        .form {
+            margin: 0 auto 24px auto;
+            padding: 24px 24px;
+            max-width: 500px;
+            background-color: hsl(0, 0%, 96%);
+        }
+
+        .form-row {
+            margin-bottom: 18px;
+        }
+
+        .form-row:last-child {
+            margin-bottom: 0;
+        }
+
+        .fieldset {
+            margin-bottom: 48px;
+        }
+
+        .fieldset--secondary {
+            border-bottom: 0 none;
+        }
+
+        .legend {
+            margin-bottom: 12px;
+            font-size: 1.4rem;
+        }
+
+        .legend__hint {
             display: block;
-            width:100%;
-            border:0 none;
-            background-color:#f8f8f8;
-            border-bottom:1px solid #eee;
             font-size: 1rem;
         }
-        select {
-            height:48px;
-            border-radius: 0 !important;
-            padding:0;
-            border-bottom: 0 none;
+
+        .legend--secondary {
+            margin-bottom: 12px;
+            font-size: 1.2rem;
         }
-        input:not([type=submit]):focus,
-        textarea:focus {
-            outline: 0 none;
-            border-bottom:1px solid blue;
+
+        .label {
+            display: block;
         }
-        textarea {
-            min-height:150px;
-            resize: none;
-        }
-        input[type=submit] {
-            background-color:#191919;
-            padding:8px 16px;
-            color:#fff;
-            border:0 none;
-            float: right;
-            font-size: .95rem;
+
+        .label__hint {
+            display: block;
+            color: hsl(0, 0%, 30%);
+            font-size: 0.875rem;
+        }
+
+        .input {
+            width: 100%;
+            display: block;
+            padding: 0 calc(24px/2);
+            background-color: #ffffff;
+            border: 1px solid hsl(0, 0%, 70%);
+            appearance: none;
+            -moz-appearance: textfield;
+            height: 40px;
+            line-height: 36px;
+            margin-top: 8px;
+        }
+
+        .input::-webkit-outer-spin-button,
+        .input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+        }
+
+        .input:focus {
+            outline: 4px solid hsl(49, 98%, 56%);
+        }
+
+        .input:disabled,
+        .input[readonly] {
+            background-color: hsl(0, 0%, 96%);
+            pointer-events: none;
+            opacity: .7;
+        }
+
+        .select {
+            width: 100%;
+            display: block;
+            padding: 0 12px;
+            background-color: #ffffff;
+            border: 1px solid hsl(0, 0%, 70%);
+            height: 40px;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMjQgMjRIMFYwaDI0djI0eiIgZmlsbD0ibm9uZSIgb3BhY2l0eT0iLjg3Ii8+PHBhdGggZD0iTTE2LjU5IDguNTlMMTIgMTMuMTcgNy40MSA4LjU5IDYgMTBsNiA2IDYtNi0xLjQxLTEuNDF6Ii8+PC9zdmc+');
+            background-repeat: no-repeat, repeat;
+            background-position: right 6px top 50%, 0 0;
+        }
+
+        .checkbox, .radio {
+            display: block;
+            position: relative;
+            min-height: 24px;
+            padding: 0 0 0 36px;
+            clear: left;
+        }
+
+        .checkbox:not(:last-of-type), .radio:not(:last-of-type) {
+            margin-bottom: 12px;
+        }
+
+        .checkbox--flush, .radio--flush {
+            margin-bottom: 0 !important;
+        }
+
+        .checkbox__hint, .radio__hint {
+            font-size: 0.85rem;
+            display: block;
+            color: hsl(0, 0%, 50%);
+        }
+
+        .checkbox__input, .radio__input {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            left: 0;
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+            margin: 0;
+            opacity: 0;
+        }
+
+        .checkbox__label, .radio__label {
+            padding-top: 2px;
             cursor: pointer;
         }
+
+        .checkbox__label:before, .radio__label:before {
+            content: "";
+            text-align: center;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 24px;
+            height: 24px;
+            border: 1px solid hsl(0, 0%, 70%);
+            background-color: white;
+        }
+
+        .radio__label:before {
+            border-radius: 50%;
+        }
+
+        .checkbox__input:checked+.checkbox__label:after, .radio__input:checked+.radio__label:after {
+            content: "";
+            position: absolute;
+            top: 6px;
+            left: 5px;
+            width: 14px;
+            height: 8px;
+            transform: rotate(-45deg);
+            border: solid;
+            border-width: 0 0 3px 3px;
+            border-top-color: transparent;
+        }
+
+        .radio__input:checked+.radio__label:after {
+            border: none;
+            transform: none;
+            background-color:hsl(0, 0%, 30%);
+            border-radius: 50%;
+            width: 12px;
+            height: 12px;
+            left: 7px;
+        }
+
+        .checkbox__input:focus+.checkbox__label:before, .radio__input:focus+.radio__label:before {
+            outline: 4px solid hsl(49, 98%, 56%);
+        }
+
+        .error-message {
+            font-size: 0.85rem;
+            display: block;
+            font-weight: 700;
+        }
+
+        .btn {
+            line-height: 1;
+            background-color: transparent;
+            border: 1px solid hsl(0, 0%, 30%);
+            display: inline-block;
+            font-weight: 600;
+            padding: 12px 24px;
+            text-align: center;
+            text-decoration: none;
+            transition: background-color 0.15s ease;
+            color: black;
+        }
+
+        .btn:hover {
+            background-color: black;
+            color: white;
+        }
+
+        .btn:disabled {
+            opacity: .6;
+            cursor: default;
+        }
+
+        .btn:focus {
+            outline: 4px solid hsl(49, 98%, 56%);
+        }
+
+        .btn--text {
+            padding: 0;
+            background: transparent;
+            font-size: 1rem;
+            font-weight: bold;
+        }
+
+        .btn--text:hover {
+            background-color: transparent;
+            text-decoration: underline;
+        }
+        .push-bottom {
+            margin-bottom: 24px;
+        }
+        .push-bottom--half {
+            margin-bottom: 12px;
+        }
+        .flex {
+            display: flex;
+            gap: 12px;
+        }
     </style>
-  </head>
-  <body>
+</head>
+
+<body>
     <main>
         <h1>Validate example</h1>
-        <form class="js-validate" action="#" autocomplete="off">
-            <fieldset class="form-group">
-                <legend>Radios</legend>
-                <span data-valmsg-for="radio"></span>
-                <div class="boolean-group">
-                    <input type="radio" id="radio-1" name="radio" data-val="true" data-val-required="Select an option" />
-                    <label for="radio-1">option 1</label>
+
+        <form class="form js-validate" action="#">
+            <p class="push-bottom">All fields are required unless marked as optional.</p>
+            <fieldset class="fieldset">
+                <legend class="legend">
+                    <h1>Your details</h1>
+                </legend>
+                <div class="form-row">
+                    <label for="fname" class="label">First Name</label>
+                    <span class="error-message" data-valmsg-for="fname" />
+                    <input data-val="true" data-val-required="First name must not be empty" autocomplete="given-name"
+                        class="input" id="fname" name="fname" />
                 </div>
-                <div class="boolean-group">
-                    <input type="radio" id="radio-2" name="radio" data-val="true" data-val-required="Select an option" />
-                    <label for="radio-2">option 2</label>
+                <div class="form-row">
+                    <label for="lname" class="label">Last Name</label>
+                    <span class="error-message" data-valmsg-for="lname" />
+                    <input data-val="true" data-val-required="Last name must not be empty" autocomplete="family-name"
+                        class="input" id="lname" name="lname" />
                 </div>
-                <div class="boolean-group">
-                    <input type="radio" id="radio-3" name="radio" data-val="true" data-val-required="Select an option" />
-                    <label for="radio-3">option 3</label>
-                </div>
-                <div class="boolean-group">
-                    <input type="radio" id="radio-4" name="radio" data-val="true" data-val-required="Select an option" />
-                    <label for="radio-4">option 4</label>
+                <div class="form-row">
+                    <label for="aka" class="label">Also known as <span class="label__hint">Optional</span></label>
+                    <input class="input" id="aka" autocomplete="nickname " name="aka" />
                 </div>
+                <div class="form-row">
+                    <label for="email" class="label">Email</label>
+                    <span class="error-message" data-valmsg-for="email" />
+                    <input data-val="true" data-val-required="Email must not be empty"
+                        data-val-email="Email must be correct format" class="input" type="email" id="email"
+                        autocomplete="email" name="email" />
             </fieldset>
-            <fieldset class="form-group">
-                <legend>Checkboxes</legend>
-                <span data-valmsg-for="checkbox"></span>
-                <div class="boolean-group">
-                    <input type="checkbox" id="checkbox-1" name="checkbox" data-val="true" data-val-required="Select an option" />
-                    <label for="checkbox-1">option 1</label>
+            <fieldset class="fieldset">
+                <legend class="legend">Your preferences</legend>
+                <div class="push-bottom--half">Please tick at least one option below.</div>
+                <span class="error-message push-bottom--half" data-valmsg-for="opts" />
+                <div class="checkbox">
+                    <input class="checkbox__input" id="opt1" name="opts" type="checkbox" data-val="true"
+                        data-val-required="Select at least one option" />
+                    <label class="checkbox__label" for="opt1">Option 1</label>
+                </div>
+                <div class="checkbox">
+                    <input class="checkbox__input" id="opt2" name="opts" type="checkbox" data-val="true"
+                        data-val-required="Select at least one option" />
+                    <label class="checkbox__label" for="opt2">Option 2</label>
                 </div>
-                <div class="boolean-group">
-                    <input type="checkbox" id="checkbox-2" name="checkbox" data-val="true" data-val-required="Select an option" />
-                    <label for="checkbox-2">option 2</label>
+                <div class="checkbox">
+                    <input class="checkbox__input" id="opt3" name="opts" type="checkbox" data-val="true"
+                        data-val-required="Select at least one option" />
+                    <label class="checkbox__label" for="opt3">Option 3</label>
                 </div>
-                <div class="boolean-group">
-                    <input type="checkbox" id="checkbox-3" name="checkbox" data-val="true" data-val-required="Select an option" />
-                    <label for="checkbox-3">option 3</label>
+                <div class="checkbox">
+                    <input class="checkbox__input" id="opt4" name="opts" type="checkbox" data-val="true"
+                        data-val-required="Select at least one option" />
+                    <label class="checkbox__label" for="opt4">Option 4</label>
                 </div>
-                <div class="boolean-group">
-                    <input type="checkbox" id="radio-4" name="checkbox" data-val="true" data-val-required="Select an option" />
-                    <label for="checkbox-4">option 4</label>
+                <div class="checkbox">
+                    <input class="checkbox__input" id="opt5" name="opts" type="checkbox" data-val="true"
+                        data-val-required="Select at least one option" />
+                    <label class="checkbox__label" for="opt5">Option 5</label>
                 </div>
             </fieldset>
-            <fieldset class="form-group">          
-                <legend>Checkbox</legend>  
-                <span data-valmsg-for="checkbox-single"></span>
-                <div class="boolean-group">
-                    <input type="checkbox" id="checkbox" name="checkbox-single" data-val="true" data-val-required="Must check this to continue" />
-                    <label for="checkbox">option 1</label>
+            <fieldset class="fieldset">
+                <legend class="legend">Radios</legend>
+                <span data-valmsg-for="radio"></span>
+                <div class="radio">
+                    <input class="radio__input" type="radio" id="radio-1" name="radio" data-val="true"
+                        data-val-required="Select an option" />
+                    <label class="radio__label" for="radio-1">Radio option 1</label>
+                </div>
+                <div class="radio">
+                    <input class="radio__input" type="radio" id="radio-2" name="radio" data-val="true"
+                        data-val-required="Select an option" />
+                    <label class="radio__label" for="radio-2">Radio option 2</label>
+                </div>
+                <div class="radio">
+                    <input class="radio__input" type="radio" id="radio-3" name="radio" data-val="true"
+                        data-val-required="Select an option" />
+                    <label class="radio__label" for="radio-3">Radio option 3</label>
+                </div>
+                <div class="radio">
+                    <input class="radio__input" type="radio" id="radio-4" name="radio" data-val="true"
+                        data-val-required="Select an option" />
+                    <label class="radio__label" for="radio-4">Radio option 4</label>
                 </div>
             </fieldset>
-            <div class="input input--date">
-                <fieldset class="input__fieldset">
-                    <legend class="input__legend">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit?
-                    </legend>
-                    <div class="input input--date__day">
-                        <label for="dateDay" class="input__label">Day</label>
-                        <input id="dateDay" name="dateDay" type="text" class="input__input" />
+            <fieldset class="fieldset">
+                <legend class="legend">
+                    <span>Date</span>
+                    <span data-valmsg-for="date" id="date-error-message"></span>
+                    <span data-valmsg-for="dateDay" id="date-Day-error-message"></span>
+                    <span data-valmsg-for="dateMonth" id="date-Month-error-message"></span>
+                    <span data-valmsg-for="dateYear" id="date-Year-error-message"></span>
+                </legend>
+                <div class="flex">
+                    <div>
+                        <label for="dateDay" class="label">Day</label>
+                        <input id="dateDay" name="dateDay" inputmode="numeric" data-val="true" data-val-required="Enter a day" aria-required="true" class="input"/>
                     </div>
-                    <div class="input input--date__month">
-                        <label for="dateMonth" class="input__label">Month</label>
-                        <input id="dateDay" name="dateDay" type="text" class="input__input" />
+                    <div>
+                        <label for="dateMonth" class="label">Month</label>
+                        <input id="dateMonth" name="dateMonth" class="input" inputmode="numeric" data-val="true" data-val-required="Enter a month" aria-required="true"/>
                     </div>
-                    <div class="input input--date__year">
-                        <label for="dateYear" class="input__label">Year</label>
-                        <input id="dateYear" name="dateYear" type="text" class="input__input" />
+                    <div>
+                        <label for="dateYear" class="label">Year</label>
+                        <input id="dateYear" name="dateYear" inputmode="numeric" data-val="true" data-val-required="Enter a year" aria-required="true" class="input"/>
                     </div>
-                </fieldset>
-            </div>
-            <input type="submit" value="Submit">
+                </div>
+            </fieldset>
+            <fieldset class="fieldset">
+                <legend class="legend">Terms and conditions</legend>
+                <div class="checkbox">
+                    <input data-val="true" data-val-required="You must agree to proceed" class="checkbox__input"
+                        id="tcs" name="tcs" type="checkbox" />
+                    <label class="checkbox__label" for="tcs">
+                        I have read and agree to the <a href="#">terms and conditions</a>
+                    </label>
+                    <span class="field-validation-error" data-valmsg-for="tcs" />
+                </div>
+            </fieldset>
+            <button type="submit" class="btn" id="submit">Submit</button>
         </form>
+
+
     </main>
-  </body>
-</html>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/validate/example/src/js/index.js b/packages/validate/example/src/js/index.js
index 638b035f..b5357822 100644
--- a/packages/validate/example/src/js/index.js
+++ b/packages/validate/example/src/js/index.js
@@ -2,44 +2,30 @@ import validate from '../../../src';
 import { isValidDate, isFutureDate, isPastDate } from '../../../src/lib/plugins/methods/date';
 
 {
-    const [ validator ] = validate('form');
+    const formToValidate = document.querySelector('.js-validate');
+    const [ validator ] = validate(formToValidate, {
+        preSubmitHook: () => {
+            const hiddenCheck = document.createElement('input');
+            hiddenCheck.setAttribute('type', 'hidden');
+            hiddenCheck.setAttribute('name', 'hiddenCheck');
+            hiddenCheck.setAttribute('value', 'true');
+            formToValidate.appendChild(hiddenCheck);
+        }
+    });
 
-    validator.addMethod(
-        'date', //name of custom validation group
-        isValidDate, // date validation method imported from the library 
-        'Enter a valid date', // error message
-        [ document.getElementById('dateDay'), document.getElementById('dateMonth'), document.getElementById('dateYear') ] //date fields array [day, month, year]
-    );
-
-    validator.addMethod(
-        'date', //name of custom validation group
-        isFutureDate, // date validation method imported from the library 
-        'Enter a valid date in the future', // error message
-        [ document.getElementById('dateDay'), document.getElementById('dateMonth'), document.getElementById('dateYear') ] //date fields array [day, month, year]
-    );
-
-    // const later = document.getElementById('Later');
-    // document.querySelector('.js-add').addEventListener('click', e => {
-    //     if (later.hasAttribute('required')) {
-    //         later.removeAttribute('required');
-    //         validator[0].removeGroup(later.getAttribute('name'));
-    //     } else {
-    //         later.setAttribute('required', 'required');
-    //         validator[0].addGroup([later]);
-    //     }
-    // });
-    // const inputs = [ document.querySelector('#f1'), document.querySelector('#f2') ];
-    // validator.addMethod(
-    //     'CustomGroup',
-    //     (value, fields) => {
-    //         console.log(value);
-    //         console.log(inputs);
-    //         return inputs[0].value.trim() === 'potato' || inputs[1].value.trim() === 'potato';
-    //     },
-    //     'One of the inputs must be the word "potato"',
-    //     inputs
-    // );
-
-    console.log(validator.getState());
+    if(document.getElementById('dateDay') && document.getElementById('dateMonth') && document.getElementById('dateYear')) {
+        validator.addMethod(
+            'date', 
+            isValidDate, 
+            'Enter a valid date', 
+            [ document.getElementById('dateDay'), document.getElementById('dateMonth'), document.getElementById('dateYear') ] 
+        );
 
+        validator.addMethod(
+            'date', 
+            isFutureDate, 
+            'Enter a valid date in the future', 
+            [ document.getElementById('dateDay'), document.getElementById('dateMonth'), document.getElementById('dateYear') ] 
+        );
+    }
 };
\ No newline at end of file
diff --git a/packages/validate/example/src/mini.html b/packages/validate/example/src/mini.html
new file mode 100644
index 00000000..636003bc
--- /dev/null
+++ b/packages/validate/example/src/mini.html
@@ -0,0 +1,640 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>StormID</title>
+    <style>
+        *,
+        *:before,
+        *:after {
+            -moz-box-sizing: border-box;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            font-family: Arial, Helvetica, sans-serif;
+        }
+
+        html,
+        body,
+        div,
+        span,
+        applet object,
+        iframe,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        p,
+        blockquote,
+        pre,
+        a,
+        abbr,
+        acronym,
+        address,
+        big,
+        cite,
+        code,
+        del,
+        dfn,
+        em,
+        font,
+        img,
+        ins,
+        kbd,
+        q,
+        s,
+        samp,
+        small,
+        strike,
+        strong,
+        sub,
+        sup,
+        tt,
+        var,
+        b,
+        u,
+        i,
+        center,
+        dl,
+        dt,
+        dd,
+        ol,
+        ul,
+        li,
+        fieldset,
+        form,
+        label,
+        legend,
+        table,
+        caption,
+        tbody,
+        tfoot,
+        thead,
+        tr,
+        th,
+        td,
+        article,
+        aside,
+        canvas,
+        details,
+        figcaption,
+        figure,
+        footer,
+        header,
+        hgroup,
+        menu,
+        nav,
+        section,
+        summary,
+        time,
+        mark,
+        audio,
+        video,
+        main {
+            background: transparent;
+            border: 0;
+            font-size: 100%;
+            margin: 0;
+            padding: 0;
+            vertical-align: baseline;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+        }
+
+        html,
+        body {
+            background-color: hsl(0, 0%, 96%);
+            min-height: 100%;
+        }
+
+        html {
+            color-scheme: light dark;
+            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%;
+            text-rendering: optimizeSpeed;
+            height: 100%;
+
+            &:focus-within {
+                scroll-behavior: smooth;
+            }
+        }
+
+        body {
+            min-height: 100%;
+            min-width: 100%;
+            font-size: 100%;
+            line-height: 1.5;
+            color: hsl(0, 0%, 30%);
+        }
+
+        article,
+        aside,
+        details,
+        figcaption,
+        figure,
+        footer,
+        header,
+        hgroup,
+        menu,
+        nav,
+        section,
+        main {
+            display: block;
+        }
+
+        ol,
+        ul {
+            list-style: none;
+        }
+
+        ins {
+            text-decoration: none;
+        }
+
+        mark {
+            font-style: italic;
+            font-weight: 700;
+        }
+
+        del {
+            text-decoration: line-through;
+        }
+
+        dfn {
+            font-style: italic;
+        }
+
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+
+        td {
+            vertical-align: top;
+        }
+
+        hr {
+            border: 0;
+            display: block;
+            height: 1px;
+            margin: 0;
+            padding: 0;
+        }
+
+        legend {
+            border: 0;
+            padding: 0;
+            white-space: normal;
+        }
+
+        figure {
+            margin: 0;
+        }
+
+        [hidden] {
+            display: none;
+        }
+
+        :focus {
+            outline: none;
+        }
+
+        :focus-visible {
+            outline: 4px solid transparent;
+            box-shadow: 0px 0px 0px 4px hsl(49, 98%, 56%);
+        }
+
+        img {
+            display: block;
+            border: 0;
+            max-width: 100%;
+            height: auto;
+        }
+
+        a {
+            color: black
+        }
+        a:hover,
+        a:focus,
+        a:active {
+            text-decoration: none;
+            text-decoration-skip-ink: auto;
+        }
+
+
+        strong,
+        b {
+            font-weight: 700;
+        }
+
+        em,
+        i {
+            font-style: italic;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-weight: 400;
+        }
+
+        blockquote,
+        q {
+            quotes: none;
+        }
+
+        blockquote:before,
+        blockquote:after,
+        q:before,
+        q:after {
+            content: '';
+            content: none;
+        }
+
+        address {
+            font-style: 400;
+        }
+
+        legend {
+            border: 0;
+            padding: 0;
+            white-space: normal;
+        }
+
+        figure {
+            margin: 0;
+        }
+
+
+        sub,
+        sup {
+            font-size: 75%;
+            line-height: 0;
+            position: relative;
+            vertical-align: baseline;
+        }
+
+        sup {
+            top: -0.5em;
+        }
+
+        sub {
+            bottom: -0.25em;
+        }
+
+        input,
+        button,
+        select {
+            -moz-appearance: none;
+            -webkit-appearance: none;
+        }
+
+        input,
+        button,
+        select {
+            border: 0 none;
+            border-radius: 0;
+            padding: 0;
+            vertical-align: middle;
+        }
+
+        select::-ms-expand {
+            display: none;
+        }
+
+        input[type="search"] {
+            border-radius: 0;
+            -moz-appearance: none;
+            -webkit-appearance: none;
+        }
+
+        input[type="search"]::-webkit-search-decoration,
+        input[type="search"]::-webkit-search-cancel-button,
+        input[type="search"]::-webkit-search-results-button,
+        input[type="search"]::-webkit-search-results-decoration {
+            display: none;
+        }
+
+        input[type="checkbox"] {
+            -moz-appearance: checkbox;
+            -webkit-appearance: checkbox;
+        }
+
+        input[type="radio"] {
+            -moz-appearance: radio;
+            -webkit-appearance: radio;
+        }
+
+        input[type="range"] {
+            -moz-appearance: slider-horizontal;
+            -webkit-appearance: slider-horizontal;
+        }
+
+        select {
+            -moz-appearance: none;
+            -webkit-appearance: none;
+        }
+
+        button::-moz-focus-inner,
+        input::-moz-focus-inner {
+            border: 0;
+            padding: 0;
+        }
+
+
+        input,
+        button,
+        textarea,
+        select {
+            font: inherit;
+            letter-spacing: inherit;
+            word-spacing: inherit;
+        }
+
+        button,
+        input[type="button"],
+        input[type="reset"],
+        input[type="submit"] {
+            border: 0 none;
+            cursor: pointer;
+            -webkit-appearance: button;
+        }
+
+        a[disabled],
+        button[disabled],
+        input[disabled] {
+            cursor: default;
+            pointer-events: none;
+        }
+
+        textarea {
+            overflow: auto;
+            vertical-align: top;
+            resize: vertical;
+            width: 100%;
+        }
+
+        .form {
+            margin: 0 auto 24px auto;
+            padding: 24px 24px;
+            max-width: 500px;
+            background-color: hsl(0, 0%, 96%);
+        }
+
+        .form-row {
+            margin-bottom: 18px;
+        }
+
+        .form-row:last-child {
+            margin-bottom: 0;
+        }
+
+        .fieldset {
+            margin-bottom: 48px;
+        }
+
+        .fieldset--secondary {
+            border-bottom: 0 none;
+        }
+
+        .legend {
+            margin-bottom: 12px;
+            font-size: 1.4rem;
+        }
+
+        .legend__hint {
+            display: block;
+            font-size: 1rem;
+        }
+
+        .legend--secondary {
+            margin-bottom: 12px;
+            font-size: 1.2rem;
+        }
+
+        .label {
+            display: block;
+        }
+
+        .label__hint {
+            display: block;
+            color: hsl(0, 0%, 30%);
+            font-size: 0.875rem;
+        }
+
+        .input {
+            width: 100%;
+            display: block;
+            padding: 0 calc(24px/2);
+            background-color: #ffffff;
+            border: 1px solid hsl(0, 0%, 70%);
+            appearance: none;
+            -moz-appearance: textfield;
+            height: 40px;
+            line-height: 36px;
+            margin-top: 8px;
+        }
+
+        .input::-webkit-outer-spin-button,
+        .input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+        }
+
+        .input:focus {
+            outline: 4px solid hsl(49, 98%, 56%);
+        }
+
+        .input:disabled,
+        .input[readonly] {
+            background-color: hsl(0, 0%, 96%);
+            pointer-events: none;
+            opacity: .7;
+        }
+
+        .select {
+            width: 100%;
+            display: block;
+            padding: 0 12px;
+            background-color: #ffffff;
+            border: 1px solid hsl(0, 0%, 70%);
+            height: 40px;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMjQgMjRIMFYwaDI0djI0eiIgZmlsbD0ibm9uZSIgb3BhY2l0eT0iLjg3Ii8+PHBhdGggZD0iTTE2LjU5IDguNTlMMTIgMTMuMTcgNy40MSA4LjU5IDYgMTBsNiA2IDYtNi0xLjQxLTEuNDF6Ii8+PC9zdmc+');
+            background-repeat: no-repeat, repeat;
+            background-position: right 6px top 50%, 0 0;
+        }
+
+        .checkbox, .radio {
+            display: block;
+            position: relative;
+            min-height: 24px;
+            padding: 0 0 0 36px;
+            clear: left;
+        }
+
+        .checkbox:not(:last-of-type), .radio:not(:last-of-type) {
+            margin-bottom: 12px;
+        }
+
+        .checkbox--flush, .radio--flush {
+            margin-bottom: 0 !important;
+        }
+
+        .checkbox__hint, .radio__hint {
+            font-size: 0.85rem;
+            display: block;
+            color: hsl(0, 0%, 50%);
+        }
+
+        .checkbox__input, .radio__input {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            left: 0;
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+            margin: 0;
+            opacity: 0;
+        }
+
+        .checkbox__label, .radio__label {
+            padding-top: 2px;
+            cursor: pointer;
+        }
+
+        .checkbox__label:before, .radio__label:before {
+            content: "";
+            text-align: center;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 24px;
+            height: 24px;
+            border: 1px solid hsl(0, 0%, 70%);
+            background-color: white;
+        }
+
+        .radio__label:before {
+            border-radius: 50%;
+        }
+
+        .checkbox__input:checked+.checkbox__label:after, .radio__input:checked+.radio__label:after {
+            content: "";
+            position: absolute;
+            top: 6px;
+            left: 5px;
+            width: 14px;
+            height: 8px;
+            transform: rotate(-45deg);
+            border: solid;
+            border-width: 0 0 3px 3px;
+            border-top-color: transparent;
+        }
+
+        .radio__input:checked+.radio__label:after {
+            border: none;
+            transform: none;
+            background-color:hsl(0, 0%, 30%);
+            border-radius: 50%;
+            width: 12px;
+            height: 12px;
+            left: 7px;
+        }
+
+        .checkbox__input:focus+.checkbox__label:before, .radio__input:focus+.radio__label:before {
+            outline: 4px solid hsl(49, 98%, 56%);
+        }
+
+        .error-message {
+            font-size: 0.85rem;
+            display: block;
+            font-weight: 700;
+        }
+
+        .btn {
+            line-height: 1;
+            background-color: transparent;
+            border: 1px solid hsl(0, 0%, 30%);
+            display: inline-block;
+            font-weight: 600;
+            padding: 12px 24px;
+            text-align: center;
+            text-decoration: none;
+            transition: background-color 0.15s ease;
+            color: black;
+        }
+
+        .btn:hover {
+            background-color: black;
+            color: white;
+        }
+
+        .btn:disabled {
+            opacity: .6;
+            cursor: default;
+        }
+
+        .btn:focus {
+            outline: 4px solid hsl(49, 98%, 56%);
+        }
+
+        .btn--text {
+            padding: 0;
+            background: transparent;
+            font-size: 1rem;
+            font-weight: bold;
+        }
+
+        .btn--text:hover {
+            background-color: transparent;
+            text-decoration: underline;
+        }
+        .push-bottom {
+            margin-bottom: 24px;
+        }
+        .push-bottom--half {
+            margin-bottom: 12px;
+        }
+        .flex {
+            display: flex;
+            gap: 12px;
+        }
+    </style>
+</head>
+
+<body>
+    <main>
+        <h1>Validate example</h1>
+
+        <form class="form js-validate" method="post" action="/test">
+            <p class="push-bottom">All fields are required unless marked as optional.</p>
+            <fieldset class="fieldset">
+                <legend class="legend">
+                    <h1>Your details</h1>
+                </legend>
+                <div class="form-row">
+                    <label for="fname" class="label">First Name</label>
+                    <span class="error-message" data-valmsg-for="fname" />
+                    <input data-val="true" data-val-required="First name must not be empty" autocomplete="given-name"
+                        class="input" id="fname" name="fname" />
+                </div>
+                <div class="form-row">
+                    <label for="lname" class="label">Last Name</label>
+                    <span class="error-message" data-valmsg-for="lname" />
+                    <input data-val="true" data-val-required="Last name must not be empty" autocomplete="family-name"
+                        class="input" id="lname" name="lname" />
+                </div>
+            </fieldset>
+            <button type="submit" class="btn" id="submit">Submit</button>
+        </form>
+    </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/validate/tools/webpack.config.js b/packages/validate/tools/webpack.config.js
index a2d72d75..b7d58ac5 100644
--- a/packages/validate/tools/webpack.config.js
+++ b/packages/validate/tools/webpack.config.js
@@ -22,6 +22,11 @@ module.exports = {
             title: pkg.name,
             template: './example/src/index.html',
             filename: 'index.html'
+        }),
+        new HtmlWebpackPlugin({
+            title: pkg.name,
+            template: './example/src/mini.html',
+            filename: 'mini.html'
         })
     ],
     module: {

From f329c4eba21dca438275ec177a62cf906f05e87d Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Mon, 22 Sep 2025 14:06:06 +0100
Subject: [PATCH 03/14] error message tests

---
 .../playwright/accessibility.spec.js          |  19 +
 .../__tests__/playwright/errors.spec.js       |  78 +++
 ...wright.spec.js => post-validation.spec.js} |  10 -
 packages/validate/example/src/index.html      |   8 +-
 .../example/src/mini-no-server-errors.html    | 639 ++++++++++++++++++
 packages/validate/example/src/mini.html       |   7 +-
 packages/validate/tools/webpack.config.js     |   5 +
 7 files changed, 749 insertions(+), 17 deletions(-)
 create mode 100644 packages/validate/__tests__/playwright/accessibility.spec.js
 create mode 100644 packages/validate/__tests__/playwright/errors.spec.js
 rename packages/validate/__tests__/playwright/{playwright.spec.js => post-validation.spec.js} (85%)
 create mode 100644 packages/validate/example/src/mini-no-server-errors.html

diff --git a/packages/validate/__tests__/playwright/accessibility.spec.js b/packages/validate/__tests__/playwright/accessibility.spec.js
new file mode 100644
index 00000000..92c9014e
--- /dev/null
+++ b/packages/validate/__tests__/playwright/accessibility.spec.js
@@ -0,0 +1,19 @@
+const { test, expect } = require('@playwright/test');
+import AxeBuilder from '@axe-core/playwright';
+
+let tabKey;
+
+test.beforeEach(async ({ page }, testInfo) => {
+	await page.goto('/');
+	tabKey = testInfo.project.use.defaultBrowserType === 'webkit'
+			? "Alt+Tab"
+			: "Tab";
+});
+
+
+test.describe('Validate > Axe', { tag: '@reduced'}, () => {
+	test('Should not have any automatically detectable accessibility issues', async ({ page }) => {	
+		const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); 
+		expect(accessibilityScanResults.violations).toEqual([]);
+	});
+});
diff --git a/packages/validate/__tests__/playwright/errors.spec.js b/packages/validate/__tests__/playwright/errors.spec.js
new file mode 100644
index 00000000..66bc03c0
--- /dev/null
+++ b/packages/validate/__tests__/playwright/errors.spec.js
@@ -0,0 +1,78 @@
+const { test, expect } = require('@playwright/test');
+let tabKey;
+
+test.beforeEach(async ({ page }, testInfo) => {
+	await page.goto('/');
+	tabKey = testInfo.project.use.defaultBrowserType === 'webkit'
+			? "Alt+Tab"
+			: "Tab";
+});
+
+
+test.describe('Validate > Errors > Render errors', { tag: '@all'}, () => {
+
+	test('Should add an error message container if there is no serverErrorNode, and attributes to reflect invalidity', async ({ page }) => {	
+
+		await page.goto('/mini-no-server-errors.html');
+		await expect(page.locator("#fname-error-message")).toHaveCount(0);
+		await expect(page.locator("#lname-error-message")).toHaveCount(0);
+
+		await page.fill("#fname", "John");
+		await page.click("#submit");
+
+		await expect(page.locator("#fname-error-message")).toHaveCount(0);
+		await expect(page.locator("#lname-error-message")).toHaveCount(1);
+
+		const message = await page.evaluate(() => document.querySelector("#lname").getAttribute("data-val-required"));
+		await expect(page.locator("#lname-error-message")).toHaveText(message);
+		await expect(page.locator("#lname")).toHaveAttribute("aria-invalid", "true");
+		await expect(page.locator("#lname")).toHaveAttribute("aria-describedby", "lname-error-message");
+		await expect(page.locator("//*[@id='lname']//parent::div")).toHaveClass(/is--invalid/);
+
+	});
+
+	test('Should add an error message text node to a serverErrorNode, and attributes to reflect invalidity', async ({ page }) => {	
+
+		await page.goto('/mini.html');
+		await expect(page.locator("[data-valmsg-for='fname']")).toHaveCount(1);
+		await expect(page.locator("[data-valmsg-for='lname']")).toHaveCount(1);
+
+		const message1 = await page.evaluate(() => document.querySelector("#fname").getAttribute("data-val-required"));
+		const message2 = await page.evaluate(() => document.querySelector("#lname").getAttribute("data-val-required"));
+
+		await page.click("#submit");
+
+		await expect(page.locator("[data-valmsg-for='fname']")).toHaveText(message1);
+		await expect(page.locator("[data-valmsg-for='lname']")).toHaveText(message2);
+
+		await expect(page.locator("#fname")).toHaveAttribute("aria-invalid", "true");
+		await expect(page.locator("#fname")).toHaveAttribute("aria-describedby", "fname-error-message");
+		await expect(page.locator("//*[@id='fname']//parent::div")).toHaveClass(/is--invalid/);
+
+		await expect(page.locator("#lname")).toHaveAttribute("aria-invalid", "true");
+		await expect(page.locator("#lname")).toHaveAttribute("aria-describedby", "lname-error-message");
+		await expect(page.locator("//*[@id='lname']//parent::div")).toHaveClass(/is--invalid/);
+
+	});
+
+	test.only('Should replace text inside an error node completely, if text already exists', async ({ page }) => {	
+
+		await page.goto('/mini.html');
+
+		const fnameErrorNode = page.locator("[data-valmsg-for='fname']");
+		await expect(fnameErrorNode).toHaveCount(1);
+		
+		await fnameErrorNode.evaluate(node => {
+			const errorNode = document.createTextNode('The server dislikes the value of this field');
+			node.appendChild(errorNode);
+		});
+
+		const message1 = await page.evaluate(() => document.querySelector("#fname").getAttribute("data-val-required"));
+		await page.click("#submit");
+
+		await expect(fnameErrorNode).toHaveText(message1);
+
+	});
+	
+});
+
diff --git a/packages/validate/__tests__/playwright/playwright.spec.js b/packages/validate/__tests__/playwright/post-validation.spec.js
similarity index 85%
rename from packages/validate/__tests__/playwright/playwright.spec.js
rename to packages/validate/__tests__/playwright/post-validation.spec.js
index 24be7dbb..0c84aa05 100644
--- a/packages/validate/__tests__/playwright/playwright.spec.js
+++ b/packages/validate/__tests__/playwright/post-validation.spec.js
@@ -1,6 +1,4 @@
 const { test, expect } = require('@playwright/test');
-import AxeBuilder from '@axe-core/playwright';
-
 let tabKey;
 
 test.beforeEach(async ({ page }, testInfo) => {
@@ -11,14 +9,6 @@ test.beforeEach(async ({ page }, testInfo) => {
 });
 
 
-test.describe('Validate > Axe', { tag: '@reduced'}, () => {
-	test('Should not have any automatically detectable accessibility issues', async ({ page }) => {	
-		const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); 
-		expect(accessibilityScanResults.violations).toEqual([]);
-	});
-});
-
-
 test.describe('Validate > Post-validation', { tag: '@all'}, () => {
 
 	test('Should add correct user input to the form data if the form is valid', async ({ page }) => {	
diff --git a/packages/validate/example/src/index.html b/packages/validate/example/src/index.html
index 24371b25..b4509b40 100644
--- a/packages/validate/example/src/index.html
+++ b/packages/validate/example/src/index.html
@@ -621,13 +621,13 @@ <h1>Your details</h1>
                 </legend>
                 <div class="form-row">
                     <label for="fname" class="label">First Name</label>
-                    <span class="error-message" data-valmsg-for="fname" />
+                    <span class="error-message" data-valmsg-for="fname"></span>
                     <input data-val="true" data-val-required="First name must not be empty" autocomplete="given-name"
                         class="input" id="fname" name="fname" />
                 </div>
                 <div class="form-row">
                     <label for="lname" class="label">Last Name</label>
-                    <span class="error-message" data-valmsg-for="lname" />
+                    <span class="error-message" data-valmsg-for="lname"></span>
                     <input data-val="true" data-val-required="Last name must not be empty" autocomplete="family-name"
                         class="input" id="lname" name="lname" />
                 </div>
@@ -637,7 +637,7 @@ <h1>Your details</h1>
                 </div>
                 <div class="form-row">
                     <label for="email" class="label">Email</label>
-                    <span class="error-message" data-valmsg-for="email" />
+                    <span class="error-message" data-valmsg-for="email"></span>
                     <input data-val="true" data-val-required="Email must not be empty"
                         data-val-email="Email must be correct format" class="input" type="email" id="email"
                         autocomplete="email" name="email" />
@@ -645,7 +645,7 @@ <h1>Your details</h1>
             <fieldset class="fieldset">
                 <legend class="legend">Your preferences</legend>
                 <div class="push-bottom--half">Please tick at least one option below.</div>
-                <span class="error-message push-bottom--half" data-valmsg-for="opts" />
+                <span class="error-message push-bottom--half" data-valmsg-for="opts"></span>
                 <div class="checkbox">
                     <input class="checkbox__input" id="opt1" name="opts" type="checkbox" data-val="true"
                         data-val-required="Select at least one option" />
diff --git a/packages/validate/example/src/mini-no-server-errors.html b/packages/validate/example/src/mini-no-server-errors.html
new file mode 100644
index 00000000..26b951d6
--- /dev/null
+++ b/packages/validate/example/src/mini-no-server-errors.html
@@ -0,0 +1,639 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>StormID</title>
+    <style>
+        *,
+        *:before,
+        *:after {
+            -moz-box-sizing: border-box;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            font-family: Arial, Helvetica, sans-serif;
+        }
+
+        html,
+        body,
+        div,
+        span,
+        applet object,
+        iframe,
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        p,
+        blockquote,
+        pre,
+        a,
+        abbr,
+        acronym,
+        address,
+        big,
+        cite,
+        code,
+        del,
+        dfn,
+        em,
+        font,
+        img,
+        ins,
+        kbd,
+        q,
+        s,
+        samp,
+        small,
+        strike,
+        strong,
+        sub,
+        sup,
+        tt,
+        var,
+        b,
+        u,
+        i,
+        center,
+        dl,
+        dt,
+        dd,
+        ol,
+        ul,
+        li,
+        fieldset,
+        form,
+        label,
+        legend,
+        table,
+        caption,
+        tbody,
+        tfoot,
+        thead,
+        tr,
+        th,
+        td,
+        article,
+        aside,
+        canvas,
+        details,
+        figcaption,
+        figure,
+        footer,
+        header,
+        hgroup,
+        menu,
+        nav,
+        section,
+        summary,
+        time,
+        mark,
+        audio,
+        video,
+        main {
+            background: transparent;
+            border: 0;
+            font-size: 100%;
+            margin: 0;
+            padding: 0;
+            vertical-align: baseline;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+        }
+
+        html,
+        body {
+            background-color: hsl(0, 0%, 96%);
+            min-height: 100%;
+        }
+
+        html {
+            color-scheme: light dark;
+            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%;
+            text-rendering: optimizeSpeed;
+            height: 100%;
+
+            &:focus-within {
+                scroll-behavior: smooth;
+            }
+        }
+
+        body {
+            min-height: 100%;
+            min-width: 100%;
+            font-size: 100%;
+            line-height: 1.5;
+            color: hsl(0, 0%, 30%);
+        }
+
+        article,
+        aside,
+        details,
+        figcaption,
+        figure,
+        footer,
+        header,
+        hgroup,
+        menu,
+        nav,
+        section,
+        main {
+            display: block;
+        }
+
+        ol,
+        ul {
+            list-style: none;
+        }
+
+        ins {
+            text-decoration: none;
+        }
+
+        mark {
+            font-style: italic;
+            font-weight: 700;
+        }
+
+        del {
+            text-decoration: line-through;
+        }
+
+        dfn {
+            font-style: italic;
+        }
+
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+
+        td {
+            vertical-align: top;
+        }
+
+        hr {
+            border: 0;
+            display: block;
+            height: 1px;
+            margin: 0;
+            padding: 0;
+        }
+
+        legend {
+            border: 0;
+            padding: 0;
+            white-space: normal;
+        }
+
+        figure {
+            margin: 0;
+        }
+
+        [hidden] {
+            display: none;
+        }
+
+        :focus {
+            outline: none;
+        }
+
+        :focus-visible {
+            outline: 4px solid transparent;
+            box-shadow: 0px 0px 0px 4px hsl(49, 98%, 56%);
+        }
+
+        img {
+            display: block;
+            border: 0;
+            max-width: 100%;
+            height: auto;
+        }
+
+        a {
+            color: black
+        }
+        a:hover,
+        a:focus,
+        a:active {
+            text-decoration: none;
+            text-decoration-skip-ink: auto;
+        }
+
+
+        strong,
+        b {
+            font-weight: 700;
+        }
+
+        em,
+        i {
+            font-style: italic;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-weight: 400;
+        }
+
+        blockquote,
+        q {
+            quotes: none;
+        }
+
+        blockquote:before,
+        blockquote:after,
+        q:before,
+        q:after {
+            content: '';
+            content: none;
+        }
+
+        address {
+            font-style: 400;
+        }
+
+        legend {
+            border: 0;
+            padding: 0;
+            white-space: normal;
+        }
+
+        figure {
+            margin: 0;
+        }
+
+
+        sub,
+        sup {
+            font-size: 75%;
+            line-height: 0;
+            position: relative;
+            vertical-align: baseline;
+        }
+
+        sup {
+            top: -0.5em;
+        }
+
+        sub {
+            bottom: -0.25em;
+        }
+
+        input,
+        button,
+        select {
+            -moz-appearance: none;
+            -webkit-appearance: none;
+        }
+
+        input,
+        button,
+        select {
+            border: 0 none;
+            border-radius: 0;
+            padding: 0;
+            vertical-align: middle;
+        }
+
+        select::-ms-expand {
+            display: none;
+        }
+
+        input[type="search"] {
+            border-radius: 0;
+            -moz-appearance: none;
+            -webkit-appearance: none;
+        }
+
+        input[type="search"]::-webkit-search-decoration,
+        input[type="search"]::-webkit-search-cancel-button,
+        input[type="search"]::-webkit-search-results-button,
+        input[type="search"]::-webkit-search-results-decoration {
+            display: none;
+        }
+
+        input[type="checkbox"] {
+            -moz-appearance: checkbox;
+            -webkit-appearance: checkbox;
+        }
+
+        input[type="radio"] {
+            -moz-appearance: radio;
+            -webkit-appearance: radio;
+        }
+
+        input[type="range"] {
+            -moz-appearance: slider-horizontal;
+            -webkit-appearance: slider-horizontal;
+        }
+
+        select {
+            -moz-appearance: none;
+            -webkit-appearance: none;
+        }
+
+        button::-moz-focus-inner,
+        input::-moz-focus-inner {
+            border: 0;
+            padding: 0;
+        }
+
+
+        input,
+        button,
+        textarea,
+        select {
+            font: inherit;
+            letter-spacing: inherit;
+            word-spacing: inherit;
+        }
+
+        button,
+        input[type="button"],
+        input[type="reset"],
+        input[type="submit"] {
+            border: 0 none;
+            cursor: pointer;
+            -webkit-appearance: button;
+        }
+
+        a[disabled],
+        button[disabled],
+        input[disabled] {
+            cursor: default;
+            pointer-events: none;
+        }
+
+        textarea {
+            overflow: auto;
+            vertical-align: top;
+            resize: vertical;
+            width: 100%;
+        }
+
+        .form {
+            margin: 0 auto 24px auto;
+            padding: 24px 24px;
+            max-width: 500px;
+            background-color: hsl(0, 0%, 96%);
+        }
+
+        .form-row {
+            margin-bottom: 18px;
+        }
+
+        .form-row:last-child {
+            margin-bottom: 0;
+        }
+
+        .fieldset {
+            margin-bottom: 48px;
+        }
+
+        .fieldset--secondary {
+            border-bottom: 0 none;
+        }
+
+        .legend {
+            margin-bottom: 12px;
+            font-size: 1.4rem;
+        }
+
+        .legend__hint {
+            display: block;
+            font-size: 1rem;
+        }
+
+        .legend--secondary {
+            margin-bottom: 12px;
+            font-size: 1.2rem;
+        }
+
+        .label {
+            display: block;
+        }
+
+        .label__hint {
+            display: block;
+            color: hsl(0, 0%, 30%);
+            font-size: 0.875rem;
+        }
+
+        .input {
+            width: 100%;
+            display: block;
+            padding: 0 calc(24px/2);
+            background-color: #ffffff;
+            border: 1px solid hsl(0, 0%, 70%);
+            appearance: none;
+            -moz-appearance: textfield;
+            height: 40px;
+            line-height: 36px;
+            margin-top: 8px;
+            color: black;
+        }
+
+        .input::-webkit-outer-spin-button,
+        .input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+        }
+
+        .input:focus {
+            outline: 4px solid hsl(49, 98%, 56%);
+        }
+
+        .input:disabled,
+        .input[readonly] {
+            background-color: hsl(0, 0%, 96%);
+            pointer-events: none;
+            opacity: .7;
+        }
+
+        .select {
+            width: 100%;
+            display: block;
+            padding: 0 12px;
+            background-color: #ffffff;
+            border: 1px solid hsl(0, 0%, 70%);
+            height: 40px;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMjQgMjRIMFYwaDI0djI0eiIgZmlsbD0ibm9uZSIgb3BhY2l0eT0iLjg3Ii8+PHBhdGggZD0iTTE2LjU5IDguNTlMMTIgMTMuMTcgNy40MSA4LjU5IDYgMTBsNiA2IDYtNi0xLjQxLTEuNDF6Ii8+PC9zdmc+');
+            background-repeat: no-repeat, repeat;
+            background-position: right 6px top 50%, 0 0;
+        }
+
+        .checkbox, .radio {
+            display: block;
+            position: relative;
+            min-height: 24px;
+            padding: 0 0 0 36px;
+            clear: left;
+        }
+
+        .checkbox:not(:last-of-type), .radio:not(:last-of-type) {
+            margin-bottom: 12px;
+        }
+
+        .checkbox--flush, .radio--flush {
+            margin-bottom: 0 !important;
+        }
+
+        .checkbox__hint, .radio__hint {
+            font-size: 0.85rem;
+            display: block;
+            color: hsl(0, 0%, 50%);
+        }
+
+        .checkbox__input, .radio__input {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            left: 0;
+            width: 24px;
+            height: 24px;
+            cursor: pointer;
+            margin: 0;
+            opacity: 0;
+        }
+
+        .checkbox__label, .radio__label {
+            padding-top: 2px;
+            cursor: pointer;
+        }
+
+        .checkbox__label:before, .radio__label:before {
+            content: "";
+            text-align: center;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 24px;
+            height: 24px;
+            border: 1px solid hsl(0, 0%, 70%);
+            background-color: white;
+        }
+
+        .radio__label:before {
+            border-radius: 50%;
+        }
+
+        .checkbox__input:checked+.checkbox__label:after, .radio__input:checked+.radio__label:after {
+            content: "";
+            position: absolute;
+            top: 6px;
+            left: 5px;
+            width: 14px;
+            height: 8px;
+            transform: rotate(-45deg);
+            border: solid;
+            border-width: 0 0 3px 3px;
+            border-top-color: transparent;
+        }
+
+        .radio__input:checked+.radio__label:after {
+            border: none;
+            transform: none;
+            background-color:hsl(0, 0%, 30%);
+            border-radius: 50%;
+            width: 12px;
+            height: 12px;
+            left: 7px;
+        }
+
+        .checkbox__input:focus+.checkbox__label:before, .radio__input:focus+.radio__label:before {
+            outline: 4px solid hsl(49, 98%, 56%);
+        }
+
+        .error-message {
+            font-size: 0.85rem;
+            display: block;
+            font-weight: 700;
+        }
+
+        .btn {
+            line-height: 1;
+            background-color: transparent;
+            border: 1px solid hsl(0, 0%, 30%);
+            display: inline-block;
+            font-weight: 600;
+            padding: 12px 24px;
+            text-align: center;
+            text-decoration: none;
+            transition: background-color 0.15s ease;
+            color: black;
+        }
+
+        .btn:hover {
+            background-color: black;
+            color: white;
+        }
+
+        .btn:disabled {
+            opacity: .6;
+            cursor: default;
+        }
+
+        .btn:focus {
+            outline: 4px solid hsl(49, 98%, 56%);
+        }
+
+        .btn--text {
+            padding: 0;
+            background: transparent;
+            font-size: 1rem;
+            font-weight: bold;
+        }
+
+        .btn--text:hover {
+            background-color: transparent;
+            text-decoration: underline;
+        }
+        .push-bottom {
+            margin-bottom: 24px;
+        }
+        .push-bottom--half {
+            margin-bottom: 12px;
+        }
+        .flex {
+            display: flex;
+            gap: 12px;
+        }
+    </style>
+</head>
+
+<body>
+    <main>
+        <h1>Validate example</h1>
+
+        <form class="form js-validate" method="post" action="/test">
+            <p class="push-bottom">All fields are required unless marked as optional.</p>
+            <fieldset class="fieldset">
+                <legend class="legend">
+                    <h1>Your details</h1>
+                </legend>
+                <div class="form-row">
+                    <label for="fname" class="label">First Name</label>
+                    <input data-val="true" data-val-required="First name must not be empty" autocomplete="given-name"
+                        class="input" id="fname" name="fname" />
+                </div>
+                <div class="form-row">
+                    <label for="lname" class="label">Last Name</label>
+                    <input data-val="true" data-val-required="Last name must not be empty" autocomplete="family-name"
+                        class="input" id="lname" name="lname" />
+                </div>
+            </fieldset>
+            <button type="submit" class="btn" id="submit">Submit</button>
+        </form>
+    </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/validate/example/src/mini.html b/packages/validate/example/src/mini.html
index 636003bc..83ac5cc2 100644
--- a/packages/validate/example/src/mini.html
+++ b/packages/validate/example/src/mini.html
@@ -424,7 +424,7 @@
             display: block;
             color: hsl(0, 0%, 30%);
             font-size: 0.875rem;
-        }
+        }   
 
         .input {
             width: 100%;
@@ -437,6 +437,7 @@
             height: 40px;
             line-height: 36px;
             margin-top: 8px;
+            color: black
         }
 
         .input::-webkit-outer-spin-button,
@@ -621,13 +622,13 @@ <h1>Your details</h1>
                 </legend>
                 <div class="form-row">
                     <label for="fname" class="label">First Name</label>
-                    <span class="error-message" data-valmsg-for="fname" />
+                    <span class="error-message" data-valmsg-for="fname">Test</span>
                     <input data-val="true" data-val-required="First name must not be empty" autocomplete="given-name"
                         class="input" id="fname" name="fname" />
                 </div>
                 <div class="form-row">
                     <label for="lname" class="label">Last Name</label>
-                    <span class="error-message" data-valmsg-for="lname" />
+                    <span class="error-message" data-valmsg-for="lname"></span>
                     <input data-val="true" data-val-required="Last name must not be empty" autocomplete="family-name"
                         class="input" id="lname" name="lname" />
                 </div>
diff --git a/packages/validate/tools/webpack.config.js b/packages/validate/tools/webpack.config.js
index b7d58ac5..57b23866 100644
--- a/packages/validate/tools/webpack.config.js
+++ b/packages/validate/tools/webpack.config.js
@@ -27,6 +27,11 @@ module.exports = {
             title: pkg.name,
             template: './example/src/mini.html',
             filename: 'mini.html'
+        }),
+        new HtmlWebpackPlugin({
+            title: pkg.name,
+            template: './example/src/mini-no-server-errors.html',
+            filename: 'mini-no-server-errors.html'
         })
     ],
     module: {

From bd01f8e2159b4dbf2f02264e59080cff619ecd8b Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Mon, 22 Sep 2025 16:06:22 +0100
Subject: [PATCH 04/14] More playwright error tests

---
 .../__tests__/jest/unit/dom/errors.js         | 188 +-----------------
 .../__tests__/playwright/errors.spec.js       |  88 +++++++-
 .../example/src/mini-no-server-errors.html    |   2 -
 3 files changed, 90 insertions(+), 188 deletions(-)

diff --git a/packages/validate/__tests__/jest/unit/dom/errors.js b/packages/validate/__tests__/jest/unit/dom/errors.js
index 93e047af..94273517 100644
--- a/packages/validate/__tests__/jest/unit/dom/errors.js
+++ b/packages/validate/__tests__/jest/unit/dom/errors.js
@@ -2,8 +2,6 @@ import {
     h,
     clearError,
     clearErrors,
-    renderError,
-    renderErrors,
     updateMessageValues
 } from '../../../../src/lib/dom';
 import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
@@ -11,7 +9,7 @@ import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
 //clearError
 describe('Validate > Unit > DOM > clearError', () => {
     
-    it('should remove a client-side rendered errorNode container, remove invalid classNames and aria, and deletes the errorNode for the group from state', async () => {
+    it('should delete the errorNode for the group from state', async () => {
         document.body.innerHTML = `<form class="form" method="post" action="">
             <div class="is--invalid">
                 <label for="group1">Label</label>
@@ -32,38 +30,11 @@ describe('Validate > Unit > DOM > clearError', () => {
         };
         //all side effects to test
         clearError('group1')(mockState);
-        expect(document.getElementById('test-error-node')).toEqual(null);
-        expect(mockState.groups.group1.fields[0].classList.contains('is--invalid')).toEqual(false);
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-invalid')).toEqual(null);
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-describedby')).toEqual(null);
         expect(mockState.errors.group1).toBeUndefined();
     });
 
-    it('should remove the aria-describedby attribute relating to the error, but preserve other aria-describedby values', async () => {
-        document.body.innerHTML = `<form class="form" method="post" action="">
-            <h2 id="form-title">Title</h2>
-            <div class="is--invalid">
-                <label for="group1">Label</label>
-                <input id="group1" name="group1" aria-invalid="true" data-val="true" data-val-required="This field is required" aria-describedby="form-title test-error-node" />
-                <span id="test-error-node" class="field-validation-valid">This field is required</span>
-            </div>
-        </form>`;
-        const mockState = {
-            groups: {
-                group1: {
-                    serverErrorNode: false,
-                    fields: Array.from(document.getElementsByName('group1'))
-                }
-            },
-            errors: {
-                group1: document.getElementById('test-error-node')
-            }
-        };
-        clearError('group1')(mockState);
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-describedby')).toEqual('form-title');
-    });
-
-    it('should remove a server-side rendered text node, toggle serverNode classNames, remove invalid classNames and aria, and deletes the errorNode for the group from state', async () => {
+    
+    it('should remove a server-side rendered text node for the group from state', async () => {
         document.body.innerHTML = `<form class="form" method="post" action="">
             <div class="is--invalid">
                 <label for="group1">Label</label>
@@ -88,13 +59,6 @@ describe('Validate > Unit > DOM > clearError', () => {
         };
 
         clearError('group1')(mockState);
-        expect(document.getElementById('test-server-error-node').firstElementChild).toEqual(null);
-        expect(mockState.groups.group1.fields[0].classList.contains('is--invalid')).toEqual(false);
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-invalid')).toEqual(null);
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-describedby')).toEqual(null);
-        expect(mockState.groups.group1.serverErrorNode.classList.contains(DOTNET_CLASSNAMES.ERROR)).toEqual(false);
-        expect(mockState.groups.group1.serverErrorNode.classList.contains(DOTNET_CLASSNAMES.VALID)).toEqual(true);
-        expect(mockState.groups.group1.serverErrorNode.getAttribute('role')).toEqual(null);
         expect(mockState.errors.group1).toBeUndefined();
     });
 });
@@ -102,7 +66,7 @@ describe('Validate > Unit > DOM > clearError', () => {
 //clearErrors
 describe('Validate > Unit > DOM > clearErrors', () => {
     
-    it('should all errors and update DOM via clearError for each validation group', async () => {
+    it('Should remove all errors from state for valid groups', async () => {
         document.body.innerHTML = `<form class="form" method="post" action="">
             <div class="is--invalid">
                 <label for="group1">Label</label>
@@ -131,17 +95,8 @@ describe('Validate > Unit > DOM > clearErrors', () => {
                 group2: document.getElementById('test-error-node-2')
             }
         };
-        //all side effects to test
         clearErrors(mockState);
-        expect(document.getElementById('test-error-node-1')).toEqual(null);
-        expect(mockState.groups.group1.fields[0].classList.contains('is--invalid')).toEqual(false);
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-invalid')).toEqual(null);
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-describedby')).toEqual(null);
         expect(mockState.errors.group1).toBeUndefined();
-        expect(document.getElementById('test-error-node-2')).toEqual(null);
-        expect(mockState.groups.group2.fields[0].classList.contains('is--invalid')).toEqual(false);
-        expect(mockState.groups.group2.fields[0].getAttribute('aria-invalid')).toEqual(null);
-        expect(mockState.groups.group2.fields[0].getAttribute('aria-describedby')).toEqual(null);
         expect(mockState.errors.group2).toBeUndefined();
     });
     
@@ -169,147 +124,12 @@ describe('Validate > Unit > DOM > clearErrors', () => {
             },
             errors: {}
         };
-        //all side effects to test
         const copy = Object.assign({}, mockState);
         clearErrors(mockState);
         expect(copy).toEqual(mockState);
     });
 });
 
-//renderError
-describe('Validate > Unit > DOM > renderError', () => {
-
-    //add error message container client-side
-    it('Should add an error message container if there is no serverErrorNode, and attributes to reflect invalidity', async () => {
-
-        document.body.innerHTML = `<form class="form" method="post" action="">
-            <label id="test-label" for="group1">Text</label>
-            <input id="group1" name="group1" data-val="true" data-val-required="This field is required">
-        </form>`;
-        const mockState = {
-            groups: {
-                group1: {
-                    serverErrorNode: false,
-                    fields: Array.from(document.getElementsByName('group1')),
-                    errorMessages: ['This field is required']
-                }
-            },
-            errors: {}
-        };
-        renderError('group1')(mockState);
-        const errorContainer = document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`);
-        expect(errorContainer).not.toBeUndefined();
-        expect(errorContainer.textContent).toEqual('This field is required');
-        expect(errorContainer.id).toEqual('group1-error-message');
-        expect(mockState.groups.group1.fields[0].parentNode.classList.contains('is--invalid')).toEqual(true);
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-invalid')).toEqual('true');
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-describedby')).toEqual(errorContainer.id);
-    });
-
-    //add error to serverErrorNode
-    it('Should add an error message text node to a serverErrorNode, and attributes to reflect invalidity', async () => {
-
-        document.body.innerHTML = `<form class="form" method="post" action="">
-            <h2 id="title">Test</h2>
-            <label id="test-label" for="group1">Text</label>
-            <input id="group1" name="group1" data-val="true" data-val-required="This field is required" aria-describedby="title">
-            <span id="test-server-error-node" data-valmsg-for="group1" class="${DOTNET_CLASSNAMES.ERROR}"></span>
-        </form>`;
-        const serverErrorNode = document.getElementById('test-server-error-node');
-        const mockState = {
-            groups: {
-                group1: {
-                    serverErrorNode,
-                    fields: Array.from(document.getElementsByName('group1')),
-                    errorMessages: ['This field is required']
-                }
-            },
-            errors: {}
-        };
-        renderError('group1')(mockState);
-        expect(serverErrorNode.textContent).toEqual('This field is required');
-        expect(mockState.groups.group1.fields[0].parentNode.classList.contains('is--invalid')).toEqual(true);
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-invalid')).toEqual('true');
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-describedby')).toEqual(`title ${serverErrorNode.id}`);
-    });
-
-    //remove existing error and add new one
-    it('Should remove existing server-side rendered error before adding new one', async () => {
-
-        document.body.innerHTML = `<form class="form" method="post" action="">
-            <label id="test-label" for="group1">Text</label>
-            <input id="group1" name="group1" data-val="true" data-val-required="This field is required" aria-describedby="test-server-error-node">
-            <span id="test-server-error-node" data-valmsg-for="group1" class="${DOTNET_CLASSNAMES.ERROR}"></span>
-        </form>`;
-        //have to create a text node and append it to the serverError node to test fn this in isolation
-        const errorNode = document.createTextNode('The server dislikes the valule of this field');
-        const serverErrorNode = document.getElementById('test-server-error-node');
-        serverErrorNode.appendChild(errorNode);
-        const mockState = {
-            groups: {
-                group1: {
-                    serverErrorNode,
-                    fields: Array.from(document.getElementsByName('group1')),
-                    errorMessages: ['This field is required']
-                }
-            },
-            errors: {
-                group1: errorNode
-            }
-        };
-        renderError('group1')(mockState);
-        expect(serverErrorNode.textContent).toEqual('This field is required');
-        expect(mockState.groups.group1.fields[0].parentNode.classList.contains('is--invalid')).toEqual(true);
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-invalid')).toEqual('true');
-        expect(mockState.errors.group1).not.toEqual(errorNode);
-    });
-});
-
-//renderErrors
-describe('Validate > Unit > DOM > renderErrors', () => {
-
-    
-    it('Should add error messages for every invalid group in state', async () => {
-        document.body.innerHTML = `<form class="form" method="post" action="">
-            <div>
-                <label id="test-label" for="group1">Text</label>
-                <input id="group1" name="group1" data-val="true" data-val-required="This field is required">
-            </div>
-            <div>
-                <label id="test-label" for="group2">Text</label>
-                <input id="group2" name="group2" value="Has a value" data-val="true" data-val-required="This field is required">
-            </div>
-        </form>`;
-        const mockState = {
-            groups: {
-                group1: {
-                    serverErrorNode: false,
-                    fields: Array.from(document.getElementsByName('group1')),
-                    errorMessages: ['This field is required'],
-                    valid: false
-                },
-                group2: {
-                    serverErrorNode: false,
-                    fields: Array.from(document.getElementsByName('group2')),
-                    errorMessages: [],
-                    valid: true
-                }
-            },
-            errors: {}
-        };
-        renderErrors(mockState);
-        const errorContainer = document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`);
-        expect(errorContainer).not.toBeUndefined();
-        expect(errorContainer.id).toEqual('group1-error-message');
-        expect(errorContainer.textContent).toEqual('This field is required');
-        expect(mockState.groups.group1.fields[0].parentNode.classList.contains('is--invalid')).toEqual(true);
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-invalid')).toEqual('true');
-        expect(mockState.groups.group2.fields[0].parentNode.classList.contains('is--invalid')).toEqual(false);
-        expect(mockState.groups.group2.fields[0].getAttribute('aria-invalid')).toEqual(null);
-        expect(mockState.groups.group1.fields[0].getAttribute('aria-describedby')).toEqual(errorContainer.id);
-    });
-
-});
 
 
 //updateMessageValues
diff --git a/packages/validate/__tests__/playwright/errors.spec.js b/packages/validate/__tests__/playwright/errors.spec.js
index 66bc03c0..4b5ae453 100644
--- a/packages/validate/__tests__/playwright/errors.spec.js
+++ b/packages/validate/__tests__/playwright/errors.spec.js
@@ -55,13 +55,13 @@ test.describe('Validate > Errors > Render errors', { tag: '@all'}, () => {
 
 	});
 
-	test.only('Should replace text inside an error node completely, if text already exists', async ({ page }) => {	
+	test('Should replace text inside an error node completely, if text already exists', async ({ page }) => {	
 
 		await page.goto('/mini.html');
 
 		const fnameErrorNode = page.locator("[data-valmsg-for='fname']");
 		await expect(fnameErrorNode).toHaveCount(1);
-		
+
 		await fnameErrorNode.evaluate(node => {
 			const errorNode = document.createTextNode('The server dislikes the value of this field');
 			node.appendChild(errorNode);
@@ -76,3 +76,87 @@ test.describe('Validate > Errors > Render errors', { tag: '@all'}, () => {
 	
 });
 
+test.describe('Validate > Errors > Clear errors', { tag: '@all'}, () => {
+
+	test('Should empty a server-side rendered errorNode container, remove invalid classNames and aria', async ({ page }) => {	
+
+		await page.goto('/mini.html');
+		await page.click("#submit");
+
+		const fnameErrorNode = page.locator("[data-valmsg-for='fname']");
+		const lnameErrorNode = page.locator("[data-valmsg-for='lname']");
+
+		const message1 = await page.evaluate(() => document.querySelector("#fname").getAttribute("data-val-required"));
+		const message2 = await page.evaluate(() => document.querySelector("#lname").getAttribute("data-val-required"));
+
+		await expect(fnameErrorNode).toHaveCount(1);
+		await expect(lnameErrorNode).toHaveCount(1);
+
+		await expect(fnameErrorNode).toHaveText(message1);
+		await expect(lnameErrorNode).toHaveText(message2);
+		await expect(page.locator("#fname")).toHaveAttribute("aria-invalid", "true");
+		await expect(page.locator("#fname")).toHaveAttribute("aria-describedby", "fname-error-message");
+		await expect(page.locator("//*[@id='fname']//parent::div")).toHaveClass(/is--invalid/);
+		await expect(page.locator("#lname")).toHaveAttribute("aria-invalid", "true");
+		await expect(page.locator("#lname")).toHaveAttribute("aria-describedby", "lname-error-message");
+		await expect(page.locator("//*[@id='lname']//parent::div")).toHaveClass(/is--invalid/);
+
+		await page.fill("#fname", "John");
+		await page.fill("#lname", "Smith");
+
+		await expect(fnameErrorNode).toBeEmpty();
+		await expect(lnameErrorNode).toBeEmpty();
+		await expect(page.locator("#fname")).not.toHaveAttribute("aria-invalid");
+		await expect(page.locator("#fname")).not.toHaveAttribute("aria-describedby");
+		await expect(page.locator("//*[@id='fname']//parent::div")).not.toHaveClass(/is--invalid/);
+		await expect(page.locator("#lname")).not.toHaveAttribute("aria-invalid");
+		await expect(page.locator("#lname")).not.toHaveAttribute("aria-describedby");
+		await expect(page.locator("//*[@id='lname']//parent::div")).not.toHaveClass(/is--invalid/);
+	});
+
+	test('Should remove a client-side error node when valid', async ({ page }) => {	
+
+		await page.goto('/mini-no-server-errors.html');
+
+		await expect(page.locator("#fname-error-message")).toHaveCount(0);
+		await expect(page.locator("#lname-error-message")).toHaveCount(0);
+
+		await page.click("#submit");
+
+		await expect(page.locator("#fname-error-message")).toHaveCount(1);
+		await expect(page.locator("#lname-error-message")).toHaveCount(1);
+
+		await page.fill("#fname", "John");
+		await page.fill("#lname", "Smith");
+
+		await expect(page.locator("#fname-error-message")).toHaveCount(0);
+		await expect(page.locator("#lname-error-message")).toHaveCount(0);
+	});
+
+	test.only('Should remove the aria-describedby attribute relating to the error, but preserve other aria-describedby values', async ({ page }) => {	
+		await page.goto('/mini-no-server-errors.html');
+		await page.evaluate(() => {
+			const fname = document.getElementById('fname');
+			const lname = document.getElementById('lname');
+			const title = document.createElement('h2');
+			title.id = "form-title";
+			title.innerText = "Title";
+			fname.setAttribute('aria-describedby', 'form-title');
+			lname.setAttribute('aria-describedby', 'form-title');
+			fname.parentNode.insertBefore(title, fname);
+		});
+
+		await page.click("#submit");
+
+		await expect(page.locator("#fname")).toHaveAttribute("aria-describedby", "form-title fname-error-message");
+		await expect(page.locator("#lname")).toHaveAttribute("aria-describedby", "form-title lname-error-message");
+
+		await page.fill("#fname", "John");
+		await page.fill("#lname", "Smith");
+
+		await expect(page.locator("#fname")).toHaveAttribute("aria-describedby", "form-title");
+		await expect(page.locator("#lname")).toHaveAttribute("aria-describedby", "form-title");
+
+	});
+
+});
\ No newline at end of file
diff --git a/packages/validate/example/src/mini-no-server-errors.html b/packages/validate/example/src/mini-no-server-errors.html
index 26b951d6..b9201cc9 100644
--- a/packages/validate/example/src/mini-no-server-errors.html
+++ b/packages/validate/example/src/mini-no-server-errors.html
@@ -612,8 +612,6 @@
 
 <body>
     <main>
-        <h1>Validate example</h1>
-
         <form class="form js-validate" method="post" action="/test">
             <p class="push-bottom">All fields are required unless marked as optional.</p>
             <fieldset class="fieldset">

From 5bb0df9fa4f92be9acf77f1f6128b48e00f8672f Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Tue, 23 Sep 2025 11:46:17 +0100
Subject: [PATCH 05/14] error messages

---
 .../__tests__/jest/unit/{dom => }/errors.js   |  4 ++--
 .../__tests__/playwright/errors.spec.js       | 21 +++++++++++++++++--
 packages/validate/example/src/index.html      | 14 ++++++++++++-
 3 files changed, 34 insertions(+), 5 deletions(-)
 rename packages/validate/__tests__/jest/unit/{dom => }/errors.js (98%)

diff --git a/packages/validate/__tests__/jest/unit/dom/errors.js b/packages/validate/__tests__/jest/unit/errors.js
similarity index 98%
rename from packages/validate/__tests__/jest/unit/dom/errors.js
rename to packages/validate/__tests__/jest/unit/errors.js
index 94273517..09cef559 100644
--- a/packages/validate/__tests__/jest/unit/dom/errors.js
+++ b/packages/validate/__tests__/jest/unit/errors.js
@@ -3,8 +3,8 @@ import {
     clearError,
     clearErrors,
     updateMessageValues
-} from '../../../../src/lib/dom';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
+} from '../../../src/lib/dom';
+import { DOTNET_CLASSNAMES } from '../../../src/lib/constants';
 
 //clearError
 describe('Validate > Unit > DOM > clearError', () => {
diff --git a/packages/validate/__tests__/playwright/errors.spec.js b/packages/validate/__tests__/playwright/errors.spec.js
index 4b5ae453..fb4e9137 100644
--- a/packages/validate/__tests__/playwright/errors.spec.js
+++ b/packages/validate/__tests__/playwright/errors.spec.js
@@ -133,7 +133,7 @@ test.describe('Validate > Errors > Clear errors', { tag: '@all'}, () => {
 		await expect(page.locator("#lname-error-message")).toHaveCount(0);
 	});
 
-	test.only('Should remove the aria-describedby attribute relating to the error, but preserve other aria-describedby values', async ({ page }) => {	
+	test('Should remove the aria-describedby attribute relating to the error, but preserve other aria-describedby values', async ({ page }) => {	
 		await page.goto('/mini-no-server-errors.html');
 		await page.evaluate(() => {
 			const fname = document.getElementById('fname');
@@ -159,4 +159,21 @@ test.describe('Validate > Errors > Clear errors', { tag: '@all'}, () => {
 
 	});
 
-});
\ No newline at end of file
+});
+
+test.describe('Validate > Errors > Error message tokens', { tag: '@all'}, () => {
+
+	test('Should return an error message string containing the input value if the {{value}} token is found in the error message', async ({ page }) => {
+		await page.fill("#email", "test");
+		await page.click("#submit");
+		await expect(page.locator("#email-error-message")).toHaveText("test is not a valid email address");
+	});
+
+	test('Should return an error message with a comma delimited string of values if more than one field is in a group', async ({ page }) => {
+		await page.fill("#group1", "test");
+		await page.fill("#group2", "test2");
+		await page.click("#submit");
+		await expect(page.locator("#group1-error-message")).toHaveText("test, test2 are not valid inputs");
+	});
+
+});
diff --git a/packages/validate/example/src/index.html b/packages/validate/example/src/index.html
index b4509b40..0e6f1c6e 100644
--- a/packages/validate/example/src/index.html
+++ b/packages/validate/example/src/index.html
@@ -291,6 +291,7 @@
         select {
             -moz-appearance: none;
             -webkit-appearance: none;
+            color: black;
         }
 
         input,
@@ -639,7 +640,7 @@ <h1>Your details</h1>
                     <label for="email" class="label">Email</label>
                     <span class="error-message" data-valmsg-for="email"></span>
                     <input data-val="true" data-val-required="Email must not be empty"
-                        data-val-email="Email must be correct format" class="input" type="email" id="email"
+                        data-val-email="{{value}} is not a valid email address" class="input" type="email" id="email"
                         autocomplete="email" name="email" />
             </fieldset>
             <fieldset class="fieldset">
@@ -719,6 +720,17 @@ <h1>Your details</h1>
                     </div>
                 </div>
             </fieldset>
+            <fieldset class="fieldset">
+                <legend class="legend">Testing grouped validation</legend>
+                <div>
+                    <label id="test-label" for="group1">Text</label>
+                    <input id="group1" name="group1" value="test" data-val="true" data-val-regex="{{value}} are not valid inputs" data-val-regex-pattern="^http(s)?">
+                </div>
+                <div>
+                    <label id="test-label2" for="group2">Text</label>
+                    <input id="group2" name="group1" value="test2" data-val="true" data-val-regex="{{value}} are not valid inputs" data-val-regex-pattern="^http(s)?">
+                </div>
+            </fieldset>
             <fieldset class="fieldset">
                 <legend class="legend">Terms and conditions</legend>
                 <div class="checkbox">

From 1729e9c5240090d45ba082b80098b08de3d4a021 Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Tue, 23 Sep 2025 15:58:38 +0100
Subject: [PATCH 06/14] More work on errors and fixing post-validation

---
 .../validate/__tests__/jest/unit/dom/index.js |  85 -------------
 .../validate/__tests__/jest/unit/errors.js    |  86 --------------
 .../playwright/accessibility.spec.js          |  11 +-
 .../__tests__/playwright/errors.spec.js       |  35 ++----
 .../playwright/post-validation.spec.js        | 112 +++++++++++++-----
 packages/validate/example/src/index.html      |   2 +-
 .../example/src/mini-no-server-errors.html    |   2 +-
 packages/validate/example/src/mini.html       |   6 +-
 .../src/lib/validator/post-validation.js      |  21 ++--
 9 files changed, 121 insertions(+), 239 deletions(-)

diff --git a/packages/validate/__tests__/jest/unit/dom/index.js b/packages/validate/__tests__/jest/unit/dom/index.js
index 92e4a38b..34508018 100644
--- a/packages/validate/__tests__/jest/unit/dom/index.js
+++ b/packages/validate/__tests__/jest/unit/dom/index.js
@@ -1,95 +1,10 @@
 import {
-    h,
-    createErrorTextNode,
-    focusFirstInvalidField,
     createButtonValueNode,
     addAXAttributes
 } from '../../../../src/lib/dom';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
 
-describe('Validate > Unit > DOM > h', () => {
-    
 
-    it('should return a DOM node for given vNode arguments', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<div class="test"></div>`;
-        expect(h('div', { class: 'test' })).toEqual(document.body.firstElementChild);
-    });
-
-    it('should return a DOM node for given vNode arguments with text nodes', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<div class="test">Lorem ipsum</div>`;
-        expect(h('div', { class: 'test' }, 'Lorem ipsum')).toEqual(document.body.firstElementChild);
-    });
-
-});
-
-//createErrorTextNode
-describe('Validate > Unit > DOM > createErrorTextNode', () => {
-
-    it('should append a child text node to a group serverErrorNode for a given invalid group', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form class="form" method="post" action="">
-            <label for="group1-1">Text (required, min 2 characters, max 8 characters)</label>
-            <input id="group1-1" name="group1" data-val="true" data-val-length="Please enter between 2 and 8 characters" data-val-required="This field is required" data-val-length-min="2" data-val-length-max="8" type="text">
-            <span class="text-danger field-validation-valid" data-valmsg-for="group1" data-valmsg-replace="true"></span>
-        </form>`;
-        const serverErrorNode = document.querySelector('[data-valmsg-for="group1"]');
-        const mockGroup = { serverErrorNode };
-        const errorMessage = 'This field is required';
-        createErrorTextNode(mockGroup, errorMessage);
-        expect(serverErrorNode.textContent).toEqual('This field is required');
-        expect(document.querySelector('[data-valmsg-for="group1"]').classList.contains(DOTNET_CLASSNAMES.ERROR)).toEqual(true);
-    });
-    
-});
-
-//focusFirstInvalidField
-describe('Validate > Unit > DOM > focusFirstInvalidField', () => {
-    it('should focus on the first invalid field in a form post-validation', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form" method="post" action="">
-            <label for="group1">Text (required, min 2 characters, max 8 characters)</label>
-            <input id="group1" name="group1" data-val="true" data-val-length="Please enter between 2 and 8 characters" data-val-required="This field is required" data-val-length-min="2" data-val-length-max="8" type="text">
-            <span class="text-danger field-validation-valid" data-valmsg-for="group1" data-valmsg-replace="true"></span>
-            <label for="group2">Text (required, min 2 characters, max 8 characters)</label>
-            <input id="group2" name="group2" data-val="true" data-val-length="Please enter between 2 and 8 characters" data-val-required="This field is required" data-val-length-min="2" data-val-length-max="8" type="text">
-            <span class="text-danger field-validation-valid" data-valmsg-for="group2" data-valmsg-replace="true"></span>
-        </form>`;
-        const field = document.querySelector('#group2');
-        const mockState = {
-            groups: {
-                group1: {
-                    valid: true,
-                    fields: []
-                },
-                group2: {
-                    valid: false,
-                    fields: [field]
-                }
-            }
-        };
-        focusFirstInvalidField(mockState);
-        expect(document.activeElement).toEqual(field);
-    });
-});
 
-//createButtonValueNode
-describe('Validate > Unit > DOM > createButtonValueNode', () => {
-    it('should a hidden field duplicate of a given field, for conferring submit button values', async () => {
-        expect.assertions(3);
-        document.body.innerHTML = `<form class="form" method="post" action="">
-            <button name="continue" value="1">Continue</button>
-        </form>`;
-        const node = document.getElementsByName('continue')[0];
-        const form = document.querySelector('.form');
-        createButtonValueNode(node, form);
-        const lastElement = form.lastElementChild;
-        expect(lastElement.tagName).toEqual('INPUT');
-        expect(lastElement.getAttribute('name')).toEqual('continue');
-        expect(lastElement.getAttribute('value')).toEqual('1');
-    });
-});
 
 
 //addAXAttributes
diff --git a/packages/validate/__tests__/jest/unit/errors.js b/packages/validate/__tests__/jest/unit/errors.js
index 09cef559..18452b1d 100644
--- a/packages/validate/__tests__/jest/unit/errors.js
+++ b/packages/validate/__tests__/jest/unit/errors.js
@@ -2,7 +2,6 @@ import {
     h,
     clearError,
     clearErrors,
-    updateMessageValues
 } from '../../../src/lib/dom';
 import { DOTNET_CLASSNAMES } from '../../../src/lib/constants';
 
@@ -128,89 +127,4 @@ describe('Validate > Unit > DOM > clearErrors', () => {
         clearErrors(mockState);
         expect(copy).toEqual(mockState);
     });
-});
-
-
-
-//updateMessageValues
-describe('Validate > Unit > DOM > updateMessageValues', () => {
-    
-    it('Should return an error message string containing the input value if the {{value}} token is found in the error message', async () => {
-        document.body.innerHTML = `<form class="form" method="post" action="">
-            <div>
-                <label id="test-label" for="group1">Text</label>
-                <input id="group1" name="group1" value="test" data-val="true" type="email" data-val-email="{{value}} is not a valid email address">
-            </div>
-           
-        </form>`;
-        const mockState = {
-            groups: {
-                group1: {
-                    serverErrorNode: false,
-                    fields: Array.from(document.getElementsByName('group1')),
-                    errorMessages: ['{{value}} is not a valid email address'],
-                    valid: false
-                }
-            },
-            errors: {}
-        };
-        let message = updateMessageValues(mockState, 'group1');
-        expect(message).toEqual('test is not a valid email address');
-        
-    });
-
-    it('Should return an error message with a comma delimited string of values if more than one field is in a group', async () => {
-        document.body.innerHTML = `<form class="form" method="post" action="">
-            <div>
-                <label id="test-label" for="group1">Text</label>
-                <input id="group1" name="group1" value="test" data-val="true" data-val-regex="{{value}} are not valid inputs" data-val-regex-pattern="^http(s)?">
-            </div>
-            <div>
-                <label id="test-label2" for="group2">Text</label>
-                <input id="group2" name="group1" value="test2" data-val="true" data-val-regex="{{value}} are not valid inputs" data-val-regex-pattern="^http(s)?">
-            </div>
-        </form>`;
-        const mockState = {
-            groups: {
-                group1: {
-                    serverErrorNode: false,
-                    fields: Array.from(document.getElementsByName('group1')),
-                    errorMessages: ['{{value}} are not valid inputs'],
-                    valid: false
-                }
-            },
-            errors: {}
-        };
-        let message = updateMessageValues(mockState, 'group1');
-        expect(message).toEqual('test, test2 are not valid inputs');
-        
-    });
-
-    it('Should leave the error message unchanged if the {{value}} token is not found', async () => {
-        document.body.innerHTML = `<form class="form" method="post" action="">
-            <div>
-                <label id="test-label" for="group1">Text</label>
-                <input id="group1" name="group1" value="test" data-val="true" data-val-regex="These are not valid inputs" data-val-regex-pattern="^http(s)?">
-            </div>
-            <div>
-                <label id="test-label2" for="group2">Text</label>
-                <input id="group2" name="group1" value="test2" data-val="true" data-val-regex="These are not valid inputs" data-val-regex-pattern="^http(s)?">
-            </div>
-        </form>`;
-        const mockState = {
-            groups: {
-                group1: {
-                    serverErrorNode: false,
-                    fields: Array.from(document.getElementsByName('group1')),
-                    errorMessages: ['These are not valid inputs'],
-                    valid: false
-                }
-            },
-            errors: {}
-        };
-        let message = updateMessageValues(mockState, 'group1');
-        expect(message).toEqual('These are not valid inputs');
-        
-    });
-
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/playwright/accessibility.spec.js b/packages/validate/__tests__/playwright/accessibility.spec.js
index 92c9014e..441fd6f6 100644
--- a/packages/validate/__tests__/playwright/accessibility.spec.js
+++ b/packages/validate/__tests__/playwright/accessibility.spec.js
@@ -11,9 +11,18 @@ test.beforeEach(async ({ page }, testInfo) => {
 });
 
 
-test.describe('Validate > Axe', { tag: '@reduced'}, () => {
+test.describe('Validate > Accessibility > Axe', { tag: '@reduced'}, () => {
 	test('Should not have any automatically detectable accessibility issues', async ({ page }) => {	
 		const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); 
 		expect(accessibilityScanResults.violations).toEqual([]);
 	});
 });
+
+test.describe('Validate > Accessibility > focus', { tag: '@all'}, () => {
+	test('Should focus on the first invalid field in a form post-validation', async ({ page }) => {	
+		await page.goto('/mini.html');
+		await page.click('#submitTest');
+		const fNameInput = page.locator('#fname');
+		await expect(fNameInput).toBeFocused();
+	});
+});
diff --git a/packages/validate/__tests__/playwright/errors.spec.js b/packages/validate/__tests__/playwright/errors.spec.js
index fb4e9137..832b8cdb 100644
--- a/packages/validate/__tests__/playwright/errors.spec.js
+++ b/packages/validate/__tests__/playwright/errors.spec.js
@@ -18,7 +18,7 @@ test.describe('Validate > Errors > Render errors', { tag: '@all'}, () => {
 		await expect(page.locator("#lname-error-message")).toHaveCount(0);
 
 		await page.fill("#fname", "John");
-		await page.click("#submit");
+		await page.click("#submitTest");
 
 		await expect(page.locator("#fname-error-message")).toHaveCount(0);
 		await expect(page.locator("#lname-error-message")).toHaveCount(1);
@@ -40,7 +40,7 @@ test.describe('Validate > Errors > Render errors', { tag: '@all'}, () => {
 		const message1 = await page.evaluate(() => document.querySelector("#fname").getAttribute("data-val-required"));
 		const message2 = await page.evaluate(() => document.querySelector("#lname").getAttribute("data-val-required"));
 
-		await page.click("#submit");
+		await page.click("#submitTest");
 
 		await expect(page.locator("[data-valmsg-for='fname']")).toHaveText(message1);
 		await expect(page.locator("[data-valmsg-for='lname']")).toHaveText(message2);
@@ -52,28 +52,19 @@ test.describe('Validate > Errors > Render errors', { tag: '@all'}, () => {
 		await expect(page.locator("#lname")).toHaveAttribute("aria-invalid", "true");
 		await expect(page.locator("#lname")).toHaveAttribute("aria-describedby", "lname-error-message");
 		await expect(page.locator("//*[@id='lname']//parent::div")).toHaveClass(/is--invalid/);
-
 	});
 
 	test('Should replace text inside an error node completely, if text already exists', async ({ page }) => {	
-
 		await page.goto('/mini.html');
 
-		const fnameErrorNode = page.locator("[data-valmsg-for='fname']");
-		await expect(fnameErrorNode).toHaveCount(1);
-
-		await fnameErrorNode.evaluate(node => {
-			const errorNode = document.createTextNode('The server dislikes the value of this field');
-			node.appendChild(errorNode);
-		});
-
-		const message1 = await page.evaluate(() => document.querySelector("#fname").getAttribute("data-val-required"));
-		await page.click("#submit");
-
-		await expect(fnameErrorNode).toHaveText(message1);
+		const lnameErrorNode = page.locator("[data-valmsg-for='lname']");
+		await expect(lnameErrorNode).toHaveCount(1);
+		await expect(lnameErrorNode).toHaveText("Existing server error");
 
+		const message1 = await page.evaluate(() => document.querySelector("#lname").getAttribute("data-val-required"));
+		await page.click("#submitTest");
+		await expect(lnameErrorNode).toHaveText(message1);
 	});
-	
 });
 
 test.describe('Validate > Errors > Clear errors', { tag: '@all'}, () => {
@@ -81,7 +72,7 @@ test.describe('Validate > Errors > Clear errors', { tag: '@all'}, () => {
 	test('Should empty a server-side rendered errorNode container, remove invalid classNames and aria', async ({ page }) => {	
 
 		await page.goto('/mini.html');
-		await page.click("#submit");
+		await page.click("#submitTest");
 
 		const fnameErrorNode = page.locator("[data-valmsg-for='fname']");
 		const lnameErrorNode = page.locator("[data-valmsg-for='lname']");
@@ -121,7 +112,7 @@ test.describe('Validate > Errors > Clear errors', { tag: '@all'}, () => {
 		await expect(page.locator("#fname-error-message")).toHaveCount(0);
 		await expect(page.locator("#lname-error-message")).toHaveCount(0);
 
-		await page.click("#submit");
+		await page.click("#submitTest");
 
 		await expect(page.locator("#fname-error-message")).toHaveCount(1);
 		await expect(page.locator("#lname-error-message")).toHaveCount(1);
@@ -146,7 +137,7 @@ test.describe('Validate > Errors > Clear errors', { tag: '@all'}, () => {
 			fname.parentNode.insertBefore(title, fname);
 		});
 
-		await page.click("#submit");
+		await page.click("#submitTest");
 
 		await expect(page.locator("#fname")).toHaveAttribute("aria-describedby", "form-title fname-error-message");
 		await expect(page.locator("#lname")).toHaveAttribute("aria-describedby", "form-title lname-error-message");
@@ -165,14 +156,14 @@ test.describe('Validate > Errors > Error message tokens', { tag: '@all'}, () =>
 
 	test('Should return an error message string containing the input value if the {{value}} token is found in the error message', async ({ page }) => {
 		await page.fill("#email", "test");
-		await page.click("#submit");
+		await page.click("#submitTest");
 		await expect(page.locator("#email-error-message")).toHaveText("test is not a valid email address");
 	});
 
 	test('Should return an error message with a comma delimited string of values if more than one field is in a group', async ({ page }) => {
 		await page.fill("#group1", "test");
 		await page.fill("#group2", "test2");
-		await page.click("#submit");
+		await page.click("#submitTest");
 		await expect(page.locator("#group1-error-message")).toHaveText("test, test2 are not valid inputs");
 	});
 
diff --git a/packages/validate/__tests__/playwright/post-validation.spec.js b/packages/validate/__tests__/playwright/post-validation.spec.js
index 0c84aa05..8b56bbfe 100644
--- a/packages/validate/__tests__/playwright/post-validation.spec.js
+++ b/packages/validate/__tests__/playwright/post-validation.spec.js
@@ -1,65 +1,113 @@
-const { test, expect } = require('@playwright/test');
+const { test, expect } = require("@playwright/test");
 let tabKey;
 
 test.beforeEach(async ({ page }, testInfo) => {
-	await page.goto('/');
-	tabKey = testInfo.project.use.defaultBrowserType === 'webkit'
-			? "Alt+Tab"
-			: "Tab";
+	await page.goto("/");
+	tabKey = testInfo.project.use.defaultBrowserType === "webkit" ? "Alt+Tab" : "Tab";
 });
 
+test.describe("Validate > Post-validation", { tag: "@all" }, () => {
+	test("Should add correct user input to the form data if the form is valid", async ({ page }) => {
+		let capturedParams = null;
+		let routeResolve;
+		const routePromise = new Promise((resolve) => {
+			routeResolve = resolve;
+		});
+		await page.route("**/test", async (route, request) => {
+			const postData = request.postData();
+			const params = new URLSearchParams(postData);
+			capturedParams = params;
+			await route.fulfill({ status: 200, body: "OK" });
+			routeResolve();
+		});
+
+		await page.goto("/mini.html");
+		await page.fill("#fname", "John");
+		await page.fill("#lname", "Doe");
+		await page.click("#submitTest");
 
-test.describe('Validate > Post-validation', { tag: '@all'}, () => {
+		await routePromise;
 
-	test('Should add correct user input to the form data if the form is valid', async ({ page }) => {	
+		expect(capturedParams).not.toBeNull();
+		expect(capturedParams.get("fname")).toBe("John");
+		expect(capturedParams.get("lname")).toBe("Doe");
+	});
 
-		await page.route('**/test', async (route, request) => {
+	test("Should mutate the action attribute of the form if the submit button clicked has a formaction", async ({ page }) => {
+		let capturedParams = null;
+		let routeResolve;
+		const routePromise = new Promise((resolve) => {
+			routeResolve = resolve;
+		});
+		await page.route("**/alternative", async (route, request) => {
 			const postData = request.postData();
 			const params = new URLSearchParams(postData);
-			expect(params.get('fname')).toBe('John');
-			expect(params.get('lname')).toBe('Doe');
-			await route.fulfill({ status: 200, body: 'OK' });
+			capturedParams = params;
+			await route.fulfill({ status: 200, body: "OK" });
+			routeResolve();
 		});
 
-		await page.goto('/mini.html');
+		await page.goto("/mini.html");
+		await page.locator("#submitTest").evaluate((button) => {
+			button.setAttribute("formaction", "/alternative");
+		});
 		await page.fill("#fname", "John");
 		await page.fill("#lname", "Doe");
-		await page.click("#submit");
+		await page.click("#submitTest");
 
-	});
+		await routePromise;
 
-	test('Should mutate the action attribute of the form if the submit button clicked has a formaction', async ({ page }) => {
+		expect(capturedParams).not.toBeNull();
+		expect(capturedParams.get("fname")).toBe("John");
+		expect(capturedParams.get("lname")).toBe("Doe");
+	});
 
-		await page.route('**/alternative', async (route, request) => {
+	test("Should call the presubmit hook pre-submit", async ({ page }) => {
+		let capturedParams = null;
+		let routeResolve;
+		const routePromise = new Promise((resolve) => {
+			routeResolve = resolve;
+		});
+		await page.route("**/test", async (route, request) => {
 			const postData = request.postData();
 			const params = new URLSearchParams(postData);
-			expect(params.get('fname')).toBe('John');
-			expect(params.get('lname')).toBe('Doe');
-			await route.fulfill({ status: 200, body: 'OK' });
+			capturedParams = params;
+			await route.fulfill({ status: 200, body: "OK" });
+			routeResolve();
 		});
 
-		await page.goto('/mini.html');
-		await page.locator('#submit').evaluate((button) => {
-			button.setAttribute('formaction', '/alternative');
-		});
+		await page.goto("/mini.html");
 		await page.fill("#fname", "John");
 		await page.fill("#lname", "Doe");
-		await page.click("#submit");
+		await page.click("#submitTest");
+
+		await routePromise;
+
+		expect(capturedParams).not.toBeNull();
+		expect(capturedParams.get("hiddenCheck")).toBe("true");
 	});
 
-	test('Should call the presubmit hook pre-submit', async ({ page }) => {
-		await page.route('**/test', async (route, request) => {
+	test("Should add hidden field duplicate of a button field, for conferring submit button values", async ({ page }) => {
+		let capturedParams = null;
+		let routeResolve;
+		const routePromise = new Promise((resolve) => {
+			routeResolve = resolve;
+		});
+		await page.route("**/test", async (route, request) => {
 			const postData = request.postData();
 			const params = new URLSearchParams(postData);
-			expect(params.get('hiddenCheck')).toBe('true');
-			await route.fulfill({ status: 200, body: 'OK' });
+			capturedParams = params;
+			await route.fulfill({ status: 200, body: "OK" });
+			routeResolve();
 		});
 
-		await page.goto('/mini.html');
+		await page.goto("/mini.html");
 		await page.fill("#fname", "John");
 		await page.fill("#lname", "Doe");
-		await page.click("#submit");
+		await page.click("#submitTest");
+
+		await routePromise;
+		expect(capturedParams).not.toBeNull();
+		expect(capturedParams.get("submitTest")).toBe("checking");
 	});
-	
 });
-
diff --git a/packages/validate/example/src/index.html b/packages/validate/example/src/index.html
index 0e6f1c6e..d5b2f048 100644
--- a/packages/validate/example/src/index.html
+++ b/packages/validate/example/src/index.html
@@ -742,7 +742,7 @@ <h1>Your details</h1>
                     <span class="field-validation-error" data-valmsg-for="tcs" />
                 </div>
             </fieldset>
-            <button type="submit" class="btn" id="submit">Submit</button>
+            <button type="submit" class="btn" id="submitTest">Submit</button>
         </form>
 
 
diff --git a/packages/validate/example/src/mini-no-server-errors.html b/packages/validate/example/src/mini-no-server-errors.html
index b9201cc9..be490414 100644
--- a/packages/validate/example/src/mini-no-server-errors.html
+++ b/packages/validate/example/src/mini-no-server-errors.html
@@ -629,7 +629,7 @@ <h1>Your details</h1>
                         class="input" id="lname" name="lname" />
                 </div>
             </fieldset>
-            <button type="submit" class="btn" id="submit">Submit</button>
+            <button type="submit" class="btn" id="submitTest">Submit</button>
         </form>
     </main>
 </body>
diff --git a/packages/validate/example/src/mini.html b/packages/validate/example/src/mini.html
index 83ac5cc2..f5f52941 100644
--- a/packages/validate/example/src/mini.html
+++ b/packages/validate/example/src/mini.html
@@ -622,18 +622,18 @@ <h1>Your details</h1>
                 </legend>
                 <div class="form-row">
                     <label for="fname" class="label">First Name</label>
-                    <span class="error-message" data-valmsg-for="fname">Test</span>
+                    <span class="error-message" data-valmsg-for="fname"></span>
                     <input data-val="true" data-val-required="First name must not be empty" autocomplete="given-name"
                         class="input" id="fname" name="fname" />
                 </div>
                 <div class="form-row">
                     <label for="lname" class="label">Last Name</label>
-                    <span class="error-message" data-valmsg-for="lname"></span>
+                    <span class="error-message" data-valmsg-for="lname">Existing server error</span>
                     <input data-val="true" data-val-required="Last name must not be empty" autocomplete="family-name"
                         class="input" id="lname" name="lname" />
                 </div>
             </fieldset>
-            <button type="submit" class="btn" id="submit">Submit</button>
+            <button type="submit" class="btn" name="submitTest" id="submitTest" value="checking">Submit</button>
         </form>
     </main>
 </body>
diff --git a/packages/validate/src/lib/validator/post-validation.js b/packages/validate/src/lib/validator/post-validation.js
index 61ad8d69..c4efe536 100644
--- a/packages/validate/src/lib/validator/post-validation.js
+++ b/packages/validate/src/lib/validator/post-validation.js
@@ -12,23 +12,28 @@ export const postValidation = (event, resolve, store) => {
     const submit = () => {
         if (settings.submit) settings.submit();
         else form.submit();
+
+        buttonValueNode && cleanupButtonValueNode(buttonValueNode);
+        cachedAction && form.setAttribute('action', cachedAction);
     };
-    if (isSubmitButton(document.activeElement)) {
-        if (hasNameValue(document.activeElement)) {
-            buttonValueNode = createButtonValueNode(document.activeElement, form);
+
+    const formSubmitButtons = Array.from(form.querySelectorAll('[type="submit"]'));
+    formSubmitButtons.forEach(formSubmitButton => {
+        if (hasNameValue(formSubmitButton)) {
+            buttonValueNode = createButtonValueNode(formSubmitButton, form);
         }
-        if (hasFormactionValue(document.activeElement)) {
+        if (hasFormactionValue(formSubmitButton)) {
             cachedAction = form.getAttribute('action');
-            form.setAttribute('action', document.activeElement.getAttribute('formaction'));
+            form.setAttribute('action', formSubmitButton.getAttribute('formaction'));
         }
-    }
+    });
+
     if (event && event.target) {
         if (settings.preSubmitHook) {
             settings.preSubmitHook();
             window.setTimeout(submit, PREHOOK_DELAY);
         } else submit();
     }
-    buttonValueNode && cleanupButtonValueNode(buttonValueNode);
-    cachedAction && form.setAttribute('action', cachedAction);
+    
     return resolve(true);
 };
\ No newline at end of file

From ff870b7103390d3568555f8d2736f03fe24f6bee Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Wed, 24 Sep 2025 15:49:52 +0100
Subject: [PATCH 07/14] Reshuffle tests

---
 .../{jest => }/integration/api/index.js       |   0
 .../api/validate/bypass-disabled.js           |   0
 .../integration/api/validate/dateISO.js       |   0
 .../integration/api/validate/digits.js        |   0
 .../integration/api/validate/email.js         |   0
 .../integration/api/validate/equalto.js       |   0
 .../integration/api/validate/length.js        |   0
 .../integration/api/validate/max.js           |   0
 .../integration/api/validate/maxlength.js     |   0
 .../integration/api/validate/min.js           |   0
 .../integration/api/validate/minlength.js     |   0
 .../integration/api/validate/number.js        |   0
 .../integration/api/validate/range.js         |   0
 .../integration/api/validate/regex-pattern.js |   0
 .../integration/api/validate/remote.js        |   0
 .../integration/api/validate/required.js      |   0
 .../integration/api/validate/stringlength.js  |   0
 .../integration/api/validate/url.js           |   0
 .../{jest => }/integration/errors/index.js    |   0
 .../normalise-validators/dateISO.js           |   0
 .../normalise-validators/digits.js            |   0
 .../integration/normalise-validators/email.js |   0
 .../normalise-validators/equalto.js           |   0
 .../normalise-validators/length.js            |   0
 .../integration/normalise-validators/max.js   |   0
 .../normalise-validators/maxlength.js         |   0
 .../integration/normalise-validators/min.js   |   0
 .../normalise-validators/minlength.js         |   0
 .../normalise-validators/number.js            |   0
 .../integration/normalise-validators/range.js |   0
 .../normalise-validators/regex-pattern.js     |   0
 .../normalise-validators/remote.js            |   0
 .../normalise-validators/required.js          |   0
 .../normalise-validators/stringlength.js      |   0
 .../integration/normalise-validators/url.js   |   0
 .../{jest => }/integration/plugins/date.js    |   0
 .../{jest => }/integration/plugins/luhn.js    |   0
 .../{jest => }/integration/real-time/index.js |   0
 .../{jest => }/integration/reset/index.js     |   0
 .../{jest => }/integration/submit/index.js    |   2 +-
 .../integration/validator/custom.js           |   0
 .../integration/validator/dateISO.js          |   0
 .../integration/validator/digits.js           |   0
 .../{jest => }/integration/validator/email.js |   0
 .../integration/validator/equalto.js          |   0
 .../{jest => }/integration/validator/index.js |   0
 .../integration/validator/isHidden.js         |   0
 .../integration/validator/length.js           |   0
 .../{jest => }/integration/validator/max.js   |   0
 .../integration/validator/maxlength.js        |   0
 .../{jest => }/integration/validator/min.js   |   0
 .../integration/validator/minlength.js        |   0
 .../integration/validator/number.js           |   0
 .../{jest => }/integration/validator/range.js |   0
 .../integration/validator/regex-pattern.js    |   0
 .../integration/validator/remote.js           |   0
 .../integration/validator/required.js         |   0
 .../integration/validator/stringlength.js     |   0
 .../{jest => }/integration/validator/url.js   |   0
 .../__tests__/jest/{unit => }/errors.js       |   4 +-
 .../jest/{unit => }/initialisation.js         |   6 +-
 .../jest/{unit/validator => }/methods.js      |   2 +-
 .../__tests__/jest/{unit => }/reducers.js     |   4 +-
 .../__tests__/jest/{unit => }/store.js        |   6 +-
 .../validate/__tests__/jest/unit/dom/index.js | 106 ------------------
 .../jest/{unit/validator => }/utils.js        |   2 +-
 .../{unit/validator/index.js => validator.js} |   4 +-
 .../playwright/accessibility.spec.js          |  33 +++++-
 68 files changed, 47 insertions(+), 122 deletions(-)
 rename packages/validate/__tests__/{jest => }/integration/api/index.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/bypass-disabled.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/dateISO.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/digits.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/email.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/equalto.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/length.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/max.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/maxlength.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/min.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/minlength.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/number.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/range.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/regex-pattern.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/remote.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/required.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/stringlength.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/api/validate/url.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/errors/index.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/dateISO.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/digits.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/email.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/equalto.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/length.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/max.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/maxlength.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/min.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/minlength.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/number.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/range.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/regex-pattern.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/remote.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/required.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/stringlength.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/normalise-validators/url.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/plugins/date.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/plugins/luhn.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/real-time/index.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/reset/index.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/submit/index.js (97%)
 rename packages/validate/__tests__/{jest => }/integration/validator/custom.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/dateISO.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/digits.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/email.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/equalto.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/index.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/isHidden.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/length.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/max.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/maxlength.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/min.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/minlength.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/number.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/range.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/regex-pattern.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/remote.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/required.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/stringlength.js (100%)
 rename packages/validate/__tests__/{jest => }/integration/validator/url.js (100%)
 rename packages/validate/__tests__/jest/{unit => }/errors.js (98%)
 rename packages/validate/__tests__/jest/{unit => }/initialisation.js (98%)
 rename packages/validate/__tests__/jest/{unit/validator => }/methods.js (99%)
 rename packages/validate/__tests__/jest/{unit => }/reducers.js (99%)
 rename packages/validate/__tests__/jest/{unit => }/store.js (92%)
 delete mode 100644 packages/validate/__tests__/jest/unit/dom/index.js
 rename packages/validate/__tests__/jest/{unit/validator => }/utils.js (99%)
 rename packages/validate/__tests__/jest/{unit/validator/index.js => validator.js} (99%)

diff --git a/packages/validate/__tests__/jest/integration/api/index.js b/packages/validate/__tests__/integration/api/index.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/index.js
rename to packages/validate/__tests__/integration/api/index.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/bypass-disabled.js b/packages/validate/__tests__/integration/api/validate/bypass-disabled.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/bypass-disabled.js
rename to packages/validate/__tests__/integration/api/validate/bypass-disabled.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/dateISO.js b/packages/validate/__tests__/integration/api/validate/dateISO.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/dateISO.js
rename to packages/validate/__tests__/integration/api/validate/dateISO.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/digits.js b/packages/validate/__tests__/integration/api/validate/digits.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/digits.js
rename to packages/validate/__tests__/integration/api/validate/digits.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/email.js b/packages/validate/__tests__/integration/api/validate/email.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/email.js
rename to packages/validate/__tests__/integration/api/validate/email.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/equalto.js b/packages/validate/__tests__/integration/api/validate/equalto.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/equalto.js
rename to packages/validate/__tests__/integration/api/validate/equalto.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/length.js b/packages/validate/__tests__/integration/api/validate/length.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/length.js
rename to packages/validate/__tests__/integration/api/validate/length.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/max.js b/packages/validate/__tests__/integration/api/validate/max.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/max.js
rename to packages/validate/__tests__/integration/api/validate/max.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/maxlength.js b/packages/validate/__tests__/integration/api/validate/maxlength.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/maxlength.js
rename to packages/validate/__tests__/integration/api/validate/maxlength.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/min.js b/packages/validate/__tests__/integration/api/validate/min.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/min.js
rename to packages/validate/__tests__/integration/api/validate/min.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/minlength.js b/packages/validate/__tests__/integration/api/validate/minlength.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/minlength.js
rename to packages/validate/__tests__/integration/api/validate/minlength.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/number.js b/packages/validate/__tests__/integration/api/validate/number.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/number.js
rename to packages/validate/__tests__/integration/api/validate/number.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/range.js b/packages/validate/__tests__/integration/api/validate/range.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/range.js
rename to packages/validate/__tests__/integration/api/validate/range.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/regex-pattern.js b/packages/validate/__tests__/integration/api/validate/regex-pattern.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/regex-pattern.js
rename to packages/validate/__tests__/integration/api/validate/regex-pattern.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/remote.js b/packages/validate/__tests__/integration/api/validate/remote.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/remote.js
rename to packages/validate/__tests__/integration/api/validate/remote.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/required.js b/packages/validate/__tests__/integration/api/validate/required.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/required.js
rename to packages/validate/__tests__/integration/api/validate/required.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/stringlength.js b/packages/validate/__tests__/integration/api/validate/stringlength.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/stringlength.js
rename to packages/validate/__tests__/integration/api/validate/stringlength.js
diff --git a/packages/validate/__tests__/jest/integration/api/validate/url.js b/packages/validate/__tests__/integration/api/validate/url.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/api/validate/url.js
rename to packages/validate/__tests__/integration/api/validate/url.js
diff --git a/packages/validate/__tests__/jest/integration/errors/index.js b/packages/validate/__tests__/integration/errors/index.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/errors/index.js
rename to packages/validate/__tests__/integration/errors/index.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/dateISO.js b/packages/validate/__tests__/integration/normalise-validators/dateISO.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/dateISO.js
rename to packages/validate/__tests__/integration/normalise-validators/dateISO.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/digits.js b/packages/validate/__tests__/integration/normalise-validators/digits.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/digits.js
rename to packages/validate/__tests__/integration/normalise-validators/digits.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/email.js b/packages/validate/__tests__/integration/normalise-validators/email.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/email.js
rename to packages/validate/__tests__/integration/normalise-validators/email.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/equalto.js b/packages/validate/__tests__/integration/normalise-validators/equalto.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/equalto.js
rename to packages/validate/__tests__/integration/normalise-validators/equalto.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/length.js b/packages/validate/__tests__/integration/normalise-validators/length.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/length.js
rename to packages/validate/__tests__/integration/normalise-validators/length.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/max.js b/packages/validate/__tests__/integration/normalise-validators/max.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/max.js
rename to packages/validate/__tests__/integration/normalise-validators/max.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/maxlength.js b/packages/validate/__tests__/integration/normalise-validators/maxlength.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/maxlength.js
rename to packages/validate/__tests__/integration/normalise-validators/maxlength.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/min.js b/packages/validate/__tests__/integration/normalise-validators/min.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/min.js
rename to packages/validate/__tests__/integration/normalise-validators/min.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/minlength.js b/packages/validate/__tests__/integration/normalise-validators/minlength.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/minlength.js
rename to packages/validate/__tests__/integration/normalise-validators/minlength.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/number.js b/packages/validate/__tests__/integration/normalise-validators/number.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/number.js
rename to packages/validate/__tests__/integration/normalise-validators/number.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/range.js b/packages/validate/__tests__/integration/normalise-validators/range.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/range.js
rename to packages/validate/__tests__/integration/normalise-validators/range.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/regex-pattern.js b/packages/validate/__tests__/integration/normalise-validators/regex-pattern.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/regex-pattern.js
rename to packages/validate/__tests__/integration/normalise-validators/regex-pattern.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/remote.js b/packages/validate/__tests__/integration/normalise-validators/remote.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/remote.js
rename to packages/validate/__tests__/integration/normalise-validators/remote.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/required.js b/packages/validate/__tests__/integration/normalise-validators/required.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/required.js
rename to packages/validate/__tests__/integration/normalise-validators/required.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/stringlength.js b/packages/validate/__tests__/integration/normalise-validators/stringlength.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/stringlength.js
rename to packages/validate/__tests__/integration/normalise-validators/stringlength.js
diff --git a/packages/validate/__tests__/jest/integration/normalise-validators/url.js b/packages/validate/__tests__/integration/normalise-validators/url.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/normalise-validators/url.js
rename to packages/validate/__tests__/integration/normalise-validators/url.js
diff --git a/packages/validate/__tests__/jest/integration/plugins/date.js b/packages/validate/__tests__/integration/plugins/date.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/plugins/date.js
rename to packages/validate/__tests__/integration/plugins/date.js
diff --git a/packages/validate/__tests__/jest/integration/plugins/luhn.js b/packages/validate/__tests__/integration/plugins/luhn.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/plugins/luhn.js
rename to packages/validate/__tests__/integration/plugins/luhn.js
diff --git a/packages/validate/__tests__/jest/integration/real-time/index.js b/packages/validate/__tests__/integration/real-time/index.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/real-time/index.js
rename to packages/validate/__tests__/integration/real-time/index.js
diff --git a/packages/validate/__tests__/jest/integration/reset/index.js b/packages/validate/__tests__/integration/reset/index.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/reset/index.js
rename to packages/validate/__tests__/integration/reset/index.js
diff --git a/packages/validate/__tests__/jest/integration/submit/index.js b/packages/validate/__tests__/integration/submit/index.js
similarity index 97%
rename from packages/validate/__tests__/jest/integration/submit/index.js
rename to packages/validate/__tests__/integration/submit/index.js
index 1361b9f9..dd39eded 100644
--- a/packages/validate/__tests__/jest/integration/submit/index.js
+++ b/packages/validate/__tests__/integration/submit/index.js
@@ -1,4 +1,4 @@
-import validate from '../../../../src';
+import validate from '../../../src';
 
 describe('Validate > Integration > Submit', () => {
 
diff --git a/packages/validate/__tests__/jest/integration/validator/custom.js b/packages/validate/__tests__/integration/validator/custom.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/custom.js
rename to packages/validate/__tests__/integration/validator/custom.js
diff --git a/packages/validate/__tests__/jest/integration/validator/dateISO.js b/packages/validate/__tests__/integration/validator/dateISO.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/dateISO.js
rename to packages/validate/__tests__/integration/validator/dateISO.js
diff --git a/packages/validate/__tests__/jest/integration/validator/digits.js b/packages/validate/__tests__/integration/validator/digits.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/digits.js
rename to packages/validate/__tests__/integration/validator/digits.js
diff --git a/packages/validate/__tests__/jest/integration/validator/email.js b/packages/validate/__tests__/integration/validator/email.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/email.js
rename to packages/validate/__tests__/integration/validator/email.js
diff --git a/packages/validate/__tests__/jest/integration/validator/equalto.js b/packages/validate/__tests__/integration/validator/equalto.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/equalto.js
rename to packages/validate/__tests__/integration/validator/equalto.js
diff --git a/packages/validate/__tests__/jest/integration/validator/index.js b/packages/validate/__tests__/integration/validator/index.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/index.js
rename to packages/validate/__tests__/integration/validator/index.js
diff --git a/packages/validate/__tests__/jest/integration/validator/isHidden.js b/packages/validate/__tests__/integration/validator/isHidden.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/isHidden.js
rename to packages/validate/__tests__/integration/validator/isHidden.js
diff --git a/packages/validate/__tests__/jest/integration/validator/length.js b/packages/validate/__tests__/integration/validator/length.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/length.js
rename to packages/validate/__tests__/integration/validator/length.js
diff --git a/packages/validate/__tests__/jest/integration/validator/max.js b/packages/validate/__tests__/integration/validator/max.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/max.js
rename to packages/validate/__tests__/integration/validator/max.js
diff --git a/packages/validate/__tests__/jest/integration/validator/maxlength.js b/packages/validate/__tests__/integration/validator/maxlength.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/maxlength.js
rename to packages/validate/__tests__/integration/validator/maxlength.js
diff --git a/packages/validate/__tests__/jest/integration/validator/min.js b/packages/validate/__tests__/integration/validator/min.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/min.js
rename to packages/validate/__tests__/integration/validator/min.js
diff --git a/packages/validate/__tests__/jest/integration/validator/minlength.js b/packages/validate/__tests__/integration/validator/minlength.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/minlength.js
rename to packages/validate/__tests__/integration/validator/minlength.js
diff --git a/packages/validate/__tests__/jest/integration/validator/number.js b/packages/validate/__tests__/integration/validator/number.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/number.js
rename to packages/validate/__tests__/integration/validator/number.js
diff --git a/packages/validate/__tests__/jest/integration/validator/range.js b/packages/validate/__tests__/integration/validator/range.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/range.js
rename to packages/validate/__tests__/integration/validator/range.js
diff --git a/packages/validate/__tests__/jest/integration/validator/regex-pattern.js b/packages/validate/__tests__/integration/validator/regex-pattern.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/regex-pattern.js
rename to packages/validate/__tests__/integration/validator/regex-pattern.js
diff --git a/packages/validate/__tests__/jest/integration/validator/remote.js b/packages/validate/__tests__/integration/validator/remote.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/remote.js
rename to packages/validate/__tests__/integration/validator/remote.js
diff --git a/packages/validate/__tests__/jest/integration/validator/required.js b/packages/validate/__tests__/integration/validator/required.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/required.js
rename to packages/validate/__tests__/integration/validator/required.js
diff --git a/packages/validate/__tests__/jest/integration/validator/stringlength.js b/packages/validate/__tests__/integration/validator/stringlength.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/stringlength.js
rename to packages/validate/__tests__/integration/validator/stringlength.js
diff --git a/packages/validate/__tests__/jest/integration/validator/url.js b/packages/validate/__tests__/integration/validator/url.js
similarity index 100%
rename from packages/validate/__tests__/jest/integration/validator/url.js
rename to packages/validate/__tests__/integration/validator/url.js
diff --git a/packages/validate/__tests__/jest/unit/errors.js b/packages/validate/__tests__/jest/errors.js
similarity index 98%
rename from packages/validate/__tests__/jest/unit/errors.js
rename to packages/validate/__tests__/jest/errors.js
index 18452b1d..57f68df8 100644
--- a/packages/validate/__tests__/jest/unit/errors.js
+++ b/packages/validate/__tests__/jest/errors.js
@@ -2,8 +2,8 @@ import {
     h,
     clearError,
     clearErrors,
-} from '../../../src/lib/dom';
-import { DOTNET_CLASSNAMES } from '../../../src/lib/constants';
+} from '../../src/lib/dom';
+import { DOTNET_CLASSNAMES } from '../../src/lib/constants';
 
 //clearError
 describe('Validate > Unit > DOM > clearError', () => {
diff --git a/packages/validate/__tests__/jest/unit/initialisation.js b/packages/validate/__tests__/jest/initialisation.js
similarity index 98%
rename from packages/validate/__tests__/jest/unit/initialisation.js
rename to packages/validate/__tests__/jest/initialisation.js
index ded77ce9..998243ab 100644
--- a/packages/validate/__tests__/jest/unit/initialisation.js
+++ b/packages/validate/__tests__/jest/initialisation.js
@@ -1,6 +1,6 @@
-import validate from '../../../src';
-import defaults from '../../../src/lib/defaults';
-import { getSelection } from '../../../src/lib/validator/utils';
+import validate from '../../src';
+import defaults from '../../src/lib/defaults';
+import { getSelection } from '../../src/lib/validator/utils';
 
 let validators;
 const setUpDOM = () => {
diff --git a/packages/validate/__tests__/jest/unit/validator/methods.js b/packages/validate/__tests__/jest/methods.js
similarity index 99%
rename from packages/validate/__tests__/jest/unit/validator/methods.js
rename to packages/validate/__tests__/jest/methods.js
index 372c55ba..798a4c21 100644
--- a/packages/validate/__tests__/jest/unit/validator/methods.js
+++ b/packages/validate/__tests__/jest/methods.js
@@ -1,5 +1,5 @@
 import mock from 'xhr-mock';
-import Methods from '../../../../src/lib/validator/methods';
+import Methods from '../../src/lib/validator/methods';
 
 //required
 describe('Validate > Unit > Validator > methods > required', () => {
diff --git a/packages/validate/__tests__/jest/unit/reducers.js b/packages/validate/__tests__/jest/reducers.js
similarity index 99%
rename from packages/validate/__tests__/jest/unit/reducers.js
rename to packages/validate/__tests__/jest/reducers.js
index eeed0922..44bbefee 100644
--- a/packages/validate/__tests__/jest/unit/reducers.js
+++ b/packages/validate/__tests__/jest/reducers.js
@@ -1,5 +1,5 @@
-import { ACTIONS, GROUP_ATTRIBUTE } from '../../../src/lib/constants';
-import Reducers from '../../../src/lib/reducers';
+import { ACTIONS, GROUP_ATTRIBUTE } from '../../src/lib/constants';
+import Reducers from '../../src/lib/reducers';
 
 //set initial state
 describe('Validate > Unit > Reducers > Set initial state', () => {
diff --git a/packages/validate/__tests__/jest/unit/store.js b/packages/validate/__tests__/jest/store.js
similarity index 92%
rename from packages/validate/__tests__/jest/unit/store.js
rename to packages/validate/__tests__/jest/store.js
index b736b524..f54b4d43 100644
--- a/packages/validate/__tests__/jest/unit/store.js
+++ b/packages/validate/__tests__/jest/store.js
@@ -1,6 +1,6 @@
-import { createStore } from '../../../src/lib/store';
-import { ACTIONS } from '../../../src/lib/constants';
-import reducers from '../../../src/lib/reducers';
+import { createStore } from '../../src/lib/store';
+import { ACTIONS } from '../../src/lib/constants';
+import reducers from '../../src/lib/reducers';
 let Store;
 beforeAll(() => {
     Store = createStore();
diff --git a/packages/validate/__tests__/jest/unit/dom/index.js b/packages/validate/__tests__/jest/unit/dom/index.js
deleted file mode 100644
index 34508018..00000000
--- a/packages/validate/__tests__/jest/unit/dom/index.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import {
-    createButtonValueNode,
-    addAXAttributes
-} from '../../../../src/lib/dom';
-
-
-
-
-
-//addAXAttributes
-describe('Validate > Unit > DOM > addAXAttributes', () => {
-
-    it('should add attribute to the input and server-rendered error container to improve accessibility', async () => {
-        document.body.innerHTML = `<form>
-            <label for="group1">Text (required, min 2 characters, max 8 characters)</label>
-            <input id="group1" name="group1" data-val="true" data-val-required="This field is required">
-            <span data-valmsg-for="group1" data-valmsg-replace="true"></span>
-        </form>`;
-        const field = document.getElementById('group1');
-        const errorContainer = document.querySelector('[data-valmsg-for="group1"]');
-        const state = {
-            groups: {
-                group1: {
-                    serverErrorNode: errorContainer,
-                    fields: [field]
-                }
-            }
-        };
-        addAXAttributes(state);
-        //ensure error message has an id for aria-describedby
-        expect(errorContainer.getAttribute('id')).toEqual(`group1-error-message`);
-        //add aria-required=true to required and data-val-required fields
-        expect(field.getAttribute('aria-required')).toEqual(`true`);
-    });
-
-    it('should not add aria-required attribute to radio inputs', async () => {
-        // expect.assertions(3);
-        document.body.innerHTML = `<form>
-            <label for="group1">Text (required, min 2 characters, max 8 characters)</label>
-            <input type="radio" id="group1" name="group1" data-val="true" data-val-required="This field is required">
-            <span data-valmsg-for="group1" data-valmsg-replace="true"></span>
-        </form>`;
-        const field = document.getElementById('group1');
-        const errorContainer = document.querySelector('[data-valmsg-for="group1"]');
-        const state = {
-            groups: {
-                group1: {
-                    serverErrorNode: errorContainer,
-                    fields: [field]
-                }
-            }
-        };
-        addAXAttributes(state);
-        expect(field.hasAttribute('aria-required')).toEqual(false);
-    });
-
-
-    it('should not add aria-required attribute to multiple checkboxes', async () => {
-        document.body.innerHTML = `<form>
-            <label for="checkbox1">Label</label>
-            <input type="radio" id="checkbox1" name="checkbox" data-val="true" data-val-required="This field is required">
-            <label for="checkbox2">Label</label>
-            <input type="radio" id="checkbox2" name="checkbox" data-val="true" data-val-required="This field is required">
-            <label for="checkbox3">Label)</label>
-            <input type="radio" id="checkbox3" name="checkbox" data-val="true" data-val-required="This field is required">
-            <span data-valmsg-for="checkbox" data-valmsg-replace="true"></span>
-        </form>`;
-        const fields = Array.from(document.querySelectorAll('checkbox'));
-        const errorContainer = document.querySelector('[data-valmsg-for="group1"]');
-        const state = {
-            groups: {
-                checkbox: {
-                    serverErrorNode: errorContainer,
-                    fields
-                }
-            }
-        };
-        addAXAttributes(state);
-        fields.forEach(field => expect(field.hasAttribute('aria-required')).toEqual(false));
-        
-    });
-
-
-    //single checkbox
-    it('should add aria-required attribute to a single checkbox inputs', async () => {
-        // expect.assertions(3);
-        document.body.innerHTML = `<form>
-            <label for="group1">Text</label>
-            <input type="checkbox" id="group1" name="group1" data-val="true" data-val-required="This field is required">
-            <span data-valmsg-for="group1" data-valmsg-replace="true"></span>
-        </form>`;
-        const field = document.getElementById('group1');
-        const errorContainer = document.querySelector('[data-valmsg-for="group1"]');
-        const state = {
-            groups: {
-                group1: {
-                    serverErrorNode: errorContainer,
-                    fields: [field]
-                }
-            }
-        };
-        addAXAttributes(state);
-        expect(field.getAttribute('aria-required')).toEqual('true');
-    });
-
-});
\ No newline at end of file
diff --git a/packages/validate/__tests__/jest/unit/validator/utils.js b/packages/validate/__tests__/jest/utils.js
similarity index 99%
rename from packages/validate/__tests__/jest/unit/validator/utils.js
rename to packages/validate/__tests__/jest/utils.js
index 25404446..4453f99f 100644
--- a/packages/validate/__tests__/jest/unit/validator/utils.js
+++ b/packages/validate/__tests__/jest/utils.js
@@ -13,7 +13,7 @@ import {
     escapeAttributeValue,
     extractValueFromGroup,
     findErrors
-} from '../../../../src/lib/validator/utils';
+} from '../../src/lib/validator/utils';
 
 describe('Validate > Unit > Utils > isCheckable', () => {
     it('should return true if the field is of type radio', async () => {
diff --git a/packages/validate/__tests__/jest/unit/validator/index.js b/packages/validate/__tests__/jest/validator.js
similarity index 99%
rename from packages/validate/__tests__/jest/unit/validator/index.js
rename to packages/validate/__tests__/jest/validator.js
index 22c4b9a6..71611f40 100644
--- a/packages/validate/__tests__/jest/unit/validator/index.js
+++ b/packages/validate/__tests__/jest/validator.js
@@ -6,8 +6,8 @@ import {
     extractErrorMessage,
     removeUnvalidatableGroups,
     getInitialState
-} from '../../../../src/lib/validator';
-import defaults from '../../../../src/lib/defaults';
+} from '../../src/lib/validator';
+import defaults from '../../src/lib/defaults';
 
 //resolveParam
 describe('Validate > Unit > Validator > resolveParam', () => {
diff --git a/packages/validate/__tests__/playwright/accessibility.spec.js b/packages/validate/__tests__/playwright/accessibility.spec.js
index 441fd6f6..5eac3694 100644
--- a/packages/validate/__tests__/playwright/accessibility.spec.js
+++ b/packages/validate/__tests__/playwright/accessibility.spec.js
@@ -10,7 +10,6 @@ test.beforeEach(async ({ page }, testInfo) => {
 			: "Tab";
 });
 
-
 test.describe('Validate > Accessibility > Axe', { tag: '@reduced'}, () => {
 	test('Should not have any automatically detectable accessibility issues', async ({ page }) => {	
 		const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); 
@@ -26,3 +25,35 @@ test.describe('Validate > Accessibility > focus', { tag: '@all'}, () => {
 		await expect(fNameInput).toBeFocused();
 	});
 });
+
+test.describe('Validate > Accessibility > Aria', { tag: '@all'}, () => {
+	test('Should add an aria required attribute to improve accessibility', async ({ page }) => {	
+		await page.goto('/mini.html');
+		const fNameInput = page.locator('#fname');
+		const lNameInput = page.locator('#lname');
+		await expect(lNameInput).toHaveAttribute('aria-required', 'true');
+		await expect(fNameInput).toHaveAttribute('aria-required', 'true');
+	});
+
+	test('Should NOT add an aria required attribute to radio buttons', async ({ page }) => {	
+		await page.goto('/');
+		const radioInput = await page.locator('[name="radio"]').all();
+		for (const radio of radioInput) {
+			await expect(radio).not.toHaveAttribute('aria-required', 'true');
+		}
+	});
+
+	test('Should NOT add an aria required attribute to multiple checkboxes', async ({ page }) => {	
+		await page.goto('/');
+		const checkboxInput = await page.locator('[name="opts"]').all();
+		for (const checkbox of checkboxInput) {
+			await expect(checkbox).not.toHaveAttribute('aria-required', 'true');
+		}
+	});
+
+	test('Should add an aria required attribute to single checkboxes', async ({ page }) => {	
+		await page.goto('/');
+		const termsConditions = page.locator('[name="tcs"]');
+		await expect(termsConditions).toHaveAttribute('aria-required', 'true');
+	});
+});
\ No newline at end of file

From a526b0dd3e5b784b26be8f2a244778ac63642748 Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Thu, 25 Sep 2025 10:27:16 +0100
Subject: [PATCH 08/14] Reset and api

---
 .../__tests__/integration/api/index.js        | 277 ------------------
 .../__tests__/integration/errors/index.js     |  93 ------
 .../__tests__/integration/reset/index.js      |  60 ----
 packages/validate/__tests__/jest/api.js       | 259 ++++++++++++++++
 packages/validate/__tests__/jest/reset.js     |  32 ++
 .../__tests__/playwright/errors.spec.js       |  13 +-
 .../__tests__/playwright/reset.spec.js        |  37 +++
 packages/validate/example/src/index.html      |  12 +-
 packages/validate/example/src/js/index.js     |   7 +
 packages/validate/example/src/mini.html       |   1 +
 10 files changed, 353 insertions(+), 438 deletions(-)
 delete mode 100644 packages/validate/__tests__/integration/api/index.js
 delete mode 100644 packages/validate/__tests__/integration/errors/index.js
 delete mode 100644 packages/validate/__tests__/integration/reset/index.js
 create mode 100644 packages/validate/__tests__/jest/api.js
 create mode 100644 packages/validate/__tests__/jest/reset.js
 create mode 100644 packages/validate/__tests__/playwright/reset.spec.js

diff --git a/packages/validate/__tests__/integration/api/index.js b/packages/validate/__tests__/integration/api/index.js
deleted file mode 100644
index a502d04b..00000000
--- a/packages/validate/__tests__/integration/api/index.js
+++ /dev/null
@@ -1,277 +0,0 @@
-import validate from '../../../../src';
-import { GROUP_ATTRIBUTE, DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-import defaults from '../../../../src/lib/defaults';
-
-describe('Validate > Integration > API > addGroup', () => {
-
-    it('should add a validation group', async () => {
-        // expect.assertions(6);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-
-        expect(validator.getState().groups).toEqual({});
-        input.setAttribute('required', 'required');
-        validator.addGroup([input]);
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-
-    });
-
-    it('should return leave state unchanged if it cannot add the validation group', async () => {
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                type="text" />
-        </form>`;
-        const input = document.querySelector('#group1-1');
-        const [ validator ] = validate('form');
-        console.warn = jest.fn();
-
-        expect(validator.getState().groups).toEqual({});
-        validator.addGroup([input]);
-        expect(validator.getState().groups).toEqual({});
-        expect(console.warn).toHaveBeenCalled();
-    });
-
-
-});
-
-describe('Validate > Integration > API > removeGroup', () => {
-
-    it('should remove a validation group', async () => {
-        // expect.assertions(6);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                required
-                value=""
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-        input.removeAttribute('required');
-        validator.removeGroup('group1');
-        expect(validator.getState().groups).toEqual({});
-
-    });
-
-});
-
-describe('Validate > Integration > API > validateGroup', () => {
-
-    it('should validate an individual validation group when called', async () => {
-        // expect.assertions(6);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                required
-                value=""
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-        await validator.validateGroup('group1');
-
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
-
-        input.value = "test";
-        await validator.validateGroup('group1');
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`)).toBeNull();
-    });
-
-});
-
-describe('Validate > Integration > API > addMethod', () => {
-
-    it('should add a validation method to a group', async () => {
-        // expect.assertions(6);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                required
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-        const method = () => false;
-        const message = 'Custom error';
-        validator.addMethod('group1', method, message);
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }, { type: 'custom', method, message }],
-                fields: [input],
-                valid: false
-            }
-        });
-    });
-
-    it('should not add a validation method if parameters are missing', async () => {
-        // expect.assertions(6);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                required
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-        console.warn = jest.fn();
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-        const method = () => false;
-        const message = 'Custom error';
-
-        validator.addMethod(undefined, method, message);
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-        expect(console.warn).toHaveBeenCalled();
-
-    });
-
-    it('should not add a validation method if fields cannot be found', async () => {
-        // expect.assertions(6);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                data-val-${GROUP_ATTRIBUTE}="groupX"
-                value=""
-                required
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-
-        expect(validator.getState().groups).toEqual({
-            groupX: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-        const method = () => false;
-        const message = 'Custom error';
-
-        validator.addMethod('neither-name-or-group-name', method, message);
-        expect(validator.getState().groups).toEqual({
-            groupX: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-
-    });
-
-    it('Should add a validation method when provided an array of fields and a new group name', () => {
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                value=""
-                required
-                type="text" />
-        </form>`;
-        // const form = document.querySelector('.form');
-        const input = document.querySelector('#group1-1');
-        const validator = validate('form')[0];
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            }
-        });
-        const method = () => false;
-        const message = 'Custom error';
-        validator.addMethod('CustomGroup', method, message, [ input ]);
-
-        expect(validator.getState().groups).toEqual({
-            group1: {
-                serverErrorNode: false,
-                validators: [{ type: 'required' }],
-                fields: [input],
-                valid: false
-            },
-            CustomGroup: {
-                serverErrorNode: false,
-                validators: [{ type: 'custom', method, message }],
-                fields: [input],
-                valid: false
-            }
-        });
-    });
-
-});
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/errors/index.js b/packages/validate/__tests__/integration/errors/index.js
deleted file mode 100644
index cfe6a621..00000000
--- a/packages/validate/__tests__/integration/errors/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import validate from '../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-import defaults from '../../../../src/lib/defaults';
-
-describe('Validate > Integration > errors', () => {
-
-    it('Should render client-side error container as the last element in a label', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                required
-                value=""
-                type="text" />
-        </form>`;
-        const validator = validate('form')[0];
-        await validator.validate();
-        //render error message
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
-    });
-
-    it('Should render a text node error to a server-side error container', async () => {
-        expect.assertions(3);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                required
-                value=""
-                type="text"
-                aria-describedby="ssec"
-            />
-            <span id="ssec" data-valmsg-for="group1"></span>
-        </form>`;
-        const [ validator ] = validate('form');
-        await validator.validate();
-        const errorContainer = document.getElementById('ssec');
-        //render error message
-        expect(errorContainer.firstChild).toBeDefined();
-        expect(errorContainer.classList.contains(DOTNET_CLASSNAMES.ERROR)).toEqual(true);
-        expect(errorContainer.firstChild.textContent).toEqual(defaults.messages.required());
-    });
-
-    it('Should clear a server-rendered error node before rendering a text node error to a server-side error container', async () => {
-        expect.assertions(4);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                required
-                value=""
-                type="text"
-                aria-describedby="ssec"
-            />
-            <span id="ssec" data-valmsg-for="group1">The server dislikes this value</span>
-        </form>`;
-        const [ validator ] = validate('form');
-        expect(validator.getState().errors.group1).toEqual('The server dislikes this value');
-        await validator.validate();
-        const errorContainer = document.getElementById('ssec');
-        //render error message
-        expect(errorContainer.firstChild).toBeDefined();
-        expect(errorContainer.classList.contains(DOTNET_CLASSNAMES.ERROR)).toEqual(true);
-        expect(errorContainer.firstChild.textContent).toEqual(defaults.messages.required());
-    });
-
-    it('Should render the invalid input value in the error message if the {{value}} token is used in the supplied error message', async () => {
-        expect.assertions(1);
-        document.body.innerHTML = `<form class="form">
-            <label id="group1-1-label" for="group1-1">group1</label>
-            <input
-                id="group1-1"
-                name="group1"
-                data-val="true"
-                data-val-email="{{value}} is not a valid email address"
-                value="test"
-                type="email"
-                aria-describedby="ssec"
-            />
-            <span id="ssec" data-valmsg-for="group1"></span>
-        </form>`;
-        const [ validator ] = validate('form');
-        await validator.validate();
-        const errorContainer = document.getElementById('ssec');
-        //render error message
-        expect(errorContainer.textContent).toEqual('test is not a valid email address');
-    });
-
-});
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/reset/index.js b/packages/validate/__tests__/integration/reset/index.js
deleted file mode 100644
index 4f42b000..00000000
--- a/packages/validate/__tests__/integration/reset/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import validate from '../../../../src';
-
-describe('Validate > Integration > Reset', () => {
-
-    it('should clear errors messages from state and DOM, remove error classNames and attributes, remove errors from state', async () => {
-        document.body.innerHTML = `<form class="form" method="post" action="">
-            <div>
-                <label for="group1">Label</label>
-                <input id="group1" name="group1" data-val="true" data-val-required="This field is required" />
-            </div>
-            <div>
-                <label for="group2">Label</label>
-                <input id="group2" name="group2" data-val="true" data-val-required="This field is required" />
-            </div>
-        </form>`;
-        // const mockState = {
-        //     groups: {
-        //         group1: {
-        //             fields: Array.from(document.getElementsByName('group1')),
-        //             errorMessages: ['This field is required'],
-        //             valid: false
-        //         },
-        //         group2: {
-        //             fields: Array.from(document.getElementsByName('group2')),
-        //             errorMessages: ['This field is required'],
-        //             valid: false
-        //         }
-        //     },
-        //     errors: {
-        //         group1: document.getElementById('test-error-node-1'),
-        //         group2: document.getElementById('test-error-node-2')
-        //     }
-        // };
-        const [ validator ] = validate('.form');
-        //Validate and set errors in state and DOM
-        await validator.validate();
-        expect(validator.getState().groups.group1.valid).toEqual(false);
-        expect(validator.getState().groups.group2.valid).toEqual(false);
-        expect(validator.getState().errors.group1).toEqual(document.querySelector('#group1').previousElementSibling);
-        expect(validator.getState().errors.group2).toEqual(document.querySelector('#group2').previousElementSibling);
-        expect(validator.getState().groups.group1.fields[0].parentNode.classList.contains('is--invalid')).toEqual(true);
-        expect(validator.getState().groups.group2.fields[0].parentNode.classList.contains('is--invalid')).toEqual(true);
-        expect(validator.getState().groups.group1.fields[0].getAttribute('aria-invalid')).toEqual('true');
-        expect(validator.getState().groups.group2.fields[0].getAttribute('aria-invalid')).toEqual('true');
-
-        //reset to remove errors from state and DOM
-        validator.getState().form.dispatchEvent(new Event('reset'));
-        expect(validator.getState().groups.group1.valid).toEqual(true);
-        expect(validator.getState().groups.group2.valid).toEqual(true);
-        expect(validator.getState().groups.group1.errorMessages).toEqual([]);
-        expect(validator.getState().groups.group2.errorMessages).toEqual([]);
-        expect(validator.getState().errors.group1).toBeUndefined();
-        expect(validator.getState().errors.group2).toBeUndefined();
-        expect(validator.getState().groups.group1.fields[0].parentNode.classList.contains('is--invalid')).toEqual(false);
-        expect(validator.getState().groups.group2.fields[0].parentNode.classList.contains('is--invalid')).toEqual(false);
-        expect(validator.getState().groups.group1.fields[0].getAttribute('aria-invalid')).toEqual(null);
-        expect(validator.getState().groups.group2.fields[0].getAttribute('aria-invalid')).toEqual(null);
-    });
-
-});
diff --git a/packages/validate/__tests__/jest/api.js b/packages/validate/__tests__/jest/api.js
new file mode 100644
index 00000000..e70fd97f
--- /dev/null
+++ b/packages/validate/__tests__/jest/api.js
@@ -0,0 +1,259 @@
+import validate from "../../src";
+import { GROUP_ATTRIBUTE, DOTNET_CLASSNAMES } from "../../src/lib/constants";
+import defaults from "../../src/lib/defaults";
+
+describe("Validate > Integration > API > addGroup", () => {
+	it("should add a validation group", async () => {
+		// expect.assertions(6);
+		document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                type="text" />
+        </form>`;
+		// const form = document.querySelector('.form');
+		const input = document.querySelector("#group1-1");
+		const validator = validate("form")[0];
+
+		expect(validator.getState().groups).toEqual({});
+		input.setAttribute("required", "required");
+		validator.addGroup([input]);
+		expect(validator.getState().groups).toEqual({
+			group1: {
+				serverErrorNode: false,
+				validators: [{ type: "required" }],
+				fields: [input],
+				valid: false,
+			},
+		});
+	});
+
+	it("should return leave state unchanged if it cannot add the validation group", async () => {
+		document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                type="text" />
+        </form>`;
+		const input = document.querySelector("#group1-1");
+		const [validator] = validate("form");
+		console.warn = jest.fn();
+
+		expect(validator.getState().groups).toEqual({});
+		validator.addGroup([input]);
+		expect(validator.getState().groups).toEqual({});
+		expect(console.warn).toHaveBeenCalled();
+	});
+});
+
+describe("Validate > Integration > API > removeGroup", () => {
+	it("should remove a validation group", async () => {
+		// expect.assertions(6);
+		document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                required
+                value=""
+                type="text" />
+        </form>`;
+		const input = document.querySelector("#group1-1");
+		const validator = validate("form")[0];
+
+		expect(validator.getState().groups).toEqual({
+			group1: {
+				serverErrorNode: false,
+				validators: [{ type: "required" }],
+				fields: [input],
+				valid: false,
+			},
+		});
+		input.removeAttribute("required");
+		validator.removeGroup("group1");
+		expect(validator.getState().groups).toEqual({});
+	});
+});
+
+describe("Validate > Integration > API > validateGroup", () => {
+	it("should validate an individual validation group when called", async () => {
+		// expect.assertions(6);
+		document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                required
+                value=""
+                type="text" />
+        </form>`;
+		// const form = document.querySelector('.form');
+		const input = document.querySelector("#group1-1");
+		const validator = validate("form")[0];
+		await validator.validateGroup("group1");
+
+		expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
+
+		input.value = "test";
+		await validator.validateGroup("group1");
+		expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`)).toBeNull();
+	});
+});
+
+describe("Validate > Integration > API > addMethod", () => {
+	it("should add a validation method to a group", async () => {
+		// expect.assertions(6);
+		document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                required
+                type="text" />
+        </form>`;
+		const input = document.querySelector("#group1-1");
+		const validator = validate("form")[0];
+
+		expect(validator.getState().groups).toEqual({
+			group1: {
+				serverErrorNode: false,
+				validators: [{ type: "required" }],
+				fields: [input],
+				valid: false,
+			},
+		});
+		const method = () => false;
+		const message = "Custom error";
+		validator.addMethod("group1", method, message);
+
+		expect(validator.getState().groups).toEqual({
+			group1: {
+				serverErrorNode: false,
+				validators: [{ type: "required" }, { type: "custom", method, message }],
+				fields: [input],
+				valid: false,
+			},
+		});
+	});
+
+	it("should not add a validation method if parameters are missing", async () => {
+		// expect.assertions(6);
+		document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                required
+                type="text" />
+        </form>`;
+		const input = document.querySelector("#group1-1");
+		const validator = validate("form")[0];
+		console.warn = jest.fn();
+
+		expect(validator.getState().groups).toEqual({
+			group1: {
+				serverErrorNode: false,
+				validators: [{ type: "required" }],
+				fields: [input],
+				valid: false,
+			},
+		});
+		const method = () => false;
+		const message = "Custom error";
+
+		validator.addMethod(undefined, method, message);
+		expect(validator.getState().groups).toEqual({
+			group1: {
+				serverErrorNode: false,
+				validators: [{ type: "required" }],
+				fields: [input],
+				valid: false,
+			},
+		});
+		expect(console.warn).toHaveBeenCalled();
+	});
+
+	it("should not add a validation method if fields cannot be found", async () => {
+		// expect.assertions(6);
+		document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                data-val-${GROUP_ATTRIBUTE}="groupX"
+                value=""
+                required
+                type="text" />
+        </form>`;
+		const input = document.querySelector("#group1-1");
+		const validator = validate("form")[0];
+
+		expect(validator.getState().groups).toEqual({
+			groupX: {
+				serverErrorNode: false,
+				validators: [{ type: "required" }],
+				fields: [input],
+				valid: false,
+			},
+		});
+		const method = () => false;
+		const message = "Custom error";
+
+		validator.addMethod("neither-name-or-group-name", method, message);
+		expect(validator.getState().groups).toEqual({
+			groupX: {
+				serverErrorNode: false,
+				validators: [{ type: "required" }],
+				fields: [input],
+				valid: false,
+			},
+		});
+	});
+
+	it("Should add a validation method when provided an array of fields and a new group name", () => {
+		document.body.innerHTML = `<form class="form">
+            <label id="group1-1-label" for="group1-1">group1</label>
+            <input
+                id="group1-1"
+                name="group1"
+                value=""
+                required
+                type="text" />
+        </form>`;
+		const input = document.querySelector("#group1-1");
+		const validator = validate("form")[0];
+
+		expect(validator.getState().groups).toEqual({
+			group1: {
+				serverErrorNode: false,
+				validators: [{ type: "required" }],
+				fields: [input],
+				valid: false,
+			},
+		});
+		const method = () => false;
+		const message = "Custom error";
+		validator.addMethod("CustomGroup", method, message, [input]);
+
+		expect(validator.getState().groups).toEqual({
+			group1: {
+				serverErrorNode: false,
+				validators: [{ type: "required" }],
+				fields: [input],
+				valid: false,
+			},
+			CustomGroup: {
+				serverErrorNode: false,
+				validators: [{ type: "custom", method, message }],
+				fields: [input],
+				valid: false,
+			},
+		});
+	});
+});
diff --git a/packages/validate/__tests__/jest/reset.js b/packages/validate/__tests__/jest/reset.js
new file mode 100644
index 00000000..4145cd61
--- /dev/null
+++ b/packages/validate/__tests__/jest/reset.js
@@ -0,0 +1,32 @@
+import validate from '../../../../src';
+
+describe('Validate  > Reset', () => {
+
+    it('should clear errors messages from state and DOM, remove error classNames and attributes, remove errors from state', async () => {
+        document.body.innerHTML = `<form class="form" method="post" action="">
+            <div>
+                <label for="group1">Label</label>
+                <input id="group1" name="group1" data-val="true" data-val-required="This field is required" />
+            </div>
+            <div>
+                <label for="group2">Label</label>
+                <input id="group2" name="group2" data-val="true" data-val-required="This field is required" />
+            </div>
+        </form>`;
+       
+        const [ validator ] = validate('.form');
+        //Validate and set errors in state and DOM
+        await validator.validate();
+        expect(validator.getState().groups.group1.valid).toEqual(false);
+        expect(validator.getState().groups.group2.valid).toEqual(false);
+
+        //reset to remove errors from state and DOM
+        validator.getState().form.dispatchEvent(new Event('reset'));
+        expect(validator.getState().groups.group1.valid).toEqual(true);
+        expect(validator.getState().groups.group2.valid).toEqual(true);
+        expect(validator.getState().groups.group1.errorMessages).toEqual([]);
+        expect(validator.getState().groups.group2.errorMessages).toEqual([]);
+        expect(validator.getState().errors.group1).toBeUndefined();
+        expect(validator.getState().errors.group2).toBeUndefined();
+    });
+});
diff --git a/packages/validate/__tests__/playwright/errors.spec.js b/packages/validate/__tests__/playwright/errors.spec.js
index 832b8cdb..3c7f7043 100644
--- a/packages/validate/__tests__/playwright/errors.spec.js
+++ b/packages/validate/__tests__/playwright/errors.spec.js
@@ -1,4 +1,5 @@
 const { test, expect } = require('@playwright/test');
+import { DOTNET_CLASSNAMES } from '../../src/lib/constants';
 let tabKey;
 
 test.beforeEach(async ({ page }, testInfo) => {
@@ -11,8 +12,7 @@ test.beforeEach(async ({ page }, testInfo) => {
 
 test.describe('Validate > Errors > Render errors', { tag: '@all'}, () => {
 
-	test('Should add an error message container if there is no serverErrorNode, and attributes to reflect invalidity', async ({ page }) => {	
-
+	test('Should add a client side error message container if no server container exists', async ({ page }) => {
 		await page.goto('/mini-no-server-errors.html');
 		await expect(page.locator("#fname-error-message")).toHaveCount(0);
 		await expect(page.locator("#lname-error-message")).toHaveCount(0);
@@ -31,6 +31,15 @@ test.describe('Validate > Errors > Render errors', { tag: '@all'}, () => {
 
 	});
 
+	test('Should add a client side error message container as the next sibling of the associated label', async ({ page }) => {	
+		await page.goto('/mini-no-server-errors.html');
+		await page.click("#submitTest");
+		const errorContainer = page.locator("[for='fname'] + *");
+		expect(errorContainer).not.toBeNull();
+		await expect(errorContainer).toHaveClass(new RegExp(`^${DOTNET_CLASSNAMES.ERROR}$`));
+		await expect(errorContainer).toHaveAttribute("id", "fname-error-message");
+	});
+
 	test('Should add an error message text node to a serverErrorNode, and attributes to reflect invalidity', async ({ page }) => {	
 
 		await page.goto('/mini.html');
diff --git a/packages/validate/__tests__/playwright/reset.spec.js b/packages/validate/__tests__/playwright/reset.spec.js
new file mode 100644
index 00000000..5e16341a
--- /dev/null
+++ b/packages/validate/__tests__/playwright/reset.spec.js
@@ -0,0 +1,37 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('Validate > Reset', { tag: '@all'}, () => {
+	test('Should reset the form errors when a reset event is dispached', async ({ page }) => {	
+		await page.goto('/mini.html');
+
+        const fnameErrorNode = page.locator("[data-valmsg-for='fname']");
+		const lnameErrorNode = page.locator("[data-valmsg-for='lname']");
+
+        const message1 = await page.evaluate(() => document.querySelector("#fname").getAttribute("data-val-required"));
+        const message2 = await page.evaluate(() => document.querySelector("#lname").getAttribute("data-val-required"));
+
+        await expect(fnameErrorNode).toBeEmpty();
+		await expect(lnameErrorNode).toHaveText('Existing server error');
+
+        await page.click('#submitTest');
+        await expect(fnameErrorNode).toHaveText(message1);
+        await expect(lnameErrorNode).toHaveText(message2);
+        await expect(page.locator("#fname")).toHaveAttribute("aria-invalid", "true");
+        await expect(page.locator("#fname")).toHaveAttribute("aria-describedby", "fname-error-message");
+        await expect(page.locator("//*[@id='fname']//parent::div")).toHaveClass(/is--invalid/);
+        await expect(page.locator("#lname")).toHaveAttribute("aria-invalid", "true");
+        await expect(page.locator("#lname")).toHaveAttribute("aria-describedby", "lname-error-message");
+        await expect(page.locator("//*[@id='lname']//parent::div")).toHaveClass(/is--invalid/);
+
+		await page.click('#resetBtn');
+
+        await expect(fnameErrorNode).toBeEmpty();
+        await expect(lnameErrorNode).toBeEmpty();
+        await expect(page.locator("#fname")).not.toHaveAttribute("aria-invalid");
+        await expect(page.locator("#fname")).not.toHaveAttribute("aria-describedby");
+        await expect(page.locator("//*[@id='fname']//parent::div")).not.toHaveClass(/is--invalid/);
+        await expect(page.locator("#lname")).not.toHaveAttribute("aria-invalid");
+        await expect(page.locator("#lname")).not.toHaveAttribute("aria-describedby");
+        await expect(page.locator("//*[@id='lname']//parent::div")).not.toHaveClass(/is--invalid/);
+	});
+});
diff --git a/packages/validate/example/src/index.html b/packages/validate/example/src/index.html
index d5b2f048..f5eb027d 100644
--- a/packages/validate/example/src/index.html
+++ b/packages/validate/example/src/index.html
@@ -722,13 +722,13 @@ <h1>Your details</h1>
             </fieldset>
             <fieldset class="fieldset">
                 <legend class="legend">Testing grouped validation</legend>
-                <div>
-                    <label id="test-label" for="group1">Text</label>
-                    <input id="group1" name="group1" value="test" data-val="true" data-val-regex="{{value}} are not valid inputs" data-val-regex-pattern="^http(s)?">
+                <div class="form-row">
+                    <label class="label" id="test-label" for="group1">Text</label>
+                    <input id="group1" name="group1" value="test" data-val="true" data-val-regex="{{value}} are not valid inputs" class="input" data-val-regex-pattern="^http(s)?">
                 </div>
-                <div>
-                    <label id="test-label2" for="group2">Text</label>
-                    <input id="group2" name="group1" value="test2" data-val="true" data-val-regex="{{value}} are not valid inputs" data-val-regex-pattern="^http(s)?">
+                <div class="form-row">
+                    <label class="label" id="test-label2" for="group2">Text</label>
+                    <input class="input" id="group2" name="group1" value="test2" data-val="true" data-val-regex="{{value}} are not valid inputs" data-val-regex-pattern="^http(s)?">
                 </div>
             </fieldset>
             <fieldset class="fieldset">
diff --git a/packages/validate/example/src/js/index.js b/packages/validate/example/src/js/index.js
index b5357822..ed468417 100644
--- a/packages/validate/example/src/js/index.js
+++ b/packages/validate/example/src/js/index.js
@@ -3,6 +3,13 @@ import { isValidDate, isFutureDate, isPastDate } from '../../../src/lib/plugins/
 
 {
     const formToValidate = document.querySelector('.js-validate');
+    const resetBtn = document.getElementById('resetBtn');
+
+    if(resetBtn) resetBtn.addEventListener('click', () => {     
+        const event = new Event('reset');
+        formToValidate.dispatchEvent(event);
+    });
+    
     const [ validator ] = validate(formToValidate, {
         preSubmitHook: () => {
             const hiddenCheck = document.createElement('input');
diff --git a/packages/validate/example/src/mini.html b/packages/validate/example/src/mini.html
index f5f52941..8e7b18ac 100644
--- a/packages/validate/example/src/mini.html
+++ b/packages/validate/example/src/mini.html
@@ -634,6 +634,7 @@ <h1>Your details</h1>
                 </div>
             </fieldset>
             <button type="submit" class="btn" name="submitTest" id="submitTest" value="checking">Submit</button>
+            <button type="button" class="btn" id="resetBtn">Reset form</button>
         </form>
     </main>
 </body>

From 0f0e36eb0d9121d0ec3c51b283a215244e660741 Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Mon, 29 Sep 2025 10:31:59 +0100
Subject: [PATCH 09/14] Realitime validation

---
 .../__tests__/integration/real-time/index.js  | 138 ------------------
 .../__tests__/integration/submit/index.js     |  53 -------
 .../normalise-validators/dateISO.js           |   0
 .../normalise-validators/digits.js            |   0
 .../normalise-validators/email.js             |   0
 .../normalise-validators/equalto.js           |   0
 .../normalise-validators/length.js            |   0
 .../normalise-validators/max.js               |   0
 .../normalise-validators/maxlength.js         |   0
 .../normalise-validators/min.js               |   0
 .../normalise-validators/minlength.js         |   0
 .../normalise-validators/number.js            |   0
 .../normalise-validators/range.js             |   0
 .../normalise-validators/regex-pattern.js     |   0
 .../normalise-validators/remote.js            |   0
 .../normalise-validators/required.js          |   0
 .../normalise-validators/stringlength.js      |   0
 .../normalise-validators/url.js               |   0
 packages/validate/__tests__/jest/submit.js    |  23 +++
 .../__tests__/playwright/real-time.spec.js    | 100 +++++++++++++
 packages/validate/example/src/index.html      |  10 ++
 packages/validate/example/src/js/index.js     |   2 +
 22 files changed, 135 insertions(+), 191 deletions(-)
 delete mode 100644 packages/validate/__tests__/integration/real-time/index.js
 delete mode 100644 packages/validate/__tests__/integration/submit/index.js
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/dateISO.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/digits.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/email.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/equalto.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/length.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/max.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/maxlength.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/min.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/minlength.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/number.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/range.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/regex-pattern.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/remote.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/required.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/stringlength.js (100%)
 rename packages/validate/__tests__/{integration => jest}/normalise-validators/url.js (100%)
 create mode 100644 packages/validate/__tests__/jest/submit.js
 create mode 100644 packages/validate/__tests__/playwright/real-time.spec.js

diff --git a/packages/validate/__tests__/integration/real-time/index.js b/packages/validate/__tests__/integration/real-time/index.js
deleted file mode 100644
index 2bac39ad..00000000
--- a/packages/validate/__tests__/integration/real-time/index.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import validate from '../../../../src';
-import defaults from '../../../../src/lib/defaults';
-import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
-
-
-describe('Validate > Integration > Real-time', () => {
-
-    it('should start real-time validation after first form submission', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form method="post" action="">
-            <label for="group1">Group1</label>
-            <input
-                id="group1"
-                name="group1"
-                value=""
-                required>
-        </form>`;
-
-        const form = document.querySelector('form');
-        const [ validator ] = validate(form);
-        await validator.validate();
-        const validityState = await validator.validate();
-        expect(validityState).toEqual(false);
-        expect(validator.getState().realTimeValidation).toEqual(true);
-    });
-
-    it('should remove error message and not replace if field is valid', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form method="post" action="">
-            <label for="group1">Group1</label>
-            <input
-                id="group1"
-                name="group1"
-                value=""
-                required>
-        </form>`;
-
-        const form = document.querySelector('form');
-        const input = document.querySelector('input');
-        const [ validator ] = validate(form);
-        await validator.validate();
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`)).toBeDefined();
-        input.value = 'Super';
-        const event = new Event('input', { bubbles: false });
-        input.dispatchEvent(event);
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`)).toBeNull();
-    });
-
-    
-    it('should update error message based on real-time validation', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form method="post" action="">
-            <label for="group1">Group1</label>
-            <input
-                type="email"
-                id="group1"
-                name="group1"
-                required>
-        </form>`;
-
-        const form = document.querySelector('form');
-        const input = document.querySelector('input');
-        const [ validator ] = validate(form);
-        await validator.validate();
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
-        input.value = 'Super';
-        const event = new Event('input', { bubbles: false });
-        input.dispatchEvent(event);
-        
-        //have to game Jest to ensure that the error is rendered in time for the assertion
-        const nextMsg = await new Promise((resolve, reject) => setTimeout(() => {
-            resolve(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent);
-        }, 16));
-
-        expect(nextMsg).toEqual(defaults.messages.email());
-    });
-
-    it('should trigger real-time validation with appropriate event for the input type', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form method="post" action="">
-            <label for="group1">Group1</label>
-            <input
-                type="checkbox"
-                id="group1"
-                name="group1"
-                required>
-        </form>`;
-
-        const form = document.querySelector('form');
-        const input = document.querySelector('input');
-        const [ validator ] = validate(form);
-        await validator.validate();
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
-        input.checked = 'checked';
-        const event = new Event('change', { bubbles: false });
-        input.dispatchEvent(event);
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`)).toBeNull();
-    });
-
-    it('should run realtime validation after a new group is added post first validation', async () => {
-        expect.assertions(3);
-        document.body.innerHTML = `<form method="post" action="">
-            <label for="group1">Group1</label>
-            <input
-                type="checkbox"
-                id="group1"
-                name="group1"
-                required />
-        </form>`;
-
-        const form = document.querySelector('form');
-        const [ validator ] = validate(form);
-        await validator.validate();
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
-
-        const newLabel = document.createElement('label');
-        newLabel.textContent = 'Group2';
-        newLabel.setAttribute('for', 'group2');
-        form.appendChild(newLabel);
-
-        const newInput = document.createElement('input');
-        newInput.setAttribute('type', 'text');
-        newInput.setAttribute('id', 'group2');
-        newInput.setAttribute('name', 'group2');
-        newInput.required = true;
-        form.appendChild(newInput);
-
-        validator.addGroup([newInput]);
-        await validator.validate();
-        expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
-
-        newInput.value = 'Sample';
-        const event = new Event('input', { bubbles: false });
-        newInput.dispatchEvent(event);
-        expect([].slice.call(document.querySelectorAll(`.${DOTNET_CLASSNAMES.ERROR}`)).length).toEqual(1);
-    });
-    
-});
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/submit/index.js b/packages/validate/__tests__/integration/submit/index.js
deleted file mode 100644
index dd39eded..00000000
--- a/packages/validate/__tests__/integration/submit/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import validate from '../../../src';
-
-describe('Validate > Integration > Submit', () => {
-
-    it('should call the submit function if validation passes', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form method="post" action="">
-            <input
-                id="group1"
-                name="group1"
-                value="valid"
-                required>
-            <button type="submit">Submit</button>
-        </form>`;
-
-        // const form = document.querySelector('form');
-        // const button = document.querySelector('button');
-        const submit = jest.fn();
-        const [ validator ] = validate(document.querySelector('form'), { submit });
-        await validator.validate({ target: true, preventDefault(){} });
-        // button.click();
-        expect(validator.getState().settings.submit).toEqual(submit);
-        expect(submit).toBeCalled();
-
-    });
-
-});
-
-describe('Validate > Integration > preSubmitHook', () => {
-
-    it('should call the submit function if validation passes', async () => {
-        expect.assertions(2);
-        document.body.innerHTML = `<form method="post" action="">
-            <input
-                id="group1"
-                name="group1"
-                value="valid"
-                required>
-            <button type="submit">Submit</button>
-        </form>`;
-
-        // const form = document.querySelector('form');
-        // const button = document.querySelector('button');
-        const preSubmitHook = jest.fn();
-        const [ validator ] = validate(document.querySelector('form'), { preSubmitHook });
-
-        await validator.validate({ target: true, preventDefault(){} });
-        expect(validator.getState().settings.preSubmitHook).toEqual(preSubmitHook);
-        expect(preSubmitHook).toBeCalled();
-
-    });
-
-});
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/normalise-validators/dateISO.js b/packages/validate/__tests__/jest/normalise-validators/dateISO.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/dateISO.js
rename to packages/validate/__tests__/jest/normalise-validators/dateISO.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/digits.js b/packages/validate/__tests__/jest/normalise-validators/digits.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/digits.js
rename to packages/validate/__tests__/jest/normalise-validators/digits.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/email.js b/packages/validate/__tests__/jest/normalise-validators/email.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/email.js
rename to packages/validate/__tests__/jest/normalise-validators/email.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/equalto.js b/packages/validate/__tests__/jest/normalise-validators/equalto.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/equalto.js
rename to packages/validate/__tests__/jest/normalise-validators/equalto.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/length.js b/packages/validate/__tests__/jest/normalise-validators/length.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/length.js
rename to packages/validate/__tests__/jest/normalise-validators/length.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/max.js b/packages/validate/__tests__/jest/normalise-validators/max.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/max.js
rename to packages/validate/__tests__/jest/normalise-validators/max.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/maxlength.js b/packages/validate/__tests__/jest/normalise-validators/maxlength.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/maxlength.js
rename to packages/validate/__tests__/jest/normalise-validators/maxlength.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/min.js b/packages/validate/__tests__/jest/normalise-validators/min.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/min.js
rename to packages/validate/__tests__/jest/normalise-validators/min.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/minlength.js b/packages/validate/__tests__/jest/normalise-validators/minlength.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/minlength.js
rename to packages/validate/__tests__/jest/normalise-validators/minlength.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/number.js b/packages/validate/__tests__/jest/normalise-validators/number.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/number.js
rename to packages/validate/__tests__/jest/normalise-validators/number.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/range.js b/packages/validate/__tests__/jest/normalise-validators/range.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/range.js
rename to packages/validate/__tests__/jest/normalise-validators/range.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/regex-pattern.js b/packages/validate/__tests__/jest/normalise-validators/regex-pattern.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/regex-pattern.js
rename to packages/validate/__tests__/jest/normalise-validators/regex-pattern.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/remote.js b/packages/validate/__tests__/jest/normalise-validators/remote.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/remote.js
rename to packages/validate/__tests__/jest/normalise-validators/remote.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/required.js b/packages/validate/__tests__/jest/normalise-validators/required.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/required.js
rename to packages/validate/__tests__/jest/normalise-validators/required.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/stringlength.js b/packages/validate/__tests__/jest/normalise-validators/stringlength.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/stringlength.js
rename to packages/validate/__tests__/jest/normalise-validators/stringlength.js
diff --git a/packages/validate/__tests__/integration/normalise-validators/url.js b/packages/validate/__tests__/jest/normalise-validators/url.js
similarity index 100%
rename from packages/validate/__tests__/integration/normalise-validators/url.js
rename to packages/validate/__tests__/jest/normalise-validators/url.js
diff --git a/packages/validate/__tests__/jest/submit.js b/packages/validate/__tests__/jest/submit.js
new file mode 100644
index 00000000..be97b8c3
--- /dev/null
+++ b/packages/validate/__tests__/jest/submit.js
@@ -0,0 +1,23 @@
+import validate from '../../src';
+
+describe('Validate > Integration > Submit', () => {
+
+    it('should call the submit function if validation passes', async () => {
+        expect.assertions(2);
+        document.body.innerHTML = `<form method="post" action="">
+            <input
+                id="group1"
+                name="group1"
+                value="valid"
+                required>
+            <button type="submit">Submit</button>
+        </form>`;
+
+        const submit = jest.fn();
+        const [ validator ] = validate(document.querySelector('form'), { submit });
+        await validator.validate({ target: true, preventDefault(){} });
+        expect(validator.getState().settings.submit).toEqual(submit);
+        expect(submit).toBeCalled();
+    });
+
+});
\ No newline at end of file
diff --git a/packages/validate/__tests__/playwright/real-time.spec.js b/packages/validate/__tests__/playwright/real-time.spec.js
new file mode 100644
index 00000000..7bc4eceb
--- /dev/null
+++ b/packages/validate/__tests__/playwright/real-time.spec.js
@@ -0,0 +1,100 @@
+const { test, expect } = require('@playwright/test');
+const exp = require('constants');
+
+test.describe('Validate > Realtime validation', { tag: '@all'}, () => {
+	test('Should start real-time validation after first form submission', async ({ page }) => {	
+        await page.goto("/");
+        const emailInput = page.locator('#email');
+        const emailErrorContainer = page.locator('[data-valmsg-for="email"]');
+        await expect(emailErrorContainer).toBeEmpty();
+        await expect(emailInput).not.toHaveAttribute('aria-invalid');
+        await expect(emailInput).not.toHaveAttribute('aria-describedby');
+        await expect(page.locator("//*[@id='email']//parent::div")).not.toHaveClass(/is--invalid/);
+
+        await page.fill('#email', 'invalid-email');
+        await expect(emailErrorContainer).toBeEmpty();
+        await expect(emailInput).not.toHaveAttribute('aria-invalid');
+        await expect(emailInput).not.toHaveAttribute('aria-describedby');
+        await expect(page.locator("//*[@id='email']//parent::div")).not.toHaveClass(/is--invalid/);
+
+        await page.click('#submitTest');
+        await expect(emailErrorContainer).toHaveText('invalid-email is not a valid email address');
+        await expect(emailInput).toHaveAttribute('aria-invalid');
+        await expect(emailInput).toHaveAttribute('aria-describedby');
+        await expect(page.locator("//*[@id='email']//parent::div")).toHaveClass(/is--invalid/);
+
+        await page.fill('#email', 'test@test.com');
+        await expect(emailErrorContainer).toBeEmpty();
+        await expect(emailInput).not.toHaveAttribute('aria-invalid');
+        await expect(emailInput).not.toHaveAttribute('aria-describedby');
+        await expect(page.locator("//*[@id='email']//parent::div")).not.toHaveClass(/is--invalid/);
+    });
+
+    test('Should update error message on real-time input', async ({ page }) => {
+        await page.goto("/");
+        const emailInput = page.locator('#email');
+        const emailErrorContainer = page.locator('[data-valmsg-for="email"]');
+        await expect(emailErrorContainer).toBeEmpty();
+        await emailInput.fill('invalid-email');
+        await page.click('#submitTest');
+        await expect(emailErrorContainer).toHaveText('invalid-email is not a valid email address');
+        await emailInput.clear();
+        await expect(emailErrorContainer).toHaveText('Email must not be empty');
+        await emailInput.fill('test@test.com');
+        await expect(emailErrorContainer).toBeEmpty();
+    })
+
+    test('Should update realtime on non-text input types', async ({ page }) => {
+        await page.goto("/");
+        const selectBoxErrorContainer = page.locator('#selectexample-error-message');
+        const checkboxErrorContainer = page.locator('#opts-error-message');
+        const radioErrorContainer = page.locator('#radio-error-message');
+
+        const selectBox = page.locator('#selectexample');
+        const checkbox1 = page.locator('#opt1');
+        const radio1 = page.locator('#radio-1');
+
+        await page.click('#submitTest');
+        
+        await expect(selectBoxErrorContainer).toHaveText('You must select an option');
+        await expect(checkboxErrorContainer).toHaveText('Select at least one option');
+        await expect(radioErrorContainer).toHaveText('Select an option');
+
+        await selectBox.selectOption('option1');
+        await expect(selectBoxErrorContainer).toBeEmpty();
+
+        await checkbox1.check();
+        await expect(checkboxErrorContainer).toBeEmpty();
+
+        await radio1.check();
+        await expect(radioErrorContainer).toBeEmpty();
+
+    });
+
+    test('Should apply realtime validation to groups added later', async ({ page }) => {
+
+        await page.goto("/");
+        await page.evaluate(() => {     
+            const newLabel = document.createElement('label');
+            newLabel.textContent = 'New Input';
+            newLabel.setAttribute('for', 'newinput');
+            document.querySelector('form').appendChild(newLabel);
+            const newInput = document.createElement('input');
+            newInput.setAttribute('type', 'text');
+            newInput.setAttribute('id', 'newinput');
+            newInput.setAttribute('name', 'newinput');
+            newInput.setAttribute('data-val', 'true');
+            newInput.setAttribute('data-val-required', 'New input is required');
+            document.querySelector('form').appendChild(newInput);
+            window.validator.addGroup([newInput]);
+        });
+
+        await page.click('#submitTest');
+        const newInputErrorContainer = page.locator('#newinput-error-message');
+        const newInput = page.locator('#newinput');
+        await expect(newInputErrorContainer).toHaveText('New input is required');
+        await expect(newInput).toHaveAttribute('aria-invalid');
+        await expect(newInput).toHaveAttribute('aria-describedby');
+        await expect(page.locator("//*[@id='newinput']//parent::form")).toHaveClass(/is--invalid/);
+    });
+});
diff --git a/packages/validate/example/src/index.html b/packages/validate/example/src/index.html
index f5eb027d..81a50b6c 100644
--- a/packages/validate/example/src/index.html
+++ b/packages/validate/example/src/index.html
@@ -642,6 +642,16 @@ <h1>Your details</h1>
                     <input data-val="true" data-val-required="Email must not be empty"
                         data-val-email="{{value}} is not a valid email address" class="input" type="email" id="email"
                         autocomplete="email" name="email" />
+                </div>
+                <div class="form-row">
+                    <label for="selectexample" class="label">Select an option</label>
+                    <span class="error-message" data-valmsg-for="selectexample"></span>
+                    <select data-val="true" data-val-required="You must select an option" class="select input" id="selectexample" name="selectexample">
+                        <option value="">Please select</option>
+                        <option value="option1">Option 1</option>
+                        <option value="option2">Option 2</option>
+                    </select>
+                </div>
             </fieldset>
             <fieldset class="fieldset">
                 <legend class="legend">Your preferences</legend>
diff --git a/packages/validate/example/src/js/index.js b/packages/validate/example/src/js/index.js
index ed468417..0352aabe 100644
--- a/packages/validate/example/src/js/index.js
+++ b/packages/validate/example/src/js/index.js
@@ -35,4 +35,6 @@ import { isValidDate, isFutureDate, isPastDate } from '../../../src/lib/plugins/
             [ document.getElementById('dateDay'), document.getElementById('dateMonth'), document.getElementById('dateYear') ] 
         );
     }
+
+    window.validator = validator;
 };
\ No newline at end of file

From 96ffb05bbcea9f5861e89bd03dd327f73481638e Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Mon, 29 Sep 2025 10:53:36 +0100
Subject: [PATCH 10/14] clean up

---
 .../validate/__tests__/jest/{ => api}/api.js  | 14 ++----
 .../api/validate/bypass-disabled.js           |  2 -
 .../api/validate/dateISO.js                   | 12 -----
 .../api/validate/digits.js                    | 12 -----
 .../api/validate/email.js                     | 19 --------
 .../api/validate/equalto.js                   |  5 --
 .../api/validate/length.js                    |  4 --
 .../{integration => jest}/api/validate/max.js |  8 ----
 .../api/validate/maxlength.js                 |  8 ----
 .../{integration => jest}/api/validate/min.js |  6 ---
 .../api/validate/minlength.js                 |  8 ----
 .../api/validate/number.js                    |  4 --
 .../api/validate/range.js                     | 15 ------
 .../api/validate/regex-pattern.js             |  8 ----
 .../api/validate/remote.js                    |  9 ----
 .../api/validate/required.js                  | 11 -----
 .../api/validate/stringlength.js              |  4 --
 .../{integration => jest}/api/validate/url.js | 11 -----
 packages/validate/__tests__/jest/errors.js    |  4 --
 .../validate/__tests__/jest/initialisation.js |  1 -
 packages/validate/__tests__/jest/methods.js   | 48 -------------------
 .../{integration => jest}/plugins/date.js     |  0
 .../{integration => jest}/plugins/luhn.js     |  9 ----
 packages/validate/__tests__/jest/reducers.js  | 11 -----
 packages/validate/__tests__/jest/reset.js     |  2 -
 packages/validate/__tests__/jest/store.js     |  4 +-
 packages/validate/__tests__/jest/submit.js    |  2 -
 packages/validate/__tests__/jest/utils.js     | 33 ++++++++-----
 packages/validate/__tests__/jest/validator.js | 28 ++---------
 .../{integration => jest}/validator/custom.js |  2 +-
 .../validator/dateISO.js                      |  0
 .../{integration => jest}/validator/digits.js |  0
 .../{integration => jest}/validator/email.js  |  0
 .../validator/equalto.js                      |  0
 .../{integration => jest}/validator/index.js  |  0
 .../validator/isHidden.js                     |  0
 .../{integration => jest}/validator/length.js |  0
 .../{integration => jest}/validator/max.js    |  0
 .../validator/maxlength.js                    |  0
 .../{integration => jest}/validator/min.js    |  0
 .../validator/minlength.js                    |  0
 .../{integration => jest}/validator/number.js |  0
 .../{integration => jest}/validator/range.js  |  0
 .../validator/regex-pattern.js                |  0
 .../{integration => jest}/validator/remote.js |  0
 .../validator/required.js                     |  0
 .../validator/stringlength.js                 |  0
 .../{integration => jest}/validator/url.js    |  2 +-
 .../playwright/accessibility.spec.js          |  7 +--
 .../__tests__/playwright/errors.spec.js       |  6 +--
 .../playwright/post-validation.spec.js        |  4 +-
 .../__tests__/playwright/real-time.spec.js    |  1 -
 52 files changed, 33 insertions(+), 291 deletions(-)
 rename packages/validate/__tests__/jest/{ => api}/api.js (94%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/bypass-disabled.js (98%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/dateISO.js (84%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/digits.js (84%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/email.js (86%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/equalto.js (92%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/length.js (92%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/max.js (91%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/maxlength.js (91%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/min.js (94%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/minlength.js (91%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/number.js (93%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/range.js (90%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/regex-pattern.js (91%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/remote.js (94%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/required.js (91%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/stringlength.js (92%)
 rename packages/validate/__tests__/{integration => jest}/api/validate/url.js (91%)
 rename packages/validate/__tests__/{integration => jest}/plugins/date.js (100%)
 rename packages/validate/__tests__/{integration => jest}/plugins/luhn.js (90%)
 rename packages/validate/__tests__/{integration => jest}/validator/custom.js (97%)
 rename packages/validate/__tests__/{integration => jest}/validator/dateISO.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/digits.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/email.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/equalto.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/index.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/isHidden.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/length.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/max.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/maxlength.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/min.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/minlength.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/number.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/range.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/regex-pattern.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/remote.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/required.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/stringlength.js (100%)
 rename packages/validate/__tests__/{integration => jest}/validator/url.js (97%)

diff --git a/packages/validate/__tests__/jest/api.js b/packages/validate/__tests__/jest/api/api.js
similarity index 94%
rename from packages/validate/__tests__/jest/api.js
rename to packages/validate/__tests__/jest/api/api.js
index e70fd97f..c3e46957 100644
--- a/packages/validate/__tests__/jest/api.js
+++ b/packages/validate/__tests__/jest/api/api.js
@@ -1,10 +1,9 @@
-import validate from "../../src";
-import { GROUP_ATTRIBUTE, DOTNET_CLASSNAMES } from "../../src/lib/constants";
-import defaults from "../../src/lib/defaults";
+import validate from "../../../src";
+import { GROUP_ATTRIBUTE, DOTNET_CLASSNAMES } from "../../../src/lib/constants";
+import defaults from "../../../src/lib/defaults";
 
 describe("Validate > Integration > API > addGroup", () => {
 	it("should add a validation group", async () => {
-		// expect.assertions(6);
 		document.body.innerHTML = `<form class="form">
             <label id="group1-1-label" for="group1-1">group1</label>
             <input
@@ -13,7 +12,6 @@ describe("Validate > Integration > API > addGroup", () => {
                 value=""
                 type="text" />
         </form>`;
-		// const form = document.querySelector('.form');
 		const input = document.querySelector("#group1-1");
 		const validator = validate("form")[0];
 
@@ -52,7 +50,6 @@ describe("Validate > Integration > API > addGroup", () => {
 
 describe("Validate > Integration > API > removeGroup", () => {
 	it("should remove a validation group", async () => {
-		// expect.assertions(6);
 		document.body.innerHTML = `<form class="form">
             <label id="group1-1-label" for="group1-1">group1</label>
             <input
@@ -81,7 +78,6 @@ describe("Validate > Integration > API > removeGroup", () => {
 
 describe("Validate > Integration > API > validateGroup", () => {
 	it("should validate an individual validation group when called", async () => {
-		// expect.assertions(6);
 		document.body.innerHTML = `<form class="form">
             <label id="group1-1-label" for="group1-1">group1</label>
             <input
@@ -91,7 +87,6 @@ describe("Validate > Integration > API > validateGroup", () => {
                 value=""
                 type="text" />
         </form>`;
-		// const form = document.querySelector('.form');
 		const input = document.querySelector("#group1-1");
 		const validator = validate("form")[0];
 		await validator.validateGroup("group1");
@@ -106,7 +101,6 @@ describe("Validate > Integration > API > validateGroup", () => {
 
 describe("Validate > Integration > API > addMethod", () => {
 	it("should add a validation method to a group", async () => {
-		// expect.assertions(6);
 		document.body.innerHTML = `<form class="form">
             <label id="group1-1-label" for="group1-1">group1</label>
             <input
@@ -142,7 +136,6 @@ describe("Validate > Integration > API > addMethod", () => {
 	});
 
 	it("should not add a validation method if parameters are missing", async () => {
-		// expect.assertions(6);
 		document.body.innerHTML = `<form class="form">
             <label id="group1-1-label" for="group1-1">group1</label>
             <input
@@ -180,7 +173,6 @@ describe("Validate > Integration > API > addMethod", () => {
 	});
 
 	it("should not add a validation method if fields cannot be found", async () => {
-		// expect.assertions(6);
 		document.body.innerHTML = `<form class="form">
             <label id="group1-1-label" for="group1-1">group1</label>
             <input
diff --git a/packages/validate/__tests__/integration/api/validate/bypass-disabled.js b/packages/validate/__tests__/jest/api/validate/bypass-disabled.js
similarity index 98%
rename from packages/validate/__tests__/integration/api/validate/bypass-disabled.js
rename to packages/validate/__tests__/jest/api/validate/bypass-disabled.js
index 5cd0741a..3676ddd6 100644
--- a/packages/validate/__tests__/integration/api/validate/bypass-disabled.js
+++ b/packages/validate/__tests__/jest/api/validate/bypass-disabled.js
@@ -14,8 +14,6 @@ describe('Validate > Integration > api > validate > bypass disabled fields', ()
                 required
                 disabled
             />
-
-            
             <label id="group1-1-label" for="group1-1">group1</label>
             <input
                 id="group2"
diff --git a/packages/validate/__tests__/integration/api/validate/dateISO.js b/packages/validate/__tests__/jest/api/validate/dateISO.js
similarity index 84%
rename from packages/validate/__tests__/integration/api/validate/dateISO.js
rename to packages/validate/__tests__/jest/api/validate/dateISO.js
index 6479a426..04abc1f4 100644
--- a/packages/validate/__tests__/integration/api/validate/dateISO.js
+++ b/packages/validate/__tests__/jest/api/validate/dateISO.js
@@ -2,14 +2,6 @@ import validate from '../../../../../src';
 import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
 
 describe('Validate > Integration >  api > validate > dateISO', () => {
-    //return boolean validityState
-    //start realtimevalidation
-    //render errors
-    //focus on first invalid field
-
-    //return boolean validityState
-    //submit form
-
     it('should validate a form based on the data-val dateISO validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
         expect.assertions(4);
         document.body.innerHTML = `<form class="form">
@@ -23,15 +15,11 @@ describe('Validate > Integration >  api > validate > dateISO', () => {
                 type="text" />
         </form>`;
         const input = document.getElementById('group1-1');
-        const label = document.getElementById('group1-1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('DateISO error message');
     });
 
diff --git a/packages/validate/__tests__/integration/api/validate/digits.js b/packages/validate/__tests__/jest/api/validate/digits.js
similarity index 84%
rename from packages/validate/__tests__/integration/api/validate/digits.js
rename to packages/validate/__tests__/jest/api/validate/digits.js
index f02600f7..5e200c07 100644
--- a/packages/validate/__tests__/integration/api/validate/digits.js
+++ b/packages/validate/__tests__/jest/api/validate/digits.js
@@ -2,14 +2,6 @@ import validate from '../../../../../src';
 import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
 
 describe('Validate > Integration > api > validate > digits', () => {
-    //return boolean validityState
-    //start realtimevalidation
-    //render errors
-    //focus on first invalid field
-
-    //return boolean validityState
-    //submit form
-
     it('should validate a form based on the data-val digits validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
         expect.assertions(4);
         document.body.innerHTML = `<form class="form">
@@ -23,15 +15,11 @@ describe('Validate > Integration > api > validate > digits', () => {
                 type="text" />
         </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Digits error message');
     });
 
diff --git a/packages/validate/__tests__/integration/api/validate/email.js b/packages/validate/__tests__/jest/api/validate/email.js
similarity index 86%
rename from packages/validate/__tests__/integration/api/validate/email.js
rename to packages/validate/__tests__/jest/api/validate/email.js
index 74874f0c..3fd8079d 100644
--- a/packages/validate/__tests__/integration/api/validate/email.js
+++ b/packages/validate/__tests__/jest/api/validate/email.js
@@ -3,14 +3,6 @@ import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
 import defaults from '../../../../../src/lib/defaults';
 
 describe('Validate > Integration >  api > validate > email', () => {
-    //return boolean validityState
-    //start realtimevalidation
-    //render errors
-    //focus on first invalid field
-
-    //return boolean validityState
-    //submit form
-
     it('should validate a form based on the HTML5 email validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
         expect.assertions(4);
         document.body.innerHTML = `<form class="form">
@@ -22,16 +14,11 @@ describe('Validate > Integration >  api > validate > email', () => {
                 type="email" />
         </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        // //validityState
         expect(validityState).toEqual(false);
-        // //realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        //render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.email());
     });
 
@@ -47,7 +34,6 @@ describe('Validate > Integration >  api > validate > email', () => {
         </form>`;
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        // //validityState
         expect(validityState).toEqual(true);
     });
 
@@ -67,13 +53,9 @@ describe('Validate > Integration >  api > validate > email', () => {
         const input = document.getElementById('group2');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        //validityState
         expect(validityState).toEqual(false);
-        //realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        //focus on firstinvalid node
         expect(document.activeElement).toEqual(input);
-        //render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Email error message');
         
     });
@@ -92,7 +74,6 @@ describe('Validate > Integration >  api > validate > email', () => {
         </form>`;
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        // //validityState
         expect(validityState).toEqual(true);
     });
 });
diff --git a/packages/validate/__tests__/integration/api/validate/equalto.js b/packages/validate/__tests__/jest/api/validate/equalto.js
similarity index 92%
rename from packages/validate/__tests__/integration/api/validate/equalto.js
rename to packages/validate/__tests__/jest/api/validate/equalto.js
index d1beefa7..018fa038 100644
--- a/packages/validate/__tests__/integration/api/validate/equalto.js
+++ b/packages/validate/__tests__/jest/api/validate/equalto.js
@@ -22,16 +22,11 @@ describe('Validate > Integration >  api > validate > equalto', () => {
                 name="DoubleConfirmEmail"
                 value="not.the.same.email.address@stormid.com" /></form>`;
         const input = document.querySelector('#DoubleConfirmEmail');
-        // const label = document.getElementById('DoubleConfirmEmail-label');
         const validator = library('form')[0];
         const validityState = await validator.validate();
-        // //validityState
         expect(validityState).toEqual(false);
-        // //realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        //render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Equalto error message');
     });
 
diff --git a/packages/validate/__tests__/integration/api/validate/length.js b/packages/validate/__tests__/jest/api/validate/length.js
similarity index 92%
rename from packages/validate/__tests__/integration/api/validate/length.js
rename to packages/validate/__tests__/jest/api/validate/length.js
index 1aaacc85..ba8d164f 100644
--- a/packages/validate/__tests__/integration/api/validate/length.js
+++ b/packages/validate/__tests__/jest/api/validate/length.js
@@ -18,15 +18,11 @@ describe('Validate > Integration >  api > validate > length', () => {
                 type="text" />
         </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Length error message');
     });
 
diff --git a/packages/validate/__tests__/integration/api/validate/max.js b/packages/validate/__tests__/jest/api/validate/max.js
similarity index 91%
rename from packages/validate/__tests__/integration/api/validate/max.js
rename to packages/validate/__tests__/jest/api/validate/max.js
index 6fa66d67..b0026e55 100644
--- a/packages/validate/__tests__/integration/api/validate/max.js
+++ b/packages/validate/__tests__/jest/api/validate/max.js
@@ -16,15 +16,11 @@ describe('Validate > Integration > api > validate > max', () => {
             type="number">
         </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.max({ max: 2 }));
     });
 
@@ -42,15 +38,11 @@ describe('Validate > Integration > api > validate > max', () => {
                 type="number">
             </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Max error message');
     });
 
diff --git a/packages/validate/__tests__/integration/api/validate/maxlength.js b/packages/validate/__tests__/jest/api/validate/maxlength.js
similarity index 91%
rename from packages/validate/__tests__/integration/api/validate/maxlength.js
rename to packages/validate/__tests__/jest/api/validate/maxlength.js
index e42e5a45..e7798a53 100644
--- a/packages/validate/__tests__/integration/api/validate/maxlength.js
+++ b/packages/validate/__tests__/jest/api/validate/maxlength.js
@@ -16,15 +16,11 @@ describe('Validate > Integration > api > validate > maxlength', () => {
 			type="text">
         </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.maxlength({ max: 5 }));
     });
 
@@ -42,15 +38,11 @@ describe('Validate > Integration > api > validate > maxlength', () => {
                 type="text">
             </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Maxlength error message');
     });
 
diff --git a/packages/validate/__tests__/integration/api/validate/min.js b/packages/validate/__tests__/jest/api/validate/min.js
similarity index 94%
rename from packages/validate/__tests__/integration/api/validate/min.js
rename to packages/validate/__tests__/jest/api/validate/min.js
index 9fe5e42a..52f45072 100644
--- a/packages/validate/__tests__/integration/api/validate/min.js
+++ b/packages/validate/__tests__/jest/api/validate/min.js
@@ -19,11 +19,8 @@ describe('Validate > Integration > api > validate > min', () => {
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.min({ min: 2 }));
     });
 
@@ -44,11 +41,8 @@ describe('Validate > Integration > api > validate > min', () => {
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Min error message');
     });
 
diff --git a/packages/validate/__tests__/integration/api/validate/minlength.js b/packages/validate/__tests__/jest/api/validate/minlength.js
similarity index 91%
rename from packages/validate/__tests__/integration/api/validate/minlength.js
rename to packages/validate/__tests__/jest/api/validate/minlength.js
index 0f95ddca..af31bdcf 100644
--- a/packages/validate/__tests__/integration/api/validate/minlength.js
+++ b/packages/validate/__tests__/jest/api/validate/minlength.js
@@ -16,15 +16,11 @@ describe('Validate > Integration > api > validate > minlength', () => {
 			type="text">
         </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.minlength({ min: 3 }));
     });
 
@@ -42,15 +38,11 @@ describe('Validate > Integration > api > validate > minlength', () => {
                 type="text">
             </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Minlength error message');
     });
 
diff --git a/packages/validate/__tests__/integration/api/validate/number.js b/packages/validate/__tests__/jest/api/validate/number.js
similarity index 93%
rename from packages/validate/__tests__/integration/api/validate/number.js
rename to packages/validate/__tests__/jest/api/validate/number.js
index 18a7924e..ee8d3fb7 100644
--- a/packages/validate/__tests__/integration/api/validate/number.js
+++ b/packages/validate/__tests__/jest/api/validate/number.js
@@ -31,15 +31,11 @@ describe('Validate > Integration > api > validate > number', () => {
                 type="text">
         </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Number error message');
     });
 
diff --git a/packages/validate/__tests__/integration/api/validate/range.js b/packages/validate/__tests__/jest/api/validate/range.js
similarity index 90%
rename from packages/validate/__tests__/integration/api/validate/range.js
rename to packages/validate/__tests__/jest/api/validate/range.js
index 7b2069f7..0ba02a0b 100644
--- a/packages/validate/__tests__/integration/api/validate/range.js
+++ b/packages/validate/__tests__/jest/api/validate/range.js
@@ -18,16 +18,11 @@ describe('Validate > Integration >  api > validate > equalto', () => {
                 type="text">
         </form>`;
         const input = document.querySelector('#group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        // //validityState
         expect(validityState).toEqual(false);
-        // //realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        //render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Range error message');
     });
 
@@ -63,16 +58,11 @@ describe('Validate > Integration >  api > validate > equalto', () => {
                 type="text">
         </form>`;
         const input = document.querySelector('#group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        // //validityState
         expect(validityState).toEqual(false);
-        // //realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        //render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Range error message');
     });
 
@@ -108,16 +98,11 @@ describe('Validate > Integration >  api > validate > equalto', () => {
                 type="text">
         </form>`;
         const input = document.querySelector('#group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        // //validityState
         expect(validityState).toEqual(false);
-        // //realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        //render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Range error message');
     });
 
diff --git a/packages/validate/__tests__/integration/api/validate/regex-pattern.js b/packages/validate/__tests__/jest/api/validate/regex-pattern.js
similarity index 91%
rename from packages/validate/__tests__/integration/api/validate/regex-pattern.js
rename to packages/validate/__tests__/jest/api/validate/regex-pattern.js
index 5479f288..3fb6a75d 100644
--- a/packages/validate/__tests__/integration/api/validate/regex-pattern.js
+++ b/packages/validate/__tests__/jest/api/validate/regex-pattern.js
@@ -15,15 +15,11 @@ describe('Validate > Integration > api > validate > regex/pattern', () => {
                 type="text">
         </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.pattern());
     });
 
@@ -41,15 +37,11 @@ describe('Validate > Integration > api > validate > regex/pattern', () => {
                 type="text">
             </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Regex error message');
     });
     
diff --git a/packages/validate/__tests__/integration/api/validate/remote.js b/packages/validate/__tests__/jest/api/validate/remote.js
similarity index 94%
rename from packages/validate/__tests__/integration/api/validate/remote.js
rename to packages/validate/__tests__/jest/api/validate/remote.js
index 30a59059..cc9b5046 100644
--- a/packages/validate/__tests__/integration/api/validate/remote.js
+++ b/packages/validate/__tests__/jest/api/validate/remote.js
@@ -38,11 +38,8 @@ describe('Validate > Integration > api > validate > remote', () => {
         
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Remote error message');
     });
 
@@ -70,11 +67,8 @@ describe('Validate > Integration > api > validate > remote', () => {
         
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Error message from API');
     });
     
@@ -108,11 +102,8 @@ describe('Validate > Integration > api > validate > remote', () => {
         
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Remote error message');
     });
 
diff --git a/packages/validate/__tests__/integration/api/validate/required.js b/packages/validate/__tests__/jest/api/validate/required.js
similarity index 91%
rename from packages/validate/__tests__/integration/api/validate/required.js
rename to packages/validate/__tests__/jest/api/validate/required.js
index 14c4b34c..cc3282de 100644
--- a/packages/validate/__tests__/integration/api/validate/required.js
+++ b/packages/validate/__tests__/jest/api/validate/required.js
@@ -23,16 +23,11 @@ describe('Validate > Integration > api > validate > required', () => {
                 type="text" />
         </form>`;
         const input = document.getElementById('group1-1');
-        const label = document.getElementById('group1-1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        // //validityState
         expect(validityState).toEqual(false);
-        // //realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        //render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.required());
     });
 
@@ -49,7 +44,6 @@ describe('Validate > Integration > api > validate > required', () => {
         </form>`;
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        // //validityState
         expect(validityState).toEqual(true);
     });
 
@@ -69,13 +63,9 @@ describe('Validate > Integration > api > validate > required', () => {
         const input = document.getElementById('group2');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        //validityState
         expect(validityState).toEqual(false);
-        //realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        //focus on firstinvalid node
         expect(document.activeElement).toEqual(input);
-        //render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Required error message');
         
     });
@@ -94,7 +84,6 @@ describe('Validate > Integration > api > validate > required', () => {
         </form>`;
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        // //validityState
         expect(validityState).toEqual(true);
     });
 });
diff --git a/packages/validate/__tests__/integration/api/validate/stringlength.js b/packages/validate/__tests__/jest/api/validate/stringlength.js
similarity index 92%
rename from packages/validate/__tests__/integration/api/validate/stringlength.js
rename to packages/validate/__tests__/jest/api/validate/stringlength.js
index 083f4971..1d9240f2 100644
--- a/packages/validate/__tests__/integration/api/validate/stringlength.js
+++ b/packages/validate/__tests__/jest/api/validate/stringlength.js
@@ -17,15 +17,11 @@ describe('Validate > Integration >  api > validate > stringlength', () => {
                 type="text" />
         </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
         expect(validityState).toEqual(false);
-        // realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // // focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        // // render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Stringlength error message');
     });
 
diff --git a/packages/validate/__tests__/integration/api/validate/url.js b/packages/validate/__tests__/jest/api/validate/url.js
similarity index 91%
rename from packages/validate/__tests__/integration/api/validate/url.js
rename to packages/validate/__tests__/jest/api/validate/url.js
index 300482de..94c93e27 100644
--- a/packages/validate/__tests__/integration/api/validate/url.js
+++ b/packages/validate/__tests__/jest/api/validate/url.js
@@ -17,16 +17,11 @@ describe('Validate > Integration >  api > validate > url', () => {
                 type="url" />
         </form>`;
         const input = document.getElementById('group1');
-        const label = document.getElementById('group1-label');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        // //validityState
         expect(validityState).toEqual(false);
-        // //realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        // //focus on first invalid node
         expect(document.activeElement).toEqual(input);
-        //render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual(defaults.messages.url());
     });
 
@@ -42,7 +37,6 @@ describe('Validate > Integration >  api > validate > url', () => {
         </form>`;
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        // //validityState
         expect(validityState).toEqual(true);
     });
 
@@ -62,13 +56,9 @@ describe('Validate > Integration >  api > validate > url', () => {
         const input = document.getElementById('group2');
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        //validityState
         expect(validityState).toEqual(false);
-        //realtimeValidation start
         expect(validator.getState().realTimeValidation).toEqual(true);
-        //focus on firstinvalid node
         expect(document.activeElement).toEqual(input);
-        //render error message
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Url error message');
         
     });
@@ -89,7 +79,6 @@ describe('Validate > Integration >  api > validate > url', () => {
         </form>`;
         const validator = validate('form')[0];
         const validityState = await validator.validate();
-        //validityState
         expect(validityState).toEqual(true);
         
     });
diff --git a/packages/validate/__tests__/jest/errors.js b/packages/validate/__tests__/jest/errors.js
index 57f68df8..ca4b94fe 100644
--- a/packages/validate/__tests__/jest/errors.js
+++ b/packages/validate/__tests__/jest/errors.js
@@ -5,7 +5,6 @@ import {
 } from '../../src/lib/dom';
 import { DOTNET_CLASSNAMES } from '../../src/lib/constants';
 
-//clearError
 describe('Validate > Unit > DOM > clearError', () => {
     
     it('should delete the errorNode for the group from state', async () => {
@@ -27,7 +26,6 @@ describe('Validate > Unit > DOM > clearError', () => {
                 group1: document.getElementById('test-error-node')
             }
         };
-        //all side effects to test
         clearError('group1')(mockState);
         expect(mockState.errors.group1).toBeUndefined();
     });
@@ -41,7 +39,6 @@ describe('Validate > Unit > DOM > clearError', () => {
                 <span id="test-server-error-node" data-valmsg-for="group1" class="${DOTNET_CLASSNAMES.ERROR}"></span>
             </div>
         </form>`;
-        //have to create a text node and append it to the serverError node to test fn this in isolation
         const errorNode = document.createTextNode('This field is required');
         const serverErrorNode = document.getElementById('test-server-error-node');
         serverErrorNode.appendChild(errorNode);
@@ -62,7 +59,6 @@ describe('Validate > Unit > DOM > clearError', () => {
     });
 });
 
-//clearErrors
 describe('Validate > Unit > DOM > clearErrors', () => {
     
     it('Should remove all errors from state for valid groups', async () => {
diff --git a/packages/validate/__tests__/jest/initialisation.js b/packages/validate/__tests__/jest/initialisation.js
index 998243ab..b7eb4b6e 100644
--- a/packages/validate/__tests__/jest/initialisation.js
+++ b/packages/validate/__tests__/jest/initialisation.js
@@ -4,7 +4,6 @@ import { getSelection } from '../../src/lib/validator/utils';
 
 let validators;
 const setUpDOM = () => {
-    // Set up our document body
     document.body.innerHTML = `<form class="form" method="post" action="">
         <label for="group1-1">Text (required, min 2 characters, max 8 characters)</label>
         <input id="group1-1" name="group1" data-val="true" data-val-length="Please enter between 2 and 8 characters" data-val-required="${defaults.messages.required()}" data-val-length-min="2" data-val-length-max="8" type="text">
diff --git a/packages/validate/__tests__/jest/methods.js b/packages/validate/__tests__/jest/methods.js
index 798a4c21..1c084d28 100644
--- a/packages/validate/__tests__/jest/methods.js
+++ b/packages/validate/__tests__/jest/methods.js
@@ -1,7 +1,6 @@
 import mock from 'xhr-mock';
 import Methods from '../../src/lib/validator/methods';
 
-//required
 describe('Validate > Unit > Validator > methods > required', () => {
 
     it('should return false for group containing a single empty field', () => {
@@ -36,10 +35,7 @@ describe('Validate > Unit > Validator > methods > required', () => {
 
 });
 
-
-//email
 describe('Validate > Unit > Validator > methods > email', () => {
-
     it('should return true for group with no value that is not required', () => {
         document.body.innerHTML = `<form><input type="email" name="field" id="field" value="" /></form>`;
         const group = {
@@ -69,10 +65,7 @@ describe('Validate > Unit > Validator > methods > email', () => {
 
 });
 
-
-//url
 describe('Validate > Unit > Validator > methods > url', () => {
-
     it('should return true for group with no value that is not required', () => {
         document.body.innerHTML = `<form><input type="url" name="field" id="field" value="" /></form>`;
         const group = {
@@ -102,9 +95,7 @@ describe('Validate > Unit > Validator > methods > url', () => {
     
 });
 
-//dateISO
 describe('Validate > Unit > Validator > methods > dateISO', () => {
-
     it('should return true for group with no value that is not required', () => {
         document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
         const group = {
@@ -134,9 +125,7 @@ describe('Validate > Unit > Validator > methods > dateISO', () => {
     
 });
 
-//number
 describe('Validate > Unit > Validator > methods > number', () => {
-
     it('should return true for group with no value that is not required', () => {
         document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
         const group = {
@@ -180,10 +169,7 @@ describe('Validate > Unit > Validator > methods > number', () => {
     
 });
 
-
-//digits
 describe('Validate > Unit > Validator > methods > digits', () => {
-
     it('should return true for group with no value that is not required', () => {
         document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
         const group = {
@@ -231,8 +217,6 @@ describe('Validate > Unit > Validator > methods > digits', () => {
     
 });
 
-
-//minlength
 describe('Validate > Unit > Validator > methods > minlength', () => {
 
     it('should return true for group with no value that is not required', () => {
@@ -279,9 +263,7 @@ describe('Validate > Unit > Validator > methods > minlength', () => {
     
 });
 
-//maxlength
 describe('Validate > Unit > Validator > methods > maxlength', () => {
-
     it('should return true for group with no value that is not required', () => {
         document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
         const group = {
@@ -326,9 +308,7 @@ describe('Validate > Unit > Validator > methods > maxlength', () => {
     
 });
 
-//equalto
 describe('Validate > Unit > Validator > methods > equalto', () => {
-
     it('should return true for groups with no value', () => {
         document.body.innerHTML = `<form>
             <input type="text" name="field1" id="field1" value="" />
@@ -382,8 +362,6 @@ describe('Validate > Unit > Validator > methods > equalto', () => {
     
 });
 
-
-//pattern
 describe('Validate > Unit > Validator > methods > pattern', () => {
 
     it('should return true for group with no value that is not required', () => {
@@ -430,8 +408,6 @@ describe('Validate > Unit > Validator > methods > pattern', () => {
     
 });
 
-
-//regex
 describe('Validate > Unit > Validator > methods > regex', () => {
 
     it('should return true for group with no value that is not required', () => {
@@ -478,9 +454,7 @@ describe('Validate > Unit > Validator > methods > regex', () => {
     
 });
 
-//min
 describe('Validate > Unit > Validator > methods > min', () => {
-
     it('should return true for group with no value that is not required', () => {
         document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
         const group = {
@@ -525,9 +499,7 @@ describe('Validate > Unit > Validator > methods > min', () => {
     
 });
 
-//max
 describe('Validate > Unit > Validator > methods > max', () => {
-
     it('should return true for group with no value that is not required', () => {
         document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
         const group = {
@@ -572,10 +544,7 @@ describe('Validate > Unit > Validator > methods > max', () => {
     
 });
 
-
-//stringlength
 describe('Validate > Unit > Validator > methods > stringlength', () => {
-
     it('should return true for group with no value that is not required', () => {
         document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
         const group = {
@@ -620,10 +589,7 @@ describe('Validate > Unit > Validator > methods > stringlength', () => {
     
 });
 
-
-//length
 describe('Validate > Unit > Validator > methods > length', () => {
-
     it('should return true for group with no value that is not required', () => {
         document.body.innerHTML = `<form><input type="text" name="field" id="field" value="" /></form>`;
         const group = {
@@ -682,10 +648,7 @@ describe('Validate > Unit > Validator > methods > length', () => {
     
 });
 
-
-//range
 describe('Validate > Unit > Validator > methods > range', () => {
-
     it('should return true for group with no value that is not required', () => {
         document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
         const group = {
@@ -744,16 +707,11 @@ describe('Validate > Unit > Validator > methods > range', () => {
     
 });
 
-
-//remote
 describe('Validate > Unit > Validator > methods > remote', () => {
-
     beforeEach(() => mock.setup());
-
     afterEach(() => mock.teardown());
 
     it('should return false for when the remote validation returns \'false\'', async () => {
-
         mock.post('/api/validate', {
             status: 201,
             body: 'false'
@@ -772,12 +730,10 @@ describe('Validate > Unit > Validator > methods > remote', () => {
     });
 
     it('should return false for when the remote validation returns "false"', async () => {
-
         mock.post('/api/validate', {
             status: 201,
             body: 'true'
         });
-
         document.body.innerHTML = `<form><input type="number" name="field" id="field" value="" /></form>`;
         const group = {
             validators: [],
@@ -789,11 +745,8 @@ describe('Validate > Unit > Validator > methods > remote', () => {
         const res = await Methods.remote(group, params);
         expect(res).toEqual('true');
     });
-
-
 });
 
-//custom
 describe('Validate > Unit > Validator > methods > custom', () => {
     const customValidator = (value, fields) => value === 'Contrived validator';
 
@@ -824,5 +777,4 @@ describe('Validate > Unit > Validator > methods > custom', () => {
         };
         expect(Methods.custom(customValidator, group)).toEqual(true);
     });
-
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/integration/plugins/date.js b/packages/validate/__tests__/jest/plugins/date.js
similarity index 100%
rename from packages/validate/__tests__/integration/plugins/date.js
rename to packages/validate/__tests__/jest/plugins/date.js
diff --git a/packages/validate/__tests__/integration/plugins/luhn.js b/packages/validate/__tests__/jest/plugins/luhn.js
similarity index 90%
rename from packages/validate/__tests__/integration/plugins/luhn.js
rename to packages/validate/__tests__/jest/plugins/luhn.js
index a4d10a31..dc611cae 100644
--- a/packages/validate/__tests__/integration/plugins/luhn.js
+++ b/packages/validate/__tests__/jest/plugins/luhn.js
@@ -109,15 +109,6 @@ describe('Validate > Integration > Plugins > Luhn', () => {
             const validityState = await validator.validate();
             expect(validityState).toEqual(true);
         }
-
-        // Alternative implementation of the test... 
-        // const validityStates = await Promise.all(Object.values(formats).map(format => async () => {
-        //     field.value = formats[format];
-        //     return await validator.validate();
-        // }));
-
-        // const aggregage = validityStates.reduce((acc, curr) => !curr ? false : acc, true);
-        // expect(aggregage).toEqual(true);
     });
 
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/jest/reducers.js b/packages/validate/__tests__/jest/reducers.js
index 44bbefee..22020a0e 100644
--- a/packages/validate/__tests__/jest/reducers.js
+++ b/packages/validate/__tests__/jest/reducers.js
@@ -1,7 +1,6 @@
 import { ACTIONS, GROUP_ATTRIBUTE } from '../../src/lib/constants';
 import Reducers from '../../src/lib/reducers';
 
-//set initial state
 describe('Validate > Unit > Reducers > Set initial state', () => {
     it('should compose a new object based on default empty state object and initial payload', async () => {
         expect.assertions(1);
@@ -23,7 +22,6 @@ describe('Validate > Unit > Reducers > Set initial state', () => {
     });
 });
 
-//clear errors
 describe('Validate > Unit > Reducers > Clear errors', () => {
     it('should compose a new object with each group Object containing an empty array of errorMessages and a true validity property', async () => {
         expect.assertions(1);
@@ -69,7 +67,6 @@ describe('Validate > Unit > Reducers > Clear errors', () => {
     });
 });
 
-//clear error
 describe('Validate > Unit > Reducers > Clear error', () => {
     it('should compose a new object with a group Object containing an empty array of errorMessages and a true validity property for a given group name', async () => {
         expect.assertions(1);
@@ -115,7 +112,6 @@ describe('Validate > Unit > Reducers > Clear error', () => {
     });
 });
 
-//add validation errors
 describe('Validate > Unit > Reducers > Add validation errors', () => {
     it('should compose a new object with group Objects containing an array of errorMessages and a false validity property', async () => {
         expect.assertions(1);
@@ -168,8 +164,6 @@ describe('Validate > Unit > Reducers > Add validation errors', () => {
     });
 });
 
-
-//add validation error
 describe('Validate > Unit > Reducers > Add validation error', () => {
     it('should compose a new Object updating one of the group Objects with an array of errorMessages and a false validity property', async () => {
         expect.assertions(1);
@@ -212,7 +206,6 @@ describe('Validate > Unit > Reducers > Add validation error', () => {
     });
 });
 
-//add validation method
 describe('Validate > Unit > Reducers > Add validation method', () => {
     it('should add a validator of type custom to an existing field group', async () => {
         expect.assertions(1);
@@ -341,11 +334,9 @@ describe('Validate > Unit > Reducers > Add validation method', () => {
     });
 });
 
-//Add group
 describe('Validate > Unit > Reducers > Add group', () => {
     it('should add a new validation group', async () => {
         expect.assertions(1);
-        // const validatorFn = (value, fields, param) => false;
         const state = {
             groups: {
                 group1: {
@@ -392,11 +383,9 @@ describe('Validate > Unit > Reducers > Add group', () => {
     });
 });
 
-//Remove group
 describe('Validate > Unit > Reducers > Remove group', () => {
     it('should remove a validation group', async () => {
         expect.assertions(1);
-        // const validatorFn = (value, fields, param) => false;
         const state = {
             groups: {
                 group1: {
diff --git a/packages/validate/__tests__/jest/reset.js b/packages/validate/__tests__/jest/reset.js
index 4145cd61..59fbd8a0 100644
--- a/packages/validate/__tests__/jest/reset.js
+++ b/packages/validate/__tests__/jest/reset.js
@@ -15,12 +15,10 @@ describe('Validate  > Reset', () => {
         </form>`;
        
         const [ validator ] = validate('.form');
-        //Validate and set errors in state and DOM
         await validator.validate();
         expect(validator.getState().groups.group1.valid).toEqual(false);
         expect(validator.getState().groups.group2.valid).toEqual(false);
 
-        //reset to remove errors from state and DOM
         validator.getState().form.dispatchEvent(new Event('reset'));
         expect(validator.getState().groups.group1.valid).toEqual(true);
         expect(validator.getState().groups.group2.valid).toEqual(true);
diff --git a/packages/validate/__tests__/jest/store.js b/packages/validate/__tests__/jest/store.js
index f54b4d43..b625aa61 100644
--- a/packages/validate/__tests__/jest/store.js
+++ b/packages/validate/__tests__/jest/store.js
@@ -5,7 +5,7 @@ let Store;
 beforeAll(() => {
     Store = createStore();
 });
-//createStore
+
 describe('Validate > Unit > Store > createStore', () => {
     it('should create a store object with update and get functions', async () => {
         expect.assertions(5);
@@ -17,7 +17,6 @@ describe('Validate > Unit > Store > createStore', () => {
     });
 });
 
-//getState
 describe('Validate > Unit > Store > getState', () => {
     it('should return the state object', async () => {
         expect.assertions(1);
@@ -25,7 +24,6 @@ describe('Validate > Unit > Store > getState', () => {
     });
 });
 
-//update
 describe('Validate > Unit > Store > update', () => {
     it('should update state using reducers and nextState payload', async () => {
         expect.assertions(1);
diff --git a/packages/validate/__tests__/jest/submit.js b/packages/validate/__tests__/jest/submit.js
index be97b8c3..eee7b4a0 100644
--- a/packages/validate/__tests__/jest/submit.js
+++ b/packages/validate/__tests__/jest/submit.js
@@ -1,7 +1,6 @@
 import validate from '../../src';
 
 describe('Validate > Integration > Submit', () => {
-
     it('should call the submit function if validation passes', async () => {
         expect.assertions(2);
         document.body.innerHTML = `<form method="post" action="">
@@ -19,5 +18,4 @@ describe('Validate > Integration > Submit', () => {
         expect(validator.getState().settings.submit).toEqual(submit);
         expect(submit).toBeCalled();
     });
-
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/jest/utils.js b/packages/validate/__tests__/jest/utils.js
index 4453f99f..eab3ad08 100644
--- a/packages/validate/__tests__/jest/utils.js
+++ b/packages/validate/__tests__/jest/utils.js
@@ -24,6 +24,7 @@ describe('Validate > Unit > Utils > isCheckable', () => {
         const field = document.getElementById('radio');
         expect(isCheckable(field)).toEqual(true);
     });
+
     it('should return true if the field is of type checkbox', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -32,6 +33,7 @@ describe('Validate > Unit > Utils > isCheckable', () => {
         const field = document.getElementById('checkbox');
         expect(isCheckable(field)).toEqual(true);
     });
+
     it('should return false if the field is not of type radio or checkbox', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -51,6 +53,7 @@ describe('Validate > Unit > Utils > isFile', () => {
         const field = document.getElementById('file');
         expect(isFile(field)).toEqual(true);
     });
+
     it('should return false if the field is not of type file', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -72,6 +75,7 @@ describe('Validate > Unit > Utils > isSelect', () => {
         const field = document.getElementById('select');
         expect(isSelect(field)).toEqual(true);
     });
+
     it('should return false if the field is not a select', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -91,6 +95,7 @@ describe('Validate > Unit > Utils > isSubmitButton', () => {
         const node = document.getElementById('btn');
         expect(isSubmitButton(node)).toEqual(true);
     });
+
     it('should return true if the node is a button', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -99,6 +104,7 @@ describe('Validate > Unit > Utils > isSubmitButton', () => {
         const node = document.getElementById('btn');
         expect(isSubmitButton(node)).toEqual(true);
     });
+
     it('should return false if the node is not a button and not of type submit', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -118,6 +124,7 @@ describe('Validate > Unit > Utils > hasNameValue', () => {
         const node = document.getElementById('field');
         expect(hasNameValue(node)).toEqual(true);
     });
+
     it('should return false if the node has no name attribute', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -126,6 +133,7 @@ describe('Validate > Unit > Utils > hasNameValue', () => {
         const node = document.getElementById('field');
         expect(hasNameValue(node)).toEqual(false);
     });
+
     it('should return false if the node has no value attribute', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -144,6 +152,7 @@ describe('Validate > Unit > Utils > isRequired', () => {
         };
         expect(isRequired(group)).toEqual(true);
     });
+
     it('should return false if the group does not contain a required validator', async () => {
         expect.assertions(1);
         const group = {
@@ -161,6 +170,7 @@ describe('Validate > Unit > Utils > isHidden', () => {
 
         expect(isHidden(field)).toEqual(true);
     });
+
     it('should return false if the field is not of type hidden', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<input name="fields" id="field-1" type="text" />`;
@@ -180,6 +190,7 @@ describe('Validate > Unit > Utils > hasValue', () => {
 
         expect(hasValue(field)).toEqual(true);
     });
+
     it('should return false if the field has an empty value', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -189,6 +200,7 @@ describe('Validate > Unit > Utils > hasValue', () => {
 
         expect(hasValue(field)).toEqual(false);
     });
+
     it('should return false if the field has no value attribute', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -200,7 +212,6 @@ describe('Validate > Unit > Utils > hasValue', () => {
     });
 });
 
-//groupValueReducer
 describe('Validate > Unit > Utils > groupValueReducer', () => {
     it('should return the String value given an input with a value', async () => {
         expect.assertions(1);
@@ -210,6 +221,7 @@ describe('Validate > Unit > Utils > groupValueReducer', () => {
         const field = document.querySelector('#field');
         expect(groupValueReducer('', field)).toEqual('Test value');
     });
+
     it('should trim String value given an input with a value whitespace', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -218,6 +230,7 @@ describe('Validate > Unit > Utils > groupValueReducer', () => {
         const field = document.querySelector('#field');
         expect(groupValueReducer('', field)).toEqual('Test value');
     });
+
     it('should return an empty String given an input without a value and an initial empty string', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -226,6 +239,7 @@ describe('Validate > Unit > Utils > groupValueReducer', () => {
         const field = document.querySelector('#field');
         expect(groupValueReducer('', field)).toEqual('');
     });
+
     it('should return an Array containing a String value given a checkable input with a value', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -234,6 +248,7 @@ describe('Validate > Unit > Utils > groupValueReducer', () => {
         const field = document.querySelector('#field');
         expect(groupValueReducer('', field)).toEqual(['Test value']);
     });
+
     it('should return an Array containing a String value given a checkable input with a value and an initial Array', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -242,6 +257,7 @@ describe('Validate > Unit > Utils > groupValueReducer', () => {
         const field = document.querySelector('#field');
         expect(groupValueReducer([], field)).toEqual(['Test value']);
     });
+    
     it('should return an empty String given a checkable input that is not checked and an initial empty string', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -252,7 +268,6 @@ describe('Validate > Unit > Utils > groupValueReducer', () => {
     });
 });
 
-// resolveGetParams
 describe('Validate > Unit > Utils > resolveGetParams', () => {
     it('should return a url param String name/value pair given an array containing a single array of a single input', async () => {
         expect.assertions(1);
@@ -262,6 +277,7 @@ describe('Validate > Unit > Utils > resolveGetParams', () => {
         const fields = [document.querySelector('#field')];
         expect(resolveGetParams([fields])).toEqual('field=Test');
     });
+
     it('should return a url param String name/value pair given an array containing multiple arrays of single inputs', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -272,6 +288,7 @@ describe('Validate > Unit > Utils > resolveGetParams', () => {
         const field2 = [document.querySelector('#field2')];
         expect(resolveGetParams([field1, field2])).toEqual('field1=One&field2=Two');
     });
+
     it('should return a uri-encoded url param String name/value pair given an array containing multiple arrays of single inputs', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -284,7 +301,6 @@ describe('Validate > Unit > Utils > resolveGetParams', () => {
     });
 });
 
-// domNodesFromCommaList
 describe('Validate > Unit > Utils > domNodesFromCommaList', () => {
     it('should return an array of arrays of nodes matching each name in a comma separated String', async () => {
         expect.assertions(1);
@@ -296,6 +312,7 @@ describe('Validate > Unit > Utils > domNodesFromCommaList', () => {
         const field2s = document.querySelector('#field2');
         expect(domNodesFromCommaList('field1,field2')).toEqual([[field1s], [field2s]]);
     });
+
     it('should return an array of empty arrays for a comma separated String that does not select any node name attributes', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -306,17 +323,12 @@ describe('Validate > Unit > Utils > domNodesFromCommaList', () => {
     });
 });
 
-// escapeAttributeValue
 describe('Validate > Unit > Utils > escapeAttributeValue', () => {
     it('should escape special characters matching /([!"#$%&\'()*+,./:;<=>?@[\\]^`{|}~] in a String', async () => {
         expect(escapeAttributeValue('<script>alert("Boo")</script>')).toEqual('\\<script\\>alert\\(\\"Boo\\"\\)\\<\\/script\\>');
     });
 });
 
-//getStatePrefix
-//appendStatePrefix
-
-//extractValueFromGroup // -> see groupValueReducer
 describe('Validate > Unit > Utils > extractValueFromGroup', () => {
     it('should return the String value given a group with a field array containing an input with a value', async () => {
         expect.assertions(1);
@@ -326,6 +338,7 @@ describe('Validate > Unit > Utils > extractValueFromGroup', () => {
         const group = { fields: [document.querySelector('#field')] };
         expect(extractValueFromGroup(group)).toEqual('Test value');
     });
+
     it('should return the String value given a field array containing an input with a value', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form>
@@ -336,10 +349,7 @@ describe('Validate > Unit > Utils > extractValueFromGroup', () => {
     });
 });
 
-//fetch
-
 describe('Validate > Unit > Utils > findErrors', () => {
-
     it('Should find serverErrorNodes and convert string error messages to DOM nodes', async () => {
         document.body.innerHTML = `<form class="form" method="post" action="">
             <label id="test-label" for="group1">Text</label>
@@ -356,5 +366,4 @@ describe('Validate > Unit > Utils > findErrors', () => {
         const errors = findErrors(groups);
         expect(errors.group1).toEqual(serverErrorNode.textContent);
     });
-
 });
\ No newline at end of file
diff --git a/packages/validate/__tests__/jest/validator.js b/packages/validate/__tests__/jest/validator.js
index 71611f40..87c42275 100644
--- a/packages/validate/__tests__/jest/validator.js
+++ b/packages/validate/__tests__/jest/validator.js
@@ -9,7 +9,6 @@ import {
 } from '../../src/lib/validator';
 import defaults from '../../src/lib/defaults';
 
-//resolveParam
 describe('Validate > Unit > Validator > resolveParam', () => {
     it('should return a param Object indexed by second part of param name and String value', async () => {
         expect.assertions(1);
@@ -27,6 +26,7 @@ describe('Validate > Unit > Validator > resolveParam', () => {
         const resolved = resolveParam(param, input);
         expect(resolved).toEqual({ min: '2' });
     });
+
     it('should return a param Object indexed by second part of param name, and an array of arrays of DOMNodes', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<input data-val="true" 
@@ -54,13 +54,12 @@ describe('Validate > Unit > Validator > resolveParam', () => {
     });
 });
 
-
-//extractParams
 describe('Validate > Unit > Validator > extractParams', () => {
     it('should return false when supplied an unknown .NET MVC adaptors/validation method', async () => {
         expect.assertions(1);
         expect(extractParams(null, 'unknown-adaptor')).toEqual(false);
     });
+
     it('should return an Object containing all parameters for matched adaptor/validation method on an input', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<input
@@ -79,7 +78,6 @@ describe('Validate > Unit > Validator > extractParams', () => {
     });
 });
 
-//extractDataValValidators
 describe('Validate > Unit > Validator > extractDataValValidators', () => {
     it('should return an empty array if a given node does not contain data-attributes defining known validators', async () => {
         expect.assertions(1);
@@ -110,7 +108,6 @@ describe('Validate > Unit > Validator > extractDataValValidators', () => {
     });
 });
 
-//extractAttrValidators
 describe('Validate > Unit > Validator > extractAttrValidators', () => {
     it('should return an empty array if a given node does not contain HTML5 constraint validation attributes', async () => {
         expect.assertions(1);
@@ -153,14 +150,6 @@ describe('Validate > Unit > Validator > extractAttrValidators', () => {
     });
 });
 
-//normaliseValidators --> see integration tests
-
-
-//validate --> see integration validate tests
-
-//assembleValidationGroup -> see integration assembleValidationGroup tests
-
-//extractErrorMessage
 describe('Validate > Unit > Validator > extractErrorMessage', () => {
     it('should return an error message given a validator containing a message', async () => {
         expect.assertions(1);
@@ -195,13 +184,6 @@ describe('Validate > Unit > Validator > extractErrorMessage', () => {
 
 });
 
-
-// To do
-// can do better here, factory > validate function in need of refactor
-//
-//extractErrorMessage
-
-
 describe('Validate > Unit > Validator > removeUnvalidatableGroups', () => {
     it('should remove groups that do not contain validators from the array of vaidationGroups', async () => {
         expect.assertions(1);
@@ -239,7 +221,6 @@ describe('Validate > Unit > Validator > removeUnvalidatableGroups', () => {
                 valid: false
             }
         });
-    
     });
 
     it('should remove groups with all hidden fields from the array of validationGroups', async () => {
@@ -263,13 +244,10 @@ describe('Validate > Unit > Validator > removeUnvalidatableGroups', () => {
                 valid: false
             }
         };
-
         expect(removeUnvalidatableGroups(groups)).toEqual({});
     });
-
 });
 
-//getInitialState
 describe('Validate > Unit > Validator > getInitialState', () => {
     it('should return a state object containing only groups that are validatable', async () => {
         expect.assertions(1);
@@ -283,7 +261,6 @@ describe('Validate > Unit > Validator > getInitialState', () => {
             name="group2"
             type="text"></form>`;
         const input1 = document.querySelector('#group1');
-        // const input2 = document.querySelector('#group2');
         const form = document.querySelector('form');
 
         expect(getInitialState(form, {})).toEqual({
@@ -301,6 +278,7 @@ describe('Validate > Unit > Validator > getInitialState', () => {
             }
         });
     });
+    
     it('should return a state object containing any settings passed to init', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form><input
diff --git a/packages/validate/__tests__/integration/validator/custom.js b/packages/validate/__tests__/jest/validator/custom.js
similarity index 97%
rename from packages/validate/__tests__/integration/validator/custom.js
rename to packages/validate/__tests__/jest/validator/custom.js
index c1581328..32385da5 100644
--- a/packages/validate/__tests__/integration/validator/custom.js
+++ b/packages/validate/__tests__/jest/validator/custom.js
@@ -1,4 +1,4 @@
-import { validate } from '../../../../src/lib/validator';
+import { validate } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > custom', () => {
 
diff --git a/packages/validate/__tests__/integration/validator/dateISO.js b/packages/validate/__tests__/jest/validator/dateISO.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/dateISO.js
rename to packages/validate/__tests__/jest/validator/dateISO.js
diff --git a/packages/validate/__tests__/integration/validator/digits.js b/packages/validate/__tests__/jest/validator/digits.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/digits.js
rename to packages/validate/__tests__/jest/validator/digits.js
diff --git a/packages/validate/__tests__/integration/validator/email.js b/packages/validate/__tests__/jest/validator/email.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/email.js
rename to packages/validate/__tests__/jest/validator/email.js
diff --git a/packages/validate/__tests__/integration/validator/equalto.js b/packages/validate/__tests__/jest/validator/equalto.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/equalto.js
rename to packages/validate/__tests__/jest/validator/equalto.js
diff --git a/packages/validate/__tests__/integration/validator/index.js b/packages/validate/__tests__/jest/validator/index.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/index.js
rename to packages/validate/__tests__/jest/validator/index.js
diff --git a/packages/validate/__tests__/integration/validator/isHidden.js b/packages/validate/__tests__/jest/validator/isHidden.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/isHidden.js
rename to packages/validate/__tests__/jest/validator/isHidden.js
diff --git a/packages/validate/__tests__/integration/validator/length.js b/packages/validate/__tests__/jest/validator/length.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/length.js
rename to packages/validate/__tests__/jest/validator/length.js
diff --git a/packages/validate/__tests__/integration/validator/max.js b/packages/validate/__tests__/jest/validator/max.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/max.js
rename to packages/validate/__tests__/jest/validator/max.js
diff --git a/packages/validate/__tests__/integration/validator/maxlength.js b/packages/validate/__tests__/jest/validator/maxlength.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/maxlength.js
rename to packages/validate/__tests__/jest/validator/maxlength.js
diff --git a/packages/validate/__tests__/integration/validator/min.js b/packages/validate/__tests__/jest/validator/min.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/min.js
rename to packages/validate/__tests__/jest/validator/min.js
diff --git a/packages/validate/__tests__/integration/validator/minlength.js b/packages/validate/__tests__/jest/validator/minlength.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/minlength.js
rename to packages/validate/__tests__/jest/validator/minlength.js
diff --git a/packages/validate/__tests__/integration/validator/number.js b/packages/validate/__tests__/jest/validator/number.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/number.js
rename to packages/validate/__tests__/jest/validator/number.js
diff --git a/packages/validate/__tests__/integration/validator/range.js b/packages/validate/__tests__/jest/validator/range.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/range.js
rename to packages/validate/__tests__/jest/validator/range.js
diff --git a/packages/validate/__tests__/integration/validator/regex-pattern.js b/packages/validate/__tests__/jest/validator/regex-pattern.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/regex-pattern.js
rename to packages/validate/__tests__/jest/validator/regex-pattern.js
diff --git a/packages/validate/__tests__/integration/validator/remote.js b/packages/validate/__tests__/jest/validator/remote.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/remote.js
rename to packages/validate/__tests__/jest/validator/remote.js
diff --git a/packages/validate/__tests__/integration/validator/required.js b/packages/validate/__tests__/jest/validator/required.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/required.js
rename to packages/validate/__tests__/jest/validator/required.js
diff --git a/packages/validate/__tests__/integration/validator/stringlength.js b/packages/validate/__tests__/jest/validator/stringlength.js
similarity index 100%
rename from packages/validate/__tests__/integration/validator/stringlength.js
rename to packages/validate/__tests__/jest/validator/stringlength.js
diff --git a/packages/validate/__tests__/integration/validator/url.js b/packages/validate/__tests__/jest/validator/url.js
similarity index 97%
rename from packages/validate/__tests__/integration/validator/url.js
rename to packages/validate/__tests__/jest/validator/url.js
index 8590d1f5..79418891 100644
--- a/packages/validate/__tests__/integration/validator/url.js
+++ b/packages/validate/__tests__/jest/validator/url.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > url', () => {
     //html5 spec regex approximation:
diff --git a/packages/validate/__tests__/playwright/accessibility.spec.js b/packages/validate/__tests__/playwright/accessibility.spec.js
index 5eac3694..3fc630a0 100644
--- a/packages/validate/__tests__/playwright/accessibility.spec.js
+++ b/packages/validate/__tests__/playwright/accessibility.spec.js
@@ -1,13 +1,8 @@
 const { test, expect } = require('@playwright/test');
 import AxeBuilder from '@axe-core/playwright';
 
-let tabKey;
-
-test.beforeEach(async ({ page }, testInfo) => {
+test.beforeEach(async ({ page }) => {
 	await page.goto('/');
-	tabKey = testInfo.project.use.defaultBrowserType === 'webkit'
-			? "Alt+Tab"
-			: "Tab";
 });
 
 test.describe('Validate > Accessibility > Axe', { tag: '@reduced'}, () => {
diff --git a/packages/validate/__tests__/playwright/errors.spec.js b/packages/validate/__tests__/playwright/errors.spec.js
index 3c7f7043..19bbf7fa 100644
--- a/packages/validate/__tests__/playwright/errors.spec.js
+++ b/packages/validate/__tests__/playwright/errors.spec.js
@@ -1,12 +1,8 @@
 const { test, expect } = require('@playwright/test');
 import { DOTNET_CLASSNAMES } from '../../src/lib/constants';
-let tabKey;
 
-test.beforeEach(async ({ page }, testInfo) => {
+test.beforeEach(async ({ page }) => {
 	await page.goto('/');
-	tabKey = testInfo.project.use.defaultBrowserType === 'webkit'
-			? "Alt+Tab"
-			: "Tab";
 });
 
 
diff --git a/packages/validate/__tests__/playwright/post-validation.spec.js b/packages/validate/__tests__/playwright/post-validation.spec.js
index 8b56bbfe..5e7cafda 100644
--- a/packages/validate/__tests__/playwright/post-validation.spec.js
+++ b/packages/validate/__tests__/playwright/post-validation.spec.js
@@ -1,9 +1,7 @@
 const { test, expect } = require("@playwright/test");
-let tabKey;
 
-test.beforeEach(async ({ page }, testInfo) => {
+test.beforeEach(async ({ page }) => {
 	await page.goto("/");
-	tabKey = testInfo.project.use.defaultBrowserType === "webkit" ? "Alt+Tab" : "Tab";
 });
 
 test.describe("Validate > Post-validation", { tag: "@all" }, () => {
diff --git a/packages/validate/__tests__/playwright/real-time.spec.js b/packages/validate/__tests__/playwright/real-time.spec.js
index 7bc4eceb..7a056cda 100644
--- a/packages/validate/__tests__/playwright/real-time.spec.js
+++ b/packages/validate/__tests__/playwright/real-time.spec.js
@@ -1,5 +1,4 @@
 const { test, expect } = require('@playwright/test');
-const exp = require('constants');
 
 test.describe('Validate > Realtime validation', { tag: '@all'}, () => {
 	test('Should start real-time validation after first form submission', async ({ page }) => {	

From 9e76e78196236b1cb5a81fe669bdc0ded9a963fa Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Mon, 29 Sep 2025 11:04:05 +0100
Subject: [PATCH 11/14] Path corrections

---
 .../__tests__/jest/api/validate/bypass-disabled.js  |  2 +-
 .../validate/__tests__/jest/api/validate/dateISO.js |  4 ++--
 .../validate/__tests__/jest/api/validate/digits.js  |  4 ++--
 .../validate/__tests__/jest/api/validate/email.js   |  6 +++---
 .../validate/__tests__/jest/api/validate/equalto.js |  6 +++---
 .../validate/__tests__/jest/api/validate/length.js  |  4 ++--
 .../validate/__tests__/jest/api/validate/max.js     |  6 +++---
 .../__tests__/jest/api/validate/maxlength.js        |  6 +++---
 .../validate/__tests__/jest/api/validate/min.js     |  6 +++---
 .../__tests__/jest/api/validate/minlength.js        |  6 +++---
 .../validate/__tests__/jest/api/validate/number.js  |  4 ++--
 .../validate/__tests__/jest/api/validate/range.js   |  4 ++--
 .../__tests__/jest/api/validate/regex-pattern.js    |  6 +++---
 .../validate/__tests__/jest/api/validate/remote.js  |  4 ++--
 .../__tests__/jest/api/validate/required.js         | 13 +++----------
 .../__tests__/jest/api/validate/stringlength.js     |  4 ++--
 .../validate/__tests__/jest/api/validate/url.js     |  8 +++-----
 .../__tests__/jest/normalise-validators/dateISO.js  |  2 +-
 .../__tests__/jest/normalise-validators/digits.js   |  2 +-
 .../__tests__/jest/normalise-validators/email.js    |  2 +-
 .../__tests__/jest/normalise-validators/equalto.js  |  2 +-
 .../__tests__/jest/normalise-validators/length.js   |  2 +-
 .../__tests__/jest/normalise-validators/max.js      |  2 +-
 .../jest/normalise-validators/maxlength.js          |  2 +-
 .../__tests__/jest/normalise-validators/min.js      |  2 +-
 .../jest/normalise-validators/minlength.js          |  2 +-
 .../__tests__/jest/normalise-validators/number.js   |  2 +-
 .../__tests__/jest/normalise-validators/range.js    |  2 +-
 .../jest/normalise-validators/regex-pattern.js      |  2 +-
 .../__tests__/jest/normalise-validators/remote.js   |  2 +-
 .../__tests__/jest/normalise-validators/required.js |  2 +-
 .../jest/normalise-validators/stringlength.js       |  2 +-
 .../__tests__/jest/normalise-validators/url.js      |  2 +-
 packages/validate/__tests__/jest/plugins/date.js    |  4 ++--
 packages/validate/__tests__/jest/plugins/luhn.js    |  4 ++--
 packages/validate/__tests__/jest/reset.js           |  2 +-
 .../validate/__tests__/jest/validator/dateISO.js    |  2 +-
 .../validate/__tests__/jest/validator/digits.js     |  2 +-
 packages/validate/__tests__/jest/validator/email.js |  2 +-
 .../validate/__tests__/jest/validator/equalto.js    |  2 +-
 packages/validate/__tests__/jest/validator/index.js |  2 +-
 .../validate/__tests__/jest/validator/isHidden.js   |  2 +-
 .../validate/__tests__/jest/validator/length.js     |  2 +-
 packages/validate/__tests__/jest/validator/max.js   |  2 +-
 .../validate/__tests__/jest/validator/maxlength.js  |  2 +-
 packages/validate/__tests__/jest/validator/min.js   |  2 +-
 .../validate/__tests__/jest/validator/minlength.js  |  2 +-
 .../validate/__tests__/jest/validator/number.js     |  2 +-
 packages/validate/__tests__/jest/validator/range.js |  2 +-
 .../__tests__/jest/validator/regex-pattern.js       |  2 +-
 .../validate/__tests__/jest/validator/remote.js     |  2 +-
 .../validate/__tests__/jest/validator/required.js   |  2 +-
 .../__tests__/jest/validator/stringlength.js        |  2 +-
 53 files changed, 80 insertions(+), 89 deletions(-)

diff --git a/packages/validate/__tests__/jest/api/validate/bypass-disabled.js b/packages/validate/__tests__/jest/api/validate/bypass-disabled.js
index 3676ddd6..8cf457d8 100644
--- a/packages/validate/__tests__/jest/api/validate/bypass-disabled.js
+++ b/packages/validate/__tests__/jest/api/validate/bypass-disabled.js
@@ -1,4 +1,4 @@
-import validate from '../../../../../src';
+import validate from '../../../../src';
 
 describe('Validate > Integration > api > validate > bypass disabled fields', () => {
 
diff --git a/packages/validate/__tests__/jest/api/validate/dateISO.js b/packages/validate/__tests__/jest/api/validate/dateISO.js
index 04abc1f4..11f5379b 100644
--- a/packages/validate/__tests__/jest/api/validate/dateISO.js
+++ b/packages/validate/__tests__/jest/api/validate/dateISO.js
@@ -1,5 +1,5 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
 
 describe('Validate > Integration >  api > validate > dateISO', () => {
     it('should validate a form based on the data-val dateISO validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
diff --git a/packages/validate/__tests__/jest/api/validate/digits.js b/packages/validate/__tests__/jest/api/validate/digits.js
index 5e200c07..2f78dabf 100644
--- a/packages/validate/__tests__/jest/api/validate/digits.js
+++ b/packages/validate/__tests__/jest/api/validate/digits.js
@@ -1,5 +1,5 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
 
 describe('Validate > Integration > api > validate > digits', () => {
     it('should validate a form based on the data-val digits validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
diff --git a/packages/validate/__tests__/jest/api/validate/email.js b/packages/validate/__tests__/jest/api/validate/email.js
index 3fd8079d..4536e7a4 100644
--- a/packages/validate/__tests__/jest/api/validate/email.js
+++ b/packages/validate/__tests__/jest/api/validate/email.js
@@ -1,6 +1,6 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
-import defaults from '../../../../../src/lib/defaults';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
+import defaults from '../../../../src/lib/defaults';
 
 describe('Validate > Integration >  api > validate > email', () => {
     it('should validate a form based on the HTML5 email validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
diff --git a/packages/validate/__tests__/jest/api/validate/equalto.js b/packages/validate/__tests__/jest/api/validate/equalto.js
index 018fa038..a75136fa 100644
--- a/packages/validate/__tests__/jest/api/validate/equalto.js
+++ b/packages/validate/__tests__/jest/api/validate/equalto.js
@@ -1,6 +1,6 @@
-import library from '../../../../../src';
-import { validate, assembleValidationGroup } from '../../../../../src/lib/validator';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import library from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
+import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
 
 describe('Validate > Integration >  api > validate > equalto', () => {
     
diff --git a/packages/validate/__tests__/jest/api/validate/length.js b/packages/validate/__tests__/jest/api/validate/length.js
index ba8d164f..cb958a70 100644
--- a/packages/validate/__tests__/jest/api/validate/length.js
+++ b/packages/validate/__tests__/jest/api/validate/length.js
@@ -1,5 +1,5 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
 
 describe('Validate > Integration >  api > validate > length', () => {
     
diff --git a/packages/validate/__tests__/jest/api/validate/max.js b/packages/validate/__tests__/jest/api/validate/max.js
index b0026e55..11a9d57e 100644
--- a/packages/validate/__tests__/jest/api/validate/max.js
+++ b/packages/validate/__tests__/jest/api/validate/max.js
@@ -1,6 +1,6 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
-import defaults from '../../../../../src/lib/defaults';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
+import defaults from '../../../../src/lib/defaults';
 
 describe('Validate > Integration > api > validate > max', () => {
     
diff --git a/packages/validate/__tests__/jest/api/validate/maxlength.js b/packages/validate/__tests__/jest/api/validate/maxlength.js
index e7798a53..13f9584d 100644
--- a/packages/validate/__tests__/jest/api/validate/maxlength.js
+++ b/packages/validate/__tests__/jest/api/validate/maxlength.js
@@ -1,6 +1,6 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
-import defaults from '../../../../../src/lib/defaults';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
+import defaults from '../../../../src/lib/defaults';
 
 describe('Validate > Integration > api > validate > maxlength', () => {
     
diff --git a/packages/validate/__tests__/jest/api/validate/min.js b/packages/validate/__tests__/jest/api/validate/min.js
index 52f45072..0a8049f5 100644
--- a/packages/validate/__tests__/jest/api/validate/min.js
+++ b/packages/validate/__tests__/jest/api/validate/min.js
@@ -1,6 +1,6 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
-import defaults from '../../../../../src/lib/defaults';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
+import defaults from '../../../../src/lib/defaults';
 
 describe('Validate > Integration > api > validate > min', () => {
     
diff --git a/packages/validate/__tests__/jest/api/validate/minlength.js b/packages/validate/__tests__/jest/api/validate/minlength.js
index af31bdcf..92980b38 100644
--- a/packages/validate/__tests__/jest/api/validate/minlength.js
+++ b/packages/validate/__tests__/jest/api/validate/minlength.js
@@ -1,6 +1,6 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
-import defaults from '../../../../../src/lib/defaults';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
+import defaults from '../../../../src/lib/defaults';
 
 describe('Validate > Integration > api > validate > minlength', () => {
     
diff --git a/packages/validate/__tests__/jest/api/validate/number.js b/packages/validate/__tests__/jest/api/validate/number.js
index ee8d3fb7..40607102 100644
--- a/packages/validate/__tests__/jest/api/validate/number.js
+++ b/packages/validate/__tests__/jest/api/validate/number.js
@@ -1,5 +1,5 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
 
 describe('Validate > Integration > api > validate > number', () => {
 
diff --git a/packages/validate/__tests__/jest/api/validate/range.js b/packages/validate/__tests__/jest/api/validate/range.js
index 0ba02a0b..b1aa321c 100644
--- a/packages/validate/__tests__/jest/api/validate/range.js
+++ b/packages/validate/__tests__/jest/api/validate/range.js
@@ -1,5 +1,5 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
 
 describe('Validate > Integration >  api > validate > equalto', () => {
     
diff --git a/packages/validate/__tests__/jest/api/validate/regex-pattern.js b/packages/validate/__tests__/jest/api/validate/regex-pattern.js
index 3fb6a75d..27c4507a 100644
--- a/packages/validate/__tests__/jest/api/validate/regex-pattern.js
+++ b/packages/validate/__tests__/jest/api/validate/regex-pattern.js
@@ -1,6 +1,6 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
-import defaults from '../../../../../src/lib/defaults';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
+import defaults from '../../../../src/lib/defaults';
 
 describe('Validate > Integration > api > validate > regex/pattern', () => {
     it('should validate a form based on the HTML5 pattern validator returning false, staring realTimeValidation, focusing on first invalid field, and rendering an error message if the value does not match', async () => {
diff --git a/packages/validate/__tests__/jest/api/validate/remote.js b/packages/validate/__tests__/jest/api/validate/remote.js
index cc9b5046..ba7cede4 100644
--- a/packages/validate/__tests__/jest/api/validate/remote.js
+++ b/packages/validate/__tests__/jest/api/validate/remote.js
@@ -1,6 +1,6 @@
 import mock from 'xhr-mock';
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
 
 describe('Validate > Integration > api > validate > remote', () => {
     
diff --git a/packages/validate/__tests__/jest/api/validate/required.js b/packages/validate/__tests__/jest/api/validate/required.js
index cc3282de..25754dfb 100644
--- a/packages/validate/__tests__/jest/api/validate/required.js
+++ b/packages/validate/__tests__/jest/api/validate/required.js
@@ -1,15 +1,8 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
-import defaults from '../../../../../src/lib/defaults';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
+import defaults from '../../../../src/lib/defaults';
 
 describe('Validate > Integration > api > validate > required', () => {
-    //return boolean validityState
-    //start realtimevalidation
-    //render errors
-    //focus on first invalid field
-
-    //return boolean validityState
-    //submit form
 
     it('should validate a form based on the HTML5 required validator returning false, starting realTimeValidation, focusing on first invalid field, and rendering an error message if a field is invalid', async () => {
         expect.assertions(4);
diff --git a/packages/validate/__tests__/jest/api/validate/stringlength.js b/packages/validate/__tests__/jest/api/validate/stringlength.js
index 1d9240f2..23ab653c 100644
--- a/packages/validate/__tests__/jest/api/validate/stringlength.js
+++ b/packages/validate/__tests__/jest/api/validate/stringlength.js
@@ -1,5 +1,5 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
 
 describe('Validate > Integration >  api > validate > stringlength', () => {
     
diff --git a/packages/validate/__tests__/jest/api/validate/url.js b/packages/validate/__tests__/jest/api/validate/url.js
index 94c93e27..f86efb81 100644
--- a/packages/validate/__tests__/jest/api/validate/url.js
+++ b/packages/validate/__tests__/jest/api/validate/url.js
@@ -1,6 +1,6 @@
-import validate from '../../../../../src';
-import { DOTNET_CLASSNAMES } from '../../../../../src/lib/constants';
-import defaults from '../../../../../src/lib/defaults';
+import validate from '../../../../src';
+import { DOTNET_CLASSNAMES } from '../../../../src/lib/constants';
+import defaults from '../../../../src/lib/defaults';
 
 describe('Validate > Integration >  api > validate > url', () => {
     //html5 spec regex approximation:
@@ -60,10 +60,8 @@ describe('Validate > Integration >  api > validate > url', () => {
         expect(validator.getState().realTimeValidation).toEqual(true);
         expect(document.activeElement).toEqual(input);
         expect(document.querySelector(`.${DOTNET_CLASSNAMES.ERROR}`).textContent).toEqual('Url error message');
-        
     });
 
-
     it('should validate a form based on the data-val url validator returning true if valid', async () => {
         expect.assertions(1);
         document.body.innerHTML = `<form class="form">
diff --git a/packages/validate/__tests__/jest/normalise-validators/dateISO.js b/packages/validate/__tests__/jest/normalise-validators/dateISO.js
index d0d7bc3d..17e98589 100644
--- a/packages/validate/__tests__/jest/normalise-validators/dateISO.js
+++ b/packages/validate/__tests__/jest/normalise-validators/dateISO.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > dateISO', () => {
     
diff --git a/packages/validate/__tests__/jest/normalise-validators/digits.js b/packages/validate/__tests__/jest/normalise-validators/digits.js
index 981df238..70d5618b 100644
--- a/packages/validate/__tests__/jest/normalise-validators/digits.js
+++ b/packages/validate/__tests__/jest/normalise-validators/digits.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > dateISO', () => {
     
diff --git a/packages/validate/__tests__/jest/normalise-validators/email.js b/packages/validate/__tests__/jest/normalise-validators/email.js
index 205efea8..1c034413 100644
--- a/packages/validate/__tests__/jest/normalise-validators/email.js
+++ b/packages/validate/__tests__/jest/normalise-validators/email.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > email', () => {
     
diff --git a/packages/validate/__tests__/jest/normalise-validators/equalto.js b/packages/validate/__tests__/jest/normalise-validators/equalto.js
index d0824845..89e18380 100644
--- a/packages/validate/__tests__/jest/normalise-validators/equalto.js
+++ b/packages/validate/__tests__/jest/normalise-validators/equalto.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-validators > equalto', () => {
 
diff --git a/packages/validate/__tests__/jest/normalise-validators/length.js b/packages/validate/__tests__/jest/normalise-validators/length.js
index ce63722d..67004d98 100644
--- a/packages/validate/__tests__/jest/normalise-validators/length.js
+++ b/packages/validate/__tests__/jest/normalise-validators/length.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > length', () => {
     
diff --git a/packages/validate/__tests__/jest/normalise-validators/max.js b/packages/validate/__tests__/jest/normalise-validators/max.js
index 386fe0d9..b4ce6bcc 100644
--- a/packages/validate/__tests__/jest/normalise-validators/max.js
+++ b/packages/validate/__tests__/jest/normalise-validators/max.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > max', () => {
 
diff --git a/packages/validate/__tests__/jest/normalise-validators/maxlength.js b/packages/validate/__tests__/jest/normalise-validators/maxlength.js
index de3b6bc8..227e2001 100644
--- a/packages/validate/__tests__/jest/normalise-validators/maxlength.js
+++ b/packages/validate/__tests__/jest/normalise-validators/maxlength.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > maxlength', () => {
     
diff --git a/packages/validate/__tests__/jest/normalise-validators/min.js b/packages/validate/__tests__/jest/normalise-validators/min.js
index 4501ad66..b89db5df 100644
--- a/packages/validate/__tests__/jest/normalise-validators/min.js
+++ b/packages/validate/__tests__/jest/normalise-validators/min.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > min', () => {
 
diff --git a/packages/validate/__tests__/jest/normalise-validators/minlength.js b/packages/validate/__tests__/jest/normalise-validators/minlength.js
index 6f5c259c..d8662739 100644
--- a/packages/validate/__tests__/jest/normalise-validators/minlength.js
+++ b/packages/validate/__tests__/jest/normalise-validators/minlength.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > minlength', () => {
     
diff --git a/packages/validate/__tests__/jest/normalise-validators/number.js b/packages/validate/__tests__/jest/normalise-validators/number.js
index 510ac863..c752c76a 100644
--- a/packages/validate/__tests__/jest/normalise-validators/number.js
+++ b/packages/validate/__tests__/jest/normalise-validators/number.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > number', () => {
 
diff --git a/packages/validate/__tests__/jest/normalise-validators/range.js b/packages/validate/__tests__/jest/normalise-validators/range.js
index b0383623..92b47099 100644
--- a/packages/validate/__tests__/jest/normalise-validators/range.js
+++ b/packages/validate/__tests__/jest/normalise-validators/range.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-validators > range', () => {
     
diff --git a/packages/validate/__tests__/jest/normalise-validators/regex-pattern.js b/packages/validate/__tests__/jest/normalise-validators/regex-pattern.js
index 342b2b09..8856f011 100644
--- a/packages/validate/__tests__/jest/normalise-validators/regex-pattern.js
+++ b/packages/validate/__tests__/jest/normalise-validators/regex-pattern.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-validators > regex/pattern ', () => {
     
diff --git a/packages/validate/__tests__/jest/normalise-validators/remote.js b/packages/validate/__tests__/jest/normalise-validators/remote.js
index c1ba9996..643c2607 100644
--- a/packages/validate/__tests__/jest/normalise-validators/remote.js
+++ b/packages/validate/__tests__/jest/normalise-validators/remote.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-validators > remote', () => {
     
diff --git a/packages/validate/__tests__/jest/normalise-validators/required.js b/packages/validate/__tests__/jest/normalise-validators/required.js
index 49c7f514..c2aae5bb 100644
--- a/packages/validate/__tests__/jest/normalise-validators/required.js
+++ b/packages/validate/__tests__/jest/normalise-validators/required.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-validators > required', () => {
     
diff --git a/packages/validate/__tests__/jest/normalise-validators/stringlength.js b/packages/validate/__tests__/jest/normalise-validators/stringlength.js
index e59bdb55..f1d99695 100644
--- a/packages/validate/__tests__/jest/normalise-validators/stringlength.js
+++ b/packages/validate/__tests__/jest/normalise-validators/stringlength.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-vaidators > stringlength', () => {
     
diff --git a/packages/validate/__tests__/jest/normalise-validators/url.js b/packages/validate/__tests__/jest/normalise-validators/url.js
index c39af7bf..d5f8fd0d 100644
--- a/packages/validate/__tests__/jest/normalise-validators/url.js
+++ b/packages/validate/__tests__/jest/normalise-validators/url.js
@@ -1,4 +1,4 @@
-import { normaliseValidators } from '../../../../src/lib/validator';
+import { normaliseValidators } from '../../../src/lib/validator';
 
 describe('Validate > Integration > normalise-validators > url', () => {
     it('should return the correct validation model for HTML5 url', async () => {
diff --git a/packages/validate/__tests__/jest/plugins/date.js b/packages/validate/__tests__/jest/plugins/date.js
index 11116ec5..0f8aff9a 100644
--- a/packages/validate/__tests__/jest/plugins/date.js
+++ b/packages/validate/__tests__/jest/plugins/date.js
@@ -1,5 +1,5 @@
-import validate from '../../../../src';
-import { isValidDate, isFutureDate, isPastDate } from '../../../../src/lib/plugins/methods/date';
+import validate from '../../../src';
+import { isValidDate, isFutureDate, isPastDate } from '../../../src/lib/plugins/methods/date';
 
 describe('Validate > Integration > Plugins > Valid Date', () => {
 
diff --git a/packages/validate/__tests__/jest/plugins/luhn.js b/packages/validate/__tests__/jest/plugins/luhn.js
index dc611cae..a0ac58fd 100644
--- a/packages/validate/__tests__/jest/plugins/luhn.js
+++ b/packages/validate/__tests__/jest/plugins/luhn.js
@@ -1,5 +1,5 @@
-import validate from '../../../../src';
-import luhn from '../../../../src/lib/plugins/methods/luhn';
+import validate from '../../../src';
+import luhn from '../../../src/lib/plugins/methods/luhn';
 
 describe('Validate > Integration > Plugins > Luhn', () => {
 
diff --git a/packages/validate/__tests__/jest/reset.js b/packages/validate/__tests__/jest/reset.js
index 59fbd8a0..383faf10 100644
--- a/packages/validate/__tests__/jest/reset.js
+++ b/packages/validate/__tests__/jest/reset.js
@@ -1,4 +1,4 @@
-import validate from '../../../../src';
+import validate from '../../src';
 
 describe('Validate  > Reset', () => {
 
diff --git a/packages/validate/__tests__/jest/validator/dateISO.js b/packages/validate/__tests__/jest/validator/dateISO.js
index 1f919065..a22dc78b 100644
--- a/packages/validate/__tests__/jest/validator/dateISO.js
+++ b/packages/validate/__tests__/jest/validator/dateISO.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > dateISO', () => {
 
diff --git a/packages/validate/__tests__/jest/validator/digits.js b/packages/validate/__tests__/jest/validator/digits.js
index 6bf45c23..87bbd471 100644
--- a/packages/validate/__tests__/jest/validator/digits.js
+++ b/packages/validate/__tests__/jest/validator/digits.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > digits', () => {
 
diff --git a/packages/validate/__tests__/jest/validator/email.js b/packages/validate/__tests__/jest/validator/email.js
index e27bc85b..54bcf2ae 100644
--- a/packages/validate/__tests__/jest/validator/email.js
+++ b/packages/validate/__tests__/jest/validator/email.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > email', () => {
     //html5 spec regex approximation:
diff --git a/packages/validate/__tests__/jest/validator/equalto.js b/packages/validate/__tests__/jest/validator/equalto.js
index e31a9897..f3138cb2 100644
--- a/packages/validate/__tests__/jest/validator/equalto.js
+++ b/packages/validate/__tests__/jest/validator/equalto.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > equalto', () => {
     
diff --git a/packages/validate/__tests__/jest/validator/index.js b/packages/validate/__tests__/jest/validator/index.js
index acab1ac7..7030ac19 100644
--- a/packages/validate/__tests__/jest/validator/index.js
+++ b/packages/validate/__tests__/jest/validator/index.js
@@ -1,4 +1,4 @@
-import { validate } from '../../../../src/lib/validator';
+import { validate } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > error handling', () => {
 
diff --git a/packages/validate/__tests__/jest/validator/isHidden.js b/packages/validate/__tests__/jest/validator/isHidden.js
index 0c3e86c9..c0e39043 100644
--- a/packages/validate/__tests__/jest/validator/isHidden.js
+++ b/packages/validate/__tests__/jest/validator/isHidden.js
@@ -1,4 +1,4 @@
-import { isFormValid, getValidityState, assembleValidationGroup } from '../../../../src/lib/validator';
+import { isFormValid, getValidityState, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > assembleValidationGroup > With hidden element', () => {
     it('should return the validation group minus hidden inputs', async () => {
diff --git a/packages/validate/__tests__/jest/validator/length.js b/packages/validate/__tests__/jest/validator/length.js
index 38af4d1f..a85bebe5 100644
--- a/packages/validate/__tests__/jest/validator/length.js
+++ b/packages/validate/__tests__/jest/validator/length.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > length', () => {
     
diff --git a/packages/validate/__tests__/jest/validator/max.js b/packages/validate/__tests__/jest/validator/max.js
index 639a14f5..0e693bc7 100644
--- a/packages/validate/__tests__/jest/validator/max.js
+++ b/packages/validate/__tests__/jest/validator/max.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > max', () => {
     
diff --git a/packages/validate/__tests__/jest/validator/maxlength.js b/packages/validate/__tests__/jest/validator/maxlength.js
index 33d7505e..cf6919da 100644
--- a/packages/validate/__tests__/jest/validator/maxlength.js
+++ b/packages/validate/__tests__/jest/validator/maxlength.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > maxlength', () => {
     
diff --git a/packages/validate/__tests__/jest/validator/min.js b/packages/validate/__tests__/jest/validator/min.js
index 92393186..ff240091 100644
--- a/packages/validate/__tests__/jest/validator/min.js
+++ b/packages/validate/__tests__/jest/validator/min.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > min', () => {
     
diff --git a/packages/validate/__tests__/jest/validator/minlength.js b/packages/validate/__tests__/jest/validator/minlength.js
index 6f444726..d2c98d5a 100644
--- a/packages/validate/__tests__/jest/validator/minlength.js
+++ b/packages/validate/__tests__/jest/validator/minlength.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > minlength', () => {
     
diff --git a/packages/validate/__tests__/jest/validator/number.js b/packages/validate/__tests__/jest/validator/number.js
index 3e2fc09f..a1a459cd 100644
--- a/packages/validate/__tests__/jest/validator/number.js
+++ b/packages/validate/__tests__/jest/validator/number.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > number', () => {
 
diff --git a/packages/validate/__tests__/jest/validator/range.js b/packages/validate/__tests__/jest/validator/range.js
index 46543931..0a97a565 100644
--- a/packages/validate/__tests__/jest/validator/range.js
+++ b/packages/validate/__tests__/jest/validator/range.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > range', () => {
     
diff --git a/packages/validate/__tests__/jest/validator/regex-pattern.js b/packages/validate/__tests__/jest/validator/regex-pattern.js
index 5eb4ff7b..b4910ea5 100644
--- a/packages/validate/__tests__/jest/validator/regex-pattern.js
+++ b/packages/validate/__tests__/jest/validator/regex-pattern.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > regex/pattern', () => {
     it('should return the validityState false for HTML5 pattern validator with non-matching value', async () => {
diff --git a/packages/validate/__tests__/jest/validator/remote.js b/packages/validate/__tests__/jest/validator/remote.js
index dffff81e..010222f9 100644
--- a/packages/validate/__tests__/jest/validator/remote.js
+++ b/packages/validate/__tests__/jest/validator/remote.js
@@ -1,5 +1,5 @@
 import mock from 'xhr-mock';
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > remote', () => {
     
diff --git a/packages/validate/__tests__/jest/validator/required.js b/packages/validate/__tests__/jest/validator/required.js
index 2a64b9d0..a8317375 100644
--- a/packages/validate/__tests__/jest/validator/required.js
+++ b/packages/validate/__tests__/jest/validator/required.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > assembleValidationGroup > required', () => {
     it('should return the validation group for HTML5 required validator', async () => {
diff --git a/packages/validate/__tests__/jest/validator/stringlength.js b/packages/validate/__tests__/jest/validator/stringlength.js
index 0ea3e4b6..0d30cdc4 100644
--- a/packages/validate/__tests__/jest/validator/stringlength.js
+++ b/packages/validate/__tests__/jest/validator/stringlength.js
@@ -1,4 +1,4 @@
-import { validate, assembleValidationGroup } from '../../../../src/lib/validator';
+import { validate, assembleValidationGroup } from '../../../src/lib/validator';
 
 describe('Validate > Integration > validator > stringlength', () => {
     

From 5f9b6e74865f3c2861f7fb3d4ff06d7e1311935b Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Mon, 29 Sep 2025 11:16:05 +0100
Subject: [PATCH 12/14] Add a post-validation ax test

---
 .../__tests__/playwright/accessibility.spec.js     | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/validate/__tests__/playwright/accessibility.spec.js b/packages/validate/__tests__/playwright/accessibility.spec.js
index 3fc630a0..9da718c7 100644
--- a/packages/validate/__tests__/playwright/accessibility.spec.js
+++ b/packages/validate/__tests__/playwright/accessibility.spec.js
@@ -7,7 +7,19 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('Validate > Accessibility > Axe', { tag: '@reduced'}, () => {
 	test('Should not have any automatically detectable accessibility issues', async ({ page }) => {	
-		const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); 
+		let accessibilityScanResults = await new AxeBuilder({ page }).analyze(); 
+		expect(accessibilityScanResults.violations).toEqual([]);
+
+		await page.click('#submitTest');
+		accessibilityScanResults = await new AxeBuilder({ page }).analyze(); 
+		expect(accessibilityScanResults.violations).toEqual([]);
+
+		await page.goto('/mini-no-server-errors.html');
+		accessibilityScanResults = await new AxeBuilder({ page }).analyze(); 
+		expect(accessibilityScanResults.violations).toEqual([]);
+
+		await page.click('#submitTest');
+		accessibilityScanResults = await new AxeBuilder({ page }).analyze(); 
 		expect(accessibilityScanResults.violations).toEqual([]);
 	});
 });

From cd42ffb951072278dd8079813308ff70647ad5e5 Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Mon, 29 Sep 2025 11:26:00 +0100
Subject: [PATCH 13/14] Update port number for github

---
 packages/validate/tools/playwright.webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/validate/tools/playwright.webpack.config.js b/packages/validate/tools/playwright.webpack.config.js
index 63aa6a3e..f1f51782 100644
--- a/packages/validate/tools/playwright.webpack.config.js
+++ b/packages/validate/tools/playwright.webpack.config.js
@@ -3,6 +3,6 @@ const baseConfig = require('./webpack.config');
 module.exports = {
     ...baseConfig,
     devServer: {
-        port: 8090
+        port: 8092
     }
 };

From eb37f85a345d1e91afb62e7f9ca1159ca2a972d5 Mon Sep 17 00:00:00 2001
From: Sarah Richards <sarah.richards@stormid.com>
Date: Mon, 29 Sep 2025 11:27:57 +0100
Subject: [PATCH 14/14] Add note on highest port number

---
 tools/playwright/config.base.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tools/playwright/config.base.js b/tools/playwright/config.base.js
index c9c41a3b..120edecb 100644
--- a/tools/playwright/config.base.js
+++ b/tools/playwright/config.base.js
@@ -1,5 +1,7 @@
 const { devices } = require('@playwright/test');
 
+// CURRENT MAX PORT NUMBER IN USE: 8092
+
 module.exports = {
   testDir: './__tests__/playwright',
   fullyParallel: true,