From 5a26ef1b4f4aaccd0c84137cd1edd7ecb0c8bce1 Mon Sep 17 00:00:00 2001
From: David Higgins <dhiggins@aimmedia.com>
Date: Thu, 14 Dec 2017 19:39:51 -0500
Subject: [PATCH 1/2] fixes #358 - support "validateBeforeSubmit" with async
 validators

* added `validateAsync` (default: false) form option
* added `isAsync` parameter to FormGenerator.validate()
* FormGenerator.validate() and AbstractField.validate() return Promise when `validateAsync` or `isAsync` is true
* renamed `click` handler to `onClick` in FieldSubmit
* added `onValidationError(model, schema, errors)` to FieldSubmit schema to handle validation errors
* added async validator support for FieldSupport
* changed `each` to `forEach` in various places, as "each" is an alias to "forEach" and "forEach" looks more explicit
* removed call to Vue.util.hyphenate as this is no longer supported by Vue, replaced with equivalent `String.replace` expression
* updated fieldSubmit.spec to add "valid form" and "invalid form" tests, valid forms will always call `onSubmit`, invalid forms will not call `onSubmit` (when validateBeforeSubmit = true)
* various code clean up
---
 src/fields/abstractField.js                | 77 ++++++++++++++--------
 src/fields/core/fieldSubmit.vue            | 30 +++++----
 src/formGenerator.vue                      | 74 +++++++++++++--------
 src/utils/validators.js                    |  3 +-
 test/unit/specs/VueFormGenerator.spec.js   | 15 ++---
 test/unit/specs/fields/fieldSubmit.spec.js | 53 ++++++++++-----
 test/unit/specs/util.js                    |  2 +-
 7 files changed, 159 insertions(+), 95 deletions(-)

diff --git a/src/fields/abstractField.js b/src/fields/abstractField.js
index 4752bfc6..cee32aab 100644
--- a/src/fields/abstractField.js
+++ b/src/fields/abstractField.js
@@ -1,4 +1,4 @@
-import { get as objGet, each, isFunction, isString, isArray, debounce } from "lodash";
+import { get as objGet, forEach, isFunction, isString, isArray, debounce } from "lodash";
 import validators from "../utils/validators";
 import { slugifyFormID } from "../utils/schema";
 
