On blur (#1)

* onBlur validation * Only validate when validateOffFocus is true * Rename validateOffFocus => validateAfterBlur * Make is possible to overwrite field validation * no message

Author: kevinkiel

src/fields/abstractField.js

@@ -162,16 +162,30 @@ export default {
 this.schema.onChanged.call(this, this.model, newValue, oldValue, this.schema);
 }
 
-if (objGet(this.formOptions, "validateAfterChanged", false) === true) {
-if (objGet(this.schema, "validateDebounceTime", objGet(this.formOptions, "validateDebounceTime", 0)) > 0) {
-this.debouncedValidate();
-} else {
-this.validate();
+if (
+(this.schema.validation && this.schema.validation === 'onBlur') ||
+(!this.schema.validation && objGet(this.formOptions, 'validateAfterBlur', false) === true)
+) {
+if (this.errors && this.errors[0]) {
+this.validateSchemaField()
 }
+} else if (
+(this.schema.validation && this.schema.validation === 'onChanged') ||
+(!this.schema.validation && objGet(this.formOptions, 'validateAfterChanged', false) === true)
+) {
+this.validateSchemaField()
 }
 }
 },
 
+validateSchemaField() {
+if (objGet(this.schema, "validateDebounceTime", objGet(this.formOptions, "validateDebounceTime", 0)) > 0) {
+this.debouncedValidate();
+} else {
+this.validate();
+}
+},
+
 clearValidationErrors() {
 this.errors.splice(0);
 },

src/fields/core/fieldInput.vue

@@ -135,10 +135,12 @@ export default {
 }
 this.value = value;
 },
-onBlur() {
+onBlur($event) {
 if (isFunction(this.debouncedFormatFunc)) {
 this.debouncedFormatFunc.flush();
 }
+
+this.$emit("blur", $event.target.value, this.schema.model);
 }
 },
 

src/fields/core/fieldTextArea.vue

@@ -4,6 +4,7 @@
 :id="getFieldID(schema)",
 :class="schema.fieldClasses",
 :disabled="disabled",
+@blur="onBlur",
 :maxlength="schema.max",
 :minlength="schema.min",
 :placeholder="schema.placeholder",
@@ -18,7 +19,12 @@
 import abstractField from "../abstractField";
 
 export default {
-mixins: [abstractField]
+mixins: [abstractField],
+methods: {
+onBlur($event) {
+this.$emit("blur", $event.target.value, this.schema.model);
+}
+}
 };
 </script>
 

src/formGenerator.vue

@@ -2,13 +2,13 @@
 div.vue-form-generator(v-if='schema != null')
 fieldset(v-if="schema.fields", :is='tag')
 template(v-for='field in fields')
-form-group(v-if='isVisible(field)', :vfg="vfg", :field="field", :errors="errors", :model="model", :options="options", @validated="onFieldValidated", @model-updated="onModelUpdated")
+form-group(v-if='isVisible(field)', :vfg="vfg", :field="field", :errors="errors", :model="model", :options="options", @blur="onBlur", @validated="onFieldValidated", @model-updated="onModelUpdated")
 
 template(v-for='group in groups')
 fieldset(v-if='isVisible(group)', :is='tag', :class='getFieldRowClasses(group)')
 legend(v-if='group.legend') {{ group.legend }}
 template(v-for='field in group.fields')
-form-group(v-if='isVisible(field)', :vfg="vfg", :field="field", :errors="errors", :model="model", :options="options", @validated="onFieldValidated", @model-updated="onModelUpdated")
+form-group(v-if='isVisible(field)', :vfg="vfg", :field="field", :errors="errors", :model="model", :options="options", @blur="onBlur", @validated="onFieldValidated", @model-updated="onModelUpdated")
 </template>
 
 <script>
@@ -130,6 +130,12 @@ export default {
 },
 
 methods: {
+onBlur(value, model) {
+if(objGet(this.options, "validateAfterBlur", false)) {
+this.validateModelField(model)
+}
+},
+
 // Get visible prop of field/group
 isVisible(option) {
 if (isFunction(option.visible)) return option.visible.call(this, this.model, option, this);
@@ -139,15 +145,21 @@ export default {
 return option.visible;
 },
 
+
 // Validating one or more model properties
 validateModelField(model) {
-this.clearValidationErrors();
-
 forEach(this.$children, child => {
 if (isFunction(child.validate)) {
 if (model.includes(child.field.model)) {
 child.validate(true).then(function (error) {
 if (error[0]) {
+// Remove old child errors
+Object.keys(this.errors)
+.filter((key) => {
+return this.errors[key].field.model === child.field.model
+})
+.forEach(key => delete this.errors[key]);
+
 this.errors.push({
 field: child.field,
 error: error[0]

src/formGroup.vue

@@ -9,7 +9,7 @@
 </label>
 
 <div class="field-wrap">
-<component ref="child" :is="getFieldType(field)" :vfg="vfg" :disabled="fieldDisabled(field)" :model="model" :schema="field" :formOptions="options" @model-updated="onModelUpdated" @validated="onFieldValidated"></component>
+<component ref="child" :is="getFieldType(field)" :vfg="vfg" :disabled="fieldDisabled(field)" :model="model" :schema="field" :formOptions="options" @blur="onBlurValidated" @model-updated="onModelUpdated" @validated="onFieldValidated"></component>
 <div v-if="buttonVisibility(field)" class="buttons">
 <button v-for="(btn, index) in field.buttons" @click="buttonClickHandler(btn, field, $event)" :class="btn.classes" :key="index" v-text="btn.label" :type="getButtonType(btn)"></button>
 </div>
@@ -123,6 +123,9 @@ export default {
 fieldErrors(field) {
 return this.errors.filter((e) => e.field === field).map((item) => item.error);
 },
+onBlurValidated(newVal, schema) {
+this.$emit("blur", newVal, schema);
+},
 onModelUpdated(newVal, schema) {
 this.$emit("model-updated", newVal, schema);
 },