only validate on an empty field if it is required (#27)

* only validate on an empty field if it is required * Adding additional test
justeat · Apr 27, 2018 · bc96a89 · bc96a89
1 parent dea4107
commit bc96a89
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,14 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 
+v0.18.0
+------------------------------
+*April 26, 2018*
+
+### Changed
+- Changed logic to only validate on an empty field if it is required
+
+
 v0.17.1
 ------------------------------
 *April 12, 2018*

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-validate",
   "description": "Fozzie vanilla JS Validation Component",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "main": "dist/index.js",
   "files": [
     "dist"

diff --git a/src/index.js b/src/index.js
@@ -158,8 +158,8 @@ export default class FormValidation {
         this.fields.forEach(field => {
 
             // currentElement refers to an element that is being validated on blur/keyup
-            // only validate on blur/keyup if the field is not empty
-            if (currentElement && (currentElement.field !== field || field.value === '')) {
+            // only validate on blur/keyup if the field is not empty and is not required
+            if (currentElement && (currentElement.field !== field || (field.value === '' && !testDefinitions.required.condition(field)))) {
                 return;
             }
 

diff --git a/test/__snapshots__/validateOn.test.js.snap b/test/__snapshots__/validateOn.test.js.snap
@@ -7,9 +7,9 @@ exports[`validateOn blur should not run validation on other fields 1`] = `
                                     </form>"
 `;
 
-exports[`validateOn blur should not validate if field is empty 1`] = `
+exports[`validateOn blur should not validate if field is empty and not required 1`] = `
 "<form novalidate=\\"\\" class=\\"has-success\\">
-                                        <input required=\\"\\">
+                                        <input minlength=\\"6\\">
                                     </form>"
 `;
 
@@ -73,15 +73,27 @@ exports[`validateOn blur should set form state to valid, as second select has no
                             </form>"
 `;
 
+exports[`validateOn blur should validate if field is empty 1`] = `
+"<form novalidate=\\"\\" class=\\"has-error\\">
+                                        <input required=\\"\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
+                                    </form>"
+`;
+
 exports[`validateOn blur should validate valid form 1`] = `
 "<form novalidate=\\"\\" class=\\"has-success\\">
                                         <input required=\\"\\" value=\\"x\\" class=\\"has-success\\">
                                     </form>"
 `;
 
-exports[`validateOn keyup should not validate if field is empty 1`] = `
+exports[`validateOn keyup should not validate if field is empty and not required 1`] = `
 "<form novalidate=\\"\\" class=\\"has-success\\">
-                                        <input required=\\"\\">
+                                        <input minlength=\\"6\\">
+                                    </form>"
+`;
+
+exports[`validateOn keyup should validate if field is empty 1`] = `
+"<form novalidate=\\"\\" class=\\"has-error\\">
+                                        <input required=\\"\\" class=\\"has-error\\"><p class=\\"form-error\\">This field is required.</p>
                                     </form>"
 `;
 

diff --git a/test/validateOn.test.js b/test/validateOn.test.js
@@ -25,7 +25,7 @@ describe('validateOn', () => {
 
     describe('blur', () => {
 
-        it('should not validate if field is empty', () => {
+        it('should validate if field is empty', () => {
 
             // Arrange
             TestUtils.setBodyHtml(`<form>
@@ -48,6 +48,29 @@ describe('validateOn', () => {
 
         });
 
+        it('should not validate if field is empty and not required', () => {
+
+            // Arrange
+            TestUtils.setBodyHtml(`<form>
+                                        <input minlength="6" />
+                                    </form>`);
+            const form = document.querySelector('form');
+            const input = form.querySelector('input');
+
+            // eslint-disable-next-line no-new
+            new FormValidation(form, {
+                validateOn: 'blur'
+            });
+
+            // Act
+            TestUtils.dispatchEvent(input, 'blur');
+
+            // Assert
+            const html = TestUtils.getBodyHtml();
+            expect(html).toMatchSnapshot();
+
+        });
+
         it('should validate valid form', () => {
 
             // Arrange
@@ -239,7 +262,7 @@ describe('validateOn', () => {
 
     describe('keyup', () => {
 
-        it('should not validate if field is empty', () => {
+        it('should validate if field is empty', () => {
 
             // Arrange
             TestUtils.setBodyHtml(`<form>
@@ -262,6 +285,30 @@ describe('validateOn', () => {
 
         });
 
+
+        it('should not validate if field is empty and not required', () => {
+
+            // Arrange
+            TestUtils.setBodyHtml(`<form>
+                                        <input minlength="6" />
+                                    </form>`);
+            const form = document.querySelector('form');
+            const input = form.querySelector('input');
+
+            // eslint-disable-next-line no-new
+            new FormValidation(form, {
+                validateOn: 'keyup'
+            });
+
+            // Act
+            TestUtils.dispatchEvent(input, 'keyup');
+
+            // Assert
+            const html = TestUtils.getBodyHtml();
+            expect(html).toMatchSnapshot();
+
+        });
+
         it('should validate valid form', () => {
 
             // Arrange