@@ -59,53 +59,72 @@ export default {
 
 	methods: {
 		validate(calledParent) {
+			// console.log('abstractField', 'validate', calledParent);
 			this.clearValidationErrors();
+			let validateAsync = objGet(this.formOptions, "validateAsync", false);
+
+			let results = [];
 
 			if (this.schema.validator && this.schema.readonly !== true && this.disabled !== true) {
 				let validators = [];
 				if (!isArray(this.schema.validator)) {
 					validators.push(convertValidator(this.schema.validator).bind(this));
 				} else {
-					each(this.schema.validator, (validator) => {
+					forEach(this.schema.validator, (validator) => {
 						validators.push(convertValidator(validator).bind(this));
 					});
 				}
 
-				each(validators, (validator) => {
-					let addErrors = err => {
-						if (isArray(err))
-							Array.prototype.push.apply(this.errors, err);
-						else if (isString(err))
-							this.errors.push(err);
-					};
-
-					let res = validator(this.value, this.schema, this.model);
-					if (res && isFunction(res.then)) {
-						// It is a Promise, async validator
-						res.then(err => {
-							if (err) {
-								addErrors(err);
+				forEach(validators, (validator) => {
+					if(validateAsync) {
+						results.push(validator(this.value, this.schema, this.model));
+					} else {
+						let result = validator(this.value, this.schema, this.model);
+						if(result && isFunction(result.then)) {
+							result.then((err) => {
+								if(err) {
+									this.errors = this.errors.concat(err);
+								}
 								let isValid = this.errors.length == 0;
 								this.$emit("validated", isValid, this.errors, this);
-							}
-						});
-					} else {
-						if (res)
-							addErrors(res);
+							});
+						} else if(result) {
+							results = results.concat(result);
+						}
 					}
 				});
-
 			}
 
-			if (isFunction(this.schema.onValidated)) {
-				this.schema.onValidated.call(this, this.model, this.errors, this.schema);
-			}
+			let handleErrors = (errors) => {
+				// console.log('abstractField', 'all', errors);
+				let fieldErrors = [];
+				forEach(errors, (err) => {
+					// console.log('abstractField', 'err', err);
+					if(isArray(err) && err.length > 0) {
+						fieldErrors = fieldErrors.concat(err);
+					} else if(isString(err)) {
+						fieldErrors.push(err);
+					}
+				});
+				// console.log('abstractField',  'fieldErrors', 'final', fieldErrors);
+				if (isFunction(this.schema.onValidated)) {
+					this.schema.onValidated.call(this, this.model, fieldErrors, this.schema);
+				}
 
-			let isValid = this.errors.length == 0;
-			if (!calledParent)
-				this.$emit("validated", isValid, this.errors, this);
+				let isValid = fieldErrors.length == 0;
+				if (!calledParent) {
+					this.$emit("validated", isValid, fieldErrors, this);
+				}
+				this.errors = fieldErrors;
+				// console.log('abstractField', 'this.errors', this.errors);
+				return fieldErrors;
+			};
+
+			if(!validateAsync) {
+				return handleErrors(results);
+			}
 
-			return this.errors;
+			return Promise.all(results).then(handleErrors);
 		},
 
 		debouncedValidate() {
diff --git a/src/fields/core/fieldSubmit.vue b/src/fields/core/fieldSubmit.vue
index 4bf975ee..346e983d 100644
--- a/src/fields/core/fieldSubmit.vue
+++ b/src/fields/core/fieldSubmit.vue
@@ -1,26 +1,34 @@
 <template lang="pug">
-	input(:id="getFieldID(schema)", type="submit", :value="schema.buttonText", @click="click", :name="schema.inputName", :disabled="disabled", :class="schema.fieldClasses")
+	input(:id="getFieldID(schema)", type="submit", :value="schema.buttonText", @click="onClick", :name="schema.inputName", :disabled="disabled", :class="schema.fieldClasses")
 </template>
 
 <script>
 	import abstractField from "../abstractField";
-	import { isFunction } from "lodash";
+	import { isFunction, isEmpty } from "lodash";
 
 	export default {
 		mixins: [ abstractField ],
 
 		methods: {
-			click() {
-				if (this.schema.validateBeforeSubmit === true)
-				{
-					if (!this.$parent.validate()) {
-						// There are validation errors. Stop the submit
-						return;
+			onClick($event) {
+				if (this.schema.validateBeforeSubmit === true) {
+					let errors = this.$parent.validate();
+					let handleErrors = (errors) => {
+						if(!isEmpty(errors) && isFunction(this.schema.onValidationError)) {
+							this.schema.onValidationError(this.model, this.schema, errors);
+						} else if (isFunction(this.schema.onSubmit)) {
+							this.schema.onSubmit(this.model, this.schema, $event);
+						}
+					};
+
+					if(errors && isFunction(errors.then)) {
+						errors.then(handleErrors);
+					} else {
+						handleErrors(errors);
 					}
+				} else if (isFunction(this.schema.onSubmit)) {
+					this.schema.onSubmit(this.model, this.schema, $event);
 				}
-
-				if (isFunction(this.schema.onSubmit))
-					this.schema.onSubmit(this.model, this.schema);
 			}
 		}
 	};
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
index cfc79fc6..3c6ada75 100644
--- a/src/formGenerator.vue
+++ b/src/formGenerator.vue
@@ -37,7 +37,7 @@ div.vue-form-generator(v-if='schema != null')
 
 <script>
 	// import Vue from "vue";
-	import {each, isFunction, isNil, isArray, isString} from "lodash";
+	import { get as objGet, forEach, isFunction, isNil, isArray, isString } from "lodash";
 	import { slugifyFormID } from "./utils/schema";
 
 	// Load all fields from '../fields' folder
@@ -45,7 +45,7 @@ div.vue-form-generator(v-if='schema != null')
 
 	let coreFields = require.context("./fields/core", false, /^\.\/field([\w-_]+)\.vue$/);
 
-	each(coreFields.keys(), (key) => {
+	forEach(coreFields.keys(), (key) => {
 		let compName = key.replace(/^\.\//, "").replace(/\.vue/, "");
 		fieldComponents[compName] = coreFields(key);
 	});
@@ -53,7 +53,7 @@ div.vue-form-generator(v-if='schema != null')
 	if (process.env.FULL_BUNDLE) {  // eslint-disable-line
 		let Fields = require.context("./fields/optional", false, /^\.\/field([\w-_]+)\.vue$/);
 
-		each(Fields.keys(), (key) => {
+		forEach(Fields.keys(), (key) => {
 			let compName = key.replace(/^\.\//, "").replace(/\.vue/, "");
 			fieldComponents[compName] = Fields(key);
 		});
@@ -74,9 +74,10 @@ div.vue-form-generator(v-if='schema != null')
 				default()  {
 					return {
 						validateAfterLoad: false,
+						validateAsync: false,
 						validateAfterChanged: false,
 						validationErrorClass: "error",
-						validationSuccessClass: "",
+						validationSuccessClass: ""
 					};
 				}
 			},
@@ -110,7 +111,7 @@ div.vue-form-generator(v-if='schema != null')
 			fields() {
 				let res = [];
 				if (this.schema && this.schema.fields) {
-					each(this.schema.fields, (field) => {
+					forEach(this.schema.fields, (field) => {
 						if (!this.multiple || field.multi === true)
 							res.push(field);
 					});
@@ -121,7 +122,7 @@ div.vue-form-generator(v-if='schema != null')
 			groups() {
 				let res = [];
 				if (this.schema && this.schema.groups) {
-					each(this.schema.groups, (group) => {
+					forEach(this.schema.groups, (group) => {
 						res.push(group);
 					});
 				}
@@ -139,10 +140,11 @@ div.vue-form-generator(v-if='schema != null')
 				if (newModel != null) {
 					this.$nextTick(() => {
 						// Model changed!
-						if (this.options.validateAfterLoad === true && this.isNewModel !== true)
+						if (this.options.validateAfterLoad === true && this.isNewModel !== true) {
 							this.validate();
-						else
+						} else {
 							this.clearValidationErrors();
+						}
 					});
 				}
 			}
@@ -152,7 +154,7 @@ div.vue-form-generator(v-if='schema != null')
 			this.$nextTick(() => {
 				if (this.model) {
 					// First load, running validation if neccessary
-					if (this.options.validateAfterLoad === true && this.isNewModel !== true){
+					if (this.options.validateAfterLoad === true && this.isNewModel !== true) {
 						this.validate();
 					} else {
 						this.clearValidationErrors();
@@ -185,7 +187,7 @@ div.vue-form-generator(v-if='schema != null')
 				}
 
 				if (isArray(field.styleClasses)) {
-					each(field.styleClasses, (c) => baseClasses[c] = true);
+					forEach(field.styleClasses, (c) => baseClasses[c] = true);
 				}
 				else if (isString(field.styleClasses)) {
 					baseClasses[field.styleClasses] = true;
@@ -298,7 +300,7 @@ div.vue-form-generator(v-if='schema != null')
 
 				if (!res && errors && errors.length > 0) {
 					// Add errors with this field
-					errors.forEach((err) => {
+					forEach(errors, (err) => {
 						this.errors.push({
 							field: field.schema,
 							error: err
@@ -311,32 +313,52 @@ div.vue-form-generator(v-if='schema != null')
 			},
 
 			// Validating the model properties
-			validate() {
+			validate(isAsync = null) {
+				if(isAsync === null) {
+					isAsync = objGet(this.options, "validateAsync", false);
+				}
 				this.clearValidationErrors();
 
-				this.$children.forEach((child) => {
-					if (isFunction(child.validate))
-					{
-						let errors = child.validate(true);
-						errors.forEach((err) => {
-							this.errors.push({
-								field: child.schema,
-								error: err
-							});
-						});
+				let fields = [];
+				let results = [];
+
+				forEach(this.$children, (child) => {
+					if (isFunction(child.validate)) {
+						fields.push(child); // keep track of validated children
+						results.push(child.validate(true));
 					}
 				});
 
-				let isValid = this.errors.length == 0;
-				this.$emit("validated", isValid, this.errors);
-				return isValid;
+				let handleErrors = (errors) => {
+					let formErrors = [];
+					forEach(errors, (err, i) => {
+						if(isArray(err) && err.length > 0) {
+							forEach(err, (error) => {
+								formErrors.push({
+									field: fields[i].schema,
+									error: error,
+								});
+							});
+						}
+					});
+					this.errors = formErrors;
+					let isValid = formErrors.length == 0;
+					this.$emit("validated", isValid, formErrors);
+					return isAsync ? formErrors : isValid;
+				};
+
+				if(!isAsync) {
+					return handleErrors(results);
+				}
+
+				return Promise.all(results).then(handleErrors);
 			},
 
 			// Clear validation errors
 			clearValidationErrors() {
 				this.errors.splice(0);
 
-				each(this.$children, (child) => {
+				forEach(this.$children, (child) => {
 					child.clearValidationErrors();
 				});
 			},
diff --git a/src/utils/validators.js b/src/utils/validators.js
index 6f47ad53..81c5bbad 100644
--- a/src/utils/validators.js
+++ b/src/utils/validators.js
@@ -117,8 +117,9 @@ const validators = {
 			if (!isNil(field.max) && value.length > field.max) {
 				err.push(msg(messages.textTooBig, value.length, field.max));
 			}
-		} else 
+		} else {
 			err.push(msg(messages.thisNotText));
+		}
 
 		return err;
 	},
diff --git a/test/unit/specs/VueFormGenerator.spec.js b/test/unit/specs/VueFormGenerator.spec.js
index 60aaa606..d6995882 100644
--- a/test/unit/specs/VueFormGenerator.spec.js
+++ b/test/unit/specs/VueFormGenerator.spec.js
@@ -878,8 +878,6 @@ describe("VueFormGenerator.vue", () => {
 
 			expect(form.errors).to.be.length(1);
 			expect(onValidated.callCount).to.be.equal(1);
-			// console.log(onValidated.getCall(0).args[1][0].field);
-			// console.log(schema.fields[0]);
 			expect(onValidated.calledWith(false, [{ field: schema.fields[0], error: "The length of text is too small! Current: 1, Minimum: 3"}] )).to.be.true;
 		});
 
@@ -992,8 +990,6 @@ describe("VueFormGenerator.vue", () => {
 
 			expect(form.errors).to.be.length(1);
 			expect(onValidated.callCount).to.be.equal(1);
-			// console.log(onValidated.getCall(0).args[1][0].field);
-			// console.log(schema.fields[0]);
 			expect(onValidated.calledWith(false, [{ field: schema.fields[0], error: "The length of text is too small! Current: 1, Minimum: 3"}] )).to.be.true;
 		});
 
@@ -1025,12 +1021,13 @@ describe("VueFormGenerator.vue", () => {
 					label: "Name",
 					model: "name",
 					validator(value) {
-						return new Promise(resolve => {
+						return new Promise( (resolve) => {
 							setTimeout(() => {
-								if (value.length >= 3)
+								if (value.length >= 3) {
 									resolve();
-								else
+								} else {
 									resolve([ "Invalid name" ]);
+								}
 							}, 50);
 						});
 					}
@@ -1073,7 +1070,7 @@ describe("VueFormGenerator.vue", () => {
 			});
 		});
 
-		it("should be validation error if model value is not valid", cb => {
+		it("should be validation error if model value is not valid", (done) => {
 			onValidated.reset();
 			vm.model.name = "A";
 			field.validate();
@@ -1082,7 +1079,7 @@ describe("VueFormGenerator.vue", () => {
 				expect(form.errors).to.be.length(1);
 				expect(onValidated.calledWith(false, [{ field: schema.fields[0], error: "Invalid name"}] )).to.be.true;
 
-				cb();
+				done();
 			}, 100);
 		});
 	});
diff --git a/test/unit/specs/fields/fieldSubmit.spec.js b/test/unit/specs/fields/fieldSubmit.spec.js
index 66069166..56e7b59f 100644
--- a/test/unit/specs/fields/fieldSubmit.spec.js
+++ b/test/unit/specs/fields/fieldSubmit.spec.js
@@ -41,27 +41,44 @@ describe("fieldSubmit.vue", function() {
 			expect(input.value).to.be.equal("Submit form");
 		});
 
-		it("should not call validate if validateBeforeSubmit is false", () => {
-			schema.onSubmit = sinon.spy();
-			let cb = sinon.spy();
-			field.$parent.validate = cb;
-
-			input.click();
-			expect(cb.called).to.be.false;
-			expect(schema.onSubmit.calledOnce).to.be.true;
-			expect(schema.onSubmit.calledWith(model, schema)).to.be.true;
-		});
+		describe("valid form", function() {
+			it("should not call validate if validateBeforeSubmit is false", () => {
+				schema.onSubmit = sinon.spy();
+				let cb = sinon.spy();
+				field.$parent.validate = cb;
+
+				input.click();
+				expect(cb.called).to.be.false;
+				expect(schema.onSubmit.calledOnce).to.be.true;
+				expect(schema.onSubmit.calledWith(model, schema)).to.be.true;
+			});
+
+
+			it("should call validate if validateBeforeSubmit is true", () => {
+				schema.validateBeforeSubmit = true;
+				schema.onSubmit = sinon.spy();
+				let cb = sinon.spy();
+				field.$parent.validate = cb;
 
+				input.click();
+				expect(cb.called).to.be.true;
+				expect(schema.onSubmit.called).to.be.true;
+			});
+		});
 
-		it("should call validate if validateBeforeSubmit is true", () => {
-			schema.validateBeforeSubmit = true;
-			schema.onSubmit = sinon.spy();
-			let cb = sinon.spy();
-			field.$parent.validate = cb;
+		describe("invalid form", function() {
+			it("should not call onSubmit if validateBeforeSubmit is true", () => {
+				schema.validateBeforeSubmit = true;
+				schema.onSubmit = sinon.spy();
+				let cb = sinon.spy(() => {
+					return ["an error occurred"];
+				});
+				field.$parent.validate = cb;
 
-			input.click();
-			expect(cb.called).to.be.true;
-			expect(schema.onSubmit.called).to.be.false;
+				input.click();
+				expect(cb.called).to.be.true;
+				expect(schema.onSubmit.called).to.be.true;
+			});
 		});
 
 		describe("check optional attribute", () => {
diff --git a/test/unit/specs/util.js b/test/unit/specs/util.js
index b75ccdab..227daaf7 100644
--- a/test/unit/specs/util.js
+++ b/test/unit/specs/util.js
@@ -21,7 +21,7 @@ export function trigger (el, event, args) {
 }
 
 export function createVueField(test, type, schema = {}, model = null, disabled = false, options) {
-	let elName = Vue.util.hyphenate(type);
+	let elName = type.replace(/([a-zA-Z])([A-Z])/g, "$1-$2").toLowerCase();
 
 	let container = document.createElement("div");		
 	container.className = "test-unit";

From e9bf2850b7a5f3b24c03e594854a858c4f2754ae Mon Sep 17 00:00:00 2001
From: David Higgins <dhiggins@aimmedia.com>
Date: Fri, 15 Dec 2017 11:02:56 -0500
Subject: [PATCH 2/2] removed commented out console.log statements

---
 src/fields/abstractField.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/fields/abstractField.js b/src/fields/abstractField.js
index cee32aab..879e7299 100644
--- a/src/fields/abstractField.js
+++ b/src/fields/abstractField.js
@@ -59,7 +59,6 @@ export default {
 
 	methods: {
 		validate(calledParent) {
-			// console.log('abstractField', 'validate', calledParent);
 			this.clearValidationErrors();
 			let validateAsync = objGet(this.formOptions, "validateAsync", false);
 
@@ -96,17 +95,14 @@ export default {
 			}
 
 			let handleErrors = (errors) => {
-				// console.log('abstractField', 'all', errors);
 				let fieldErrors = [];
 				forEach(errors, (err) => {
-					// console.log('abstractField', 'err', err);
 					if(isArray(err) && err.length > 0) {
 						fieldErrors = fieldErrors.concat(err);
 					} else if(isString(err)) {
 						fieldErrors.push(err);
 					}
 				});
-				// console.log('abstractField',  'fieldErrors', 'final', fieldErrors);
 				if (isFunction(this.schema.onValidated)) {
 					this.schema.onValidated.call(this, this.model, fieldErrors, this.schema);
 				}
@@ -116,7 +112,6 @@ export default {
 					this.$emit("validated", isValid, fieldErrors, this);
 				}
 				this.errors = fieldErrors;
-				// console.log('abstractField', 'this.errors', this.errors);
 				return fieldErrors;
 			};