Support custom validation classes

vue-generators · Apr 15, 2017 · 378a2a7 · 378a2a7
1 parent 7ebd225
commit 378a2a7
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 11 deletions.
diff --git a/dist/vfg-core.js b/dist/vfg-core.js
diff --git a/dist/vfg.js b/dist/vfg.js
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
@@ -13,7 +13,7 @@ div
 					.buttons(v-if='buttonVisibility(field)')
 						button(v-for='btn in field.buttons', @click='btn.onclick(model, field)', :class='btn.classes') {{ btn.label }}
 				.hint(v-if='field.hint') {{ field.hint }}
-				.errors(v-if='fieldErrors(field).length > 0')
+				.errors.help-block(v-if='fieldErrors(field).length > 0')
 					span(v-for='(error, index) in fieldErrors(field)', track-by='index') {{ error }}
 </template>
 
@@ -55,7 +55,9 @@ div
 				default()  {
 					return {
 						validateAfterLoad: false,
-						validateAfterChanged: false
+						validateAfterChanged: false,
+						validationErrorClass: "error",
+						validationSuccessClass: "",
 					};
 				}
 			},
@@ -125,14 +127,26 @@ div
 		methods: {
 			// Get style classes of field
 			getFieldRowClasses(field) {
+				const hasErrors = this.fieldErrors(field).length > 0;
 				let baseClasses = {
-					error: this.fieldErrors(field).length > 0, 
+					error: hasErrors,
 					disabled: this.fieldDisabled(field), 
 					readonly: this.fieldReadonly(field), 
 					featured: this.fieldFeatured(field), 
 					required: this.fieldRequired(field)
 				};
 
+				let {validationErrorClass, validationSuccessClass} = this.options;
+				if (validationErrorClass && validationSuccessClass) {
+					if (hasErrors) {
+						baseClasses[validationErrorClass] = true;
+						baseClasses.error = false;
+					}
+					else {
+						baseClasses[validationSuccessClass] = true;
+					}
+				}
+
 				if (isArray(field.styleClasses)) {
 					each(field.styleClasses, (c) => baseClasses[c] = true);
 				}
@@ -252,7 +266,7 @@ div
 
 				each(this.$children, (child) => {
 					child.clearValidationErrors();
-				});				
+				});
 			},
 
 			modelUpdated(newVal, schema){
@@ -262,7 +276,7 @@ div
 			buttonVisibility(field) {
 				return field.buttons && field.buttons.length > 0;
 			},
-			
+
 			fieldErrors(field) {
 				let res = this.errors.filter(e => e.field == field);
 				return res.map(item => item.error);
@@ -349,7 +363,7 @@ div
 				left: 0;
 				position: absolute;
 				width: 100%;
-			}  
+			}
 
 			&:hover .helpText {
 				opacity: 1;

diff --git a/test/unit/specs/VueFormGenerator.spec.js b/test/unit/specs/VueFormGenerator.spec.js
@@ -116,6 +116,33 @@ describe("VueFormGenerator.vue", () => {
 			});
 		});		
 
+		describe("custom validation classes", () => {
+			before(() => {
+				let options = {
+					validationErrorClass: "has-error",
+					validationSuccessClass: "has-success",
+				};
+				createFormGenerator(schema, null, options);
+				group = el.querySelector(".form-group");
+			});
+
+			it("error class", (done) => {
+				vm.$refs.form.errors.push({field: vm.schema.fields[0], error: "Validation error!"});
+				vm.$nextTick(() => {
+					expect(group.classList.contains("has-error")).to.be.true;
+					done();
+				});
+			});
+
+			it("success class", (done) => {
+				vm.$refs.form.errors = [];
+				vm.$nextTick(() => {
+					expect(group.classList.contains("has-success")).to.be.true;
+					done();
+				});
+			});
+		});
+
 		it("should be add a custom classes", (done) => {
 			Vue.set(vm.schema.fields[0], "styleClasses", "classA");
 			vm.$nextTick(() => {