[2.3.1] Fixed form submission when async validation in progress

Author: isnifer

CHANGELOG.md

@@ -1,3 +1,17 @@
+## 2.3.1
+
+### Fixed
+
+- Form submission when async validate in progress
+
+How to test:
+
+1.  Open [Inline Validators Form](https://detools.github.io/vue-form/#/inline-validators-form)
+2.  Type `123456` => click `Submit`
+3.  You will get an async error — form won't submit
+4.  Type `github` => click `Submit`
+5.  Form will be submitted after async form validation
+
 ## 2.3.0
 
 ### Added

README.md

@@ -78,6 +78,7 @@ See demo at [https://detools.github.io/vue-form](https://detools.github.io/vue-f
 
 ## Changelog
 
+- [2.3.1](/CHANGELOG.md#231)
 - [2.3.0](/CHANGELOG.md#230)
 - [2.2.0](/CHANGELOG.md#220)
 - [2.1.0](/CHANGELOG.md#210)

VueForm/Form.vue

@@ -42,7 +42,10 @@ export default {
       default: noop,
     },
     handleModelChange: Function,
-    handleDisabled: Function,
+    handleDisabled: {
+      type: Function,
+      default: noop,
+    },
     handleReset: Function,
 
     validate: Function,
@@ -55,6 +58,7 @@ export default {
       state: {},
       syncErrors: {},
       asyncErrors: {},
+      asyncValidations: {},
       form: {
         submitting: false,
         validating: false,
@@ -120,10 +124,7 @@ export default {
 
       const setError = nextValue => {
         if (validators) {
-          const offValidating = this.manageValidatingState()
           const error = validate(validators, nextValue, name)
-          offValidating()
-
           const method = error ? vm.$set : vm.$delete
 
           method(vm.syncErrors, name, error)
@@ -137,12 +138,15 @@ export default {
 
       const setAsyncError = () => {
         if (!this.syncErrors[name] && asyncValidators) {
-          const offValidating = this.manageValidatingState()
+          const promise = asyncValidate(asyncValidators, this.state[name], name)
+          const off = this.manageValidatingState(name, promise)
 
-          return asyncValidate(asyncValidators, this.state[name], name)
+          promise
             .then(on.success)
             .catch(on.error)
-            .then(offValidating)
+            .then(off)
+
+          return promise
         }
 
         return Promise.resolve()
@@ -151,6 +155,11 @@ export default {
       const setValue = nextValue => {
         vm.$set(this.state, name, nextValue)
 
+        // When control value changes we need to clean async errors
+        if (this.asyncErrors[name]) {
+          vm.$delete(this.asyncErrors, name)
+        }
+
         if (this.handleModelChange) {
           this.handleModelChange(this.state)
         }
@@ -165,6 +174,7 @@ export default {
       const cleanFormValue = () => {
         vm.$delete(this.state, name)
         vm.$delete(this.syncErrors, name)
+        vm.$delete(this.asyncErrors, name)
       }
 
       return {
@@ -179,11 +189,13 @@ export default {
       }
     },
 
-    manageValidatingState() {
+    manageValidatingState(name, promise) {
       this.form.validating = true
+      this.$set(this.asyncValidations, name, promise)
 
       return () => {
         this.form.validating = false
+        this.$delete(this.asyncValidations, name)
       }
     },
 
@@ -195,15 +207,28 @@ export default {
       }
     },
 
+    handleFormDisabled(errors) {
+      this.handleDisabled(errors || { ...this.syncErrors, ...this.asyncErrors })
+    },
+
     nativeOnSubmit(event) {
       event.preventDefault()
 
+      // Just do not anything some form process in progress
+      if (this.form.submitting) {
+        return false
+      }
+
+      const isSubmitButtonClick = event.type === 'click'
+
+      // Form Level Sync Validate
       if (this.validate) {
         const syncErrors = this.validate(this.state)
 
         if (!isEmpty(syncErrors)) {
           this.syncErrors = syncErrors
-          return false
+
+          return this.handleFormDisabled(syncErrors)
         }
 
         this.syncErrors = {}
@@ -212,20 +237,29 @@ export default {
       // If Invalid
       // There is no SAVE BUTTON
       // There is a handleDisabled handler
-      if (!this.isValid && !this.save && this.handleDisabled) {
-        return this.handleDisabled({ ...this.syncErrors, ...this.asyncErrors })
+      if (!this.isValid && isSubmitButtonClick) {
+        return this.handleFormDisabled()
       }
 
       const messages = this.messages || {}
+
       const off = this.manageSubmittingState()
-      const submitPromise = Promise.resolve(
+      const submitForm = () => Promise.resolve(
         this.handleSubmit({ ...this.initialValues, ...this.state })
       )
 
+      const submitPromise = this.form.validating
+        ? Promise.all(Object.values(this.asyncValidations)).then(submitForm)
+        : submitForm()
+
       // Just subscribe to promise, do not catch errors
       submitPromise.then(
         () => Notification.success(messages.success),
-        () => Notification.error(messages.error)
+        () => {
+          Notification.error(messages.error)
+
+          this.handleFormDisabled()
+        }
       ).then(off)
 
       return submitPromise

docs/bundle.js

@@ -54,17 +54,17 @@
 }
 
 
-.buttons[data-v-ebfc5fc8] {
+.buttons[data-v-01bb0c7a] {
   display: flex;
   flex-direction: row;
   flex-wrap: no-wrap;
   justify-content: flex-start;
   align-items: flex-start;
 }
-.buttons_center[data-v-ebfc5fc8] {
+.buttons_center[data-v-01bb0c7a] {
   justify-content: center;
 }
-.buttons_end[data-v-ebfc5fc8] {
+.buttons_end[data-v-01bb0c7a] {
   justify-content: flex-end;
 }
 

docs/main.css

@@ -1,9 +1,10 @@
-import Form, { Input, validators } from '@detools/vue-form'
+import Form, { Input, Notification, validators } from '@detools/vue-form'
 
 export default {
   data() {
     return {
       formValues: {},
+      formErrors: {},
     }
   },
 
@@ -12,15 +13,41 @@ export default {
       this.formValues = values
     },
 
-    asyncValidator(value, name) {
+    handleReset() {
+      this.formValues = {}
+    },
+
+    handleDisabled(errors) {
+      Notification.warning('handleDisabled method has been called')
+
+      this.formErrors = errors
+    },
+
+    asyncValidator3000(value, name) {
       return new Promise((resolve, reject) => {
         setTimeout(() => {
           if (value === 'github') {
+            Notification.success(`${name} passed a validation (3s)`)
+            resolve()
+          } else {
+            Notification.error(`${name} did not pass a validation (3s)`)
+            reject(`${name} should be github`)
+          }
+        }, 3000)
+      })
+    },
+
+    asyncValidator5000(value, name) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          if (value) {
+            Notification.success(`${name} passed a validation (5s)`)
             resolve()
           } else {
-            reject(`${name} should be "github"`)
+            Notification.error(`${name} did not pass a validation (5s)`)
+            reject(`${name} is required`)
           }
-        }, 2000)
+        }, 5000)
       })
     },
   },
@@ -31,13 +58,25 @@ export default {
         <h1>Inline Validators Form</h1>
         <div class="wrapper">
           <div class="form">
-            <Form reset save submit handleSubmit={this.handleSubmit}>
+            <Form
+              reset
+              save
+              submit
+              handleSubmit={this.handleSubmit}
+              handleReset={this.handleReset}
+              handleDisabled={this.handleDisabled}>
               <Input
                 formItem
-                name="asyncUsername"
-                label="Username"
+                name="username"
+                label="Username with async validator for 3s"
                 validators={[validators.isRequired(), validators.length({ min: 6 })]}
-                asyncValidators={[this.asyncValidator]}
+                asyncValidators={[this.asyncValidator3000]}
+              />
+              <Input
+                formItem
+                name="anything"
+                label="Anything with async validator for 5s"
+                asyncValidators={[this.asyncValidator5000]}
               />
             </Form>
           </div>
@@ -48,6 +87,14 @@ export default {
             <div>
               <pre>{JSON.stringify(this.formValues, null, 2)}</pre>
             </div>
+            <br />
+            <br />
+            <strong>Form Errors</strong>
+            <br />
+            <br />
+            <div>
+              <pre>{JSON.stringify(this.formErrors, null, 2)}</pre>
+            </div>
           </div>
         </div>
       </div>

docs/vendors~main.bundle.js

@@ -1,6 +1,6 @@
 {
   "name": "@detools/vue-form",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Form State Management for VueJS",
   "main": "VueForm/index.js",
   "scripts": {