[2.3.0] Added Form Level Sync Validation

Author: isnifer

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 2.3.0
+
+### Added
+
+- Form level sync validation. [Demo](https://detools.github.io/vue-form/#/sync-validation-form)
+
 ## 2.2.0
 
 ### Changed

README.md

@@ -78,6 +78,7 @@ See demo at [https://detools.github.io/vue-form](https://detools.github.io/vue-f
 
 ## Changelog
 
+- [2.3.0](/CHANGELOG.md#230)
 - [2.2.0](/CHANGELOG.md#220)
 - [2.1.0](/CHANGELOG.md#210)
 - [2.0.0](/CHANGELOG.md#200)
@@ -94,7 +95,6 @@ See demo at [https://detools.github.io/vue-form](https://detools.github.io/vue-f
   - `<Upload />`
   - `<Rate />`
 - Add validation examples
-  - [Field level sync validation](https://detools.github.io/vue-form/#inline-validators-form)
-  - Form level sync validation
+  - [Field level sync validation](https://detools.github.io/vue-form/#/inline-validators-form)
+  - [Form level sync validation](https://detools.github.io/vue-form/#/sync-validation-form)
   - Field level async validation
-  - Form level async validation

VueForm/ConnectedInput.js

@@ -24,9 +24,7 @@ export default {
     autosize: Boolean,
     autocomplete: {
       type: String,
-
-      // Autocomplete === 'off' does not work in Chrome
-      default: () => 'nope',
+      default: 'off',
     },
     readonly: Boolean,
     max: Number,

VueForm/ConnectedSelect.js

@@ -36,9 +36,7 @@ export default {
 
     autocomplete: {
       type: String,
-
-      // Autocomplete === 'off' does not work in Chrome
-      default: () => 'nope',
+      default: 'off',
     },
 
     disabled: Boolean,

VueForm/Form.vue

@@ -1,10 +1,11 @@
 <script>
-import { isNil, isBoolean, has, mapValues, noop } from 'lodash'
+import { isNil, isBoolean, isEmpty, has, mapValues, noop } from 'lodash'
 import { Form, Button } from 'element-ui'
 import FormItem from './ConnectedFormItem'
 import Notification from './Notification'
 import CONSTANTS from './constants'
 import { validate, asyncValidate } from './validators/validate'
+import isValid from './utils/isValid'
 
 const BUTTONS_POSITION = {
   START: 'start',
@@ -52,7 +53,8 @@ export default {
   data() {
     return {
       state: {},
-      errors: {},
+      syncErrors: {},
+      asyncErrors: {},
       form: {
         submitting: false,
         validating: false,
@@ -73,7 +75,38 @@ export default {
 
   computed: {
     isValid() {
-      return !Object.values(this.errors).some(error => !isNil(error))
+      return isValid([this.syncErrors, this.asyncErrors])
+    },
+
+    isDisabled() {
+      const { submitting, validating } = this.form
+
+      return submitting || validating
+    },
+
+    isSubmitButtonDisabled() {
+      return this.isDisabled || !this.isValid
+    },
+
+    submitButtonType() {
+      return this.save ? 'danger' : 'primary'
+    },
+
+    buttons() {
+      return {
+        reset: isBoolean(this.reset) ? 'Reset' : this.reset,
+        save: isBoolean(this.save) ? 'Save' : this.save,
+        submit: isBoolean(this.submit) ? 'Submit' : this.submit,
+      }
+    },
+
+    buttonsClassName() {
+      return [
+        'buttons', {
+          buttons_center: this.buttonsPosition === BUTTONS_POSITION.CENTER,
+          buttons_end: this.buttonsPosition === BUTTONS_POSITION.END,
+        },
+      ]
     },
   },
 
@@ -93,17 +126,17 @@ export default {
 
           const method = error ? vm.$set : vm.$delete
 
-          method(vm.errors, name, error)
+          method(vm.syncErrors, name, error)
         }
       }
 
       const on = {
-        success: () => vm.$delete(vm.errors, name),
-        error: error => vm.$set(vm.errors, name, error),
+        success: () => vm.$delete(vm.asyncErrors, name),
+        error: error => vm.$set(vm.asyncErrors, name, error),
       }
 
       const setAsyncError = () => {
-        if (!this.errors[name] && asyncValidators) {
+        if (!this.syncErrors[name] && asyncValidators) {
           const offValidating = this.manageValidatingState()
 
           return asyncValidate(asyncValidators, this.state[name], name)
@@ -131,14 +164,18 @@ export default {
 
       const cleanFormValue = () => {
         vm.$delete(this.state, name)
-        vm.$delete(this.errors, name)
+        vm.$delete(this.syncErrors, name)
       }
 
       return {
         cleanFormValue,
         setError,
         setAsyncError,
-        useState: () => [this.state[name], setValue, this.errors[name]],
+        useState: () => [
+          this.state[name],
+          setValue,
+          this.syncErrors[name] || this.asyncErrors[name],
+        ],
       }
     },
 
@@ -161,11 +198,22 @@ export default {
     nativeOnSubmit(event) {
       event.preventDefault()
 
+      if (this.validate) {
+        const syncErrors = this.validate(this.state)
+
+        if (!isEmpty(syncErrors)) {
+          this.syncErrors = syncErrors
+          return false
+        }
+
+        this.syncErrors = {}
+      }
+
       // If Invalid
       // There is no SAVE BUTTON
       // There is a handleDisabled handler
       if (!this.isValid && !this.save && this.handleDisabled) {
-        return this.handleDisabled(this.errors)
+        return this.handleDisabled({ ...this.syncErrors, ...this.asyncErrors })
       }
 
       const messages = this.messages || {}
@@ -192,7 +240,8 @@ export default {
         const initialValue = this.initialValues[key]
 
         vm.$set(this.state, key, initialValue || (Array.isArray(value) ? [] : ''))
-        vm.$delete(this.errors, key)
+        vm.$delete(this.syncErrors, key)
+        vm.$delete(this.asyncErrors, key)
       })
 
       if (this.handleReset) {
@@ -202,46 +251,32 @@ export default {
 
     reinitializeValues(updatedInitialValues) {
       this.state = mapValues(this.state, (value, key) => updatedInitialValues[key])
-      this.errors = {}
+      this.syncErrors = {}
+      this.asyncErrors = {}
     },
 
     renderPlainButtons() {
-      const buttons = {
-        reset: isBoolean(this.reset) ? 'Reset' : this.reset,
-        save: isBoolean(this.save) ? 'Save' : this.save,
-        submit: isBoolean(this.submit) ? 'Submit' : this.submit,
-      }
-
-      const buttonsClassName = [
-        'buttons', {
-          buttons_center: this.buttonsPosition === BUTTONS_POSITION.CENTER,
-          buttons_end: this.buttonsPosition === BUTTONS_POSITION.END,
-        },
-      ]
-
-      const { submitting, validating } = this.form
-      const disabled = submitting || validating
-      const submitDisabled = disabled || (!this.isValid && !this.handleDisabled)
-
       return (
-        <div class={buttonsClassName}>
+        <div class={this.buttonsClassName}>
           {this.reset && (
-            <Button nativeType="reset" disabled={disabled}>
-              {buttons.reset}
+            <Button nativeType="reset" disabled={this.isDisabled}>
+              {this.buttons.reset}
             </Button>
           )}
           {this.save && (
-            <Button nativeType="submit" type="primary" disabled={disabled}>
-              {buttons.save}
+            <Button nativeType="submit" type="primary" disabled={this.isDisabled}>
+              {this.buttons.save}
             </Button>
           )}
           {this.submit && (
             <Button
-              type={this.save ? 'danger' : 'primary'}
+              class={[`el-button--${this.submitButtonType}`, {
+                'is-disabled': this.isSubmitButtonDisabled,
+              }]}
+              type={this.submitButtonType}
               nativeType={!this.save ? 'submit' : undefined}
-              disabled={submitDisabled}
               on-click={this.nativeOnSubmit}>
-              {buttons.submit}
+              {this.buttons.submit}
             </Button>
           )}
         </div>

VueForm/utils/isValid.js

@@ -0,0 +1,5 @@
+import isNil from 'lodash/isNil'
+
+export default function isValid(errorsArray) {
+  return !errorsArray.some(errors => Object.values(errors).some(error => !isNil(error)))
+}

docs/bundle.js

@@ -1,4 +1,46 @@
 
+.root-container[data-v-6dc3c25e] {
+  min-height: 100%;
+}
+.title[data-v-6dc3c25e] {
+  font-size: 40px;
+  margin: 10px 0 0;
+  font-weight: bold;
+}
+.main-container[data-v-6dc3c25e] {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+}
+.aside[data-v-6dc3c25e] {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+.main[data-v-6dc3c25e] {
+  padding: 10px 40px 40px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+.link[data-v-6dc3c25e] {
+  display: block;
+  line-height: 40px;
+  padding-left: 30px;
+  position: relative;
+  color: #0a0a0a;
+}
+.link_active[data-v-6dc3c25e]:before {
+  content: '\261B';
+  position: absolute;
+  display: block;
+  width: 10px;
+  height: 10px;
+  top: -3px;
+  left: 5px;
+  color: black;
+  font-size: 20px;
+}
+
+
 .is-vue-form-warn .el-form-item__error {
   color: #FF9800;
 }
@@ -12,74 +54,17 @@
 }
 
 
-.buttons[data-v-929e2c82] {
+.buttons[data-v-ebfc5fc8] {
   display: flex;
   flex-direction: row;
   flex-wrap: no-wrap;
   justify-content: flex-start;
   align-items: flex-start;
 }
-.buttons_center[data-v-929e2c82] {
+.buttons_center[data-v-ebfc5fc8] {
   justify-content: center;
 }
-.buttons_end[data-v-929e2c82] {
+.buttons_end[data-v-ebfc5fc8] {
   justify-content: flex-end;
 }
 
-
-.wrapper[data-v-5084746c] {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.form[data-v-5084746c] {
-  width: 750px;
-}
-.values[data-v-5084746c] {
-  width: 200px;
-}
-
-
-.wrapper[data-v-5e0e1c8c] {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.form[data-v-5e0e1c8c],
-.values[data-v-5e0e1c8c] {
-  width: 320px;
-}
-
-
-.wrapper[data-v-12049160] {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.form[data-v-12049160],
-.values[data-v-12049160] {
-  width: 320px;
-}
-
-
-.wrapper[data-v-08c02437] {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.form[data-v-08c02437],
-.values[data-v-08c02437] {
-  width: 320px;
-}
-
-
-.forms[data-v-fe917d3c] {
-  max-width: 1000px;
-  padding: 0 20px;
-}
-.divider[data-v-fe917d3c] {
-  height: 2px;
-  background-color: #757575;
-  margin: 50px 0;
-}
-