[2.2.0] Run asyncValidators only on blur event

Author: isnifer

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.2.0
+
+### Changed
+
+- `asyncValidators` will be called only on `blur` event
+- As before, they will be called only if there is no sync errors
+
 ## 2.1.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.2.0](/CHANGELOG.md#220)
 - [2.1.0](/CHANGELOG.md#210)
 - [2.0.0](/CHANGELOG.md#200)
 - [1.5.0](/CHANGELOG.md#150)

VueForm/ConnectedInput.js

@@ -78,7 +78,9 @@ export default {
     handleFieldBlur(...args) {
       this.touched = true
 
-      this.handleBlur(...args)
+      const onBlur = () => this.handleBlur(...args)
+
+      return this.setAsyncError().then(onBlur, onBlur)
     },
 
     renderInput(value, setValue) {

VueForm/Form.vue

@@ -4,7 +4,7 @@ import { Form, Button } from 'element-ui'
 import FormItem from './ConnectedFormItem'
 import Notification from './Notification'
 import CONSTANTS from './constants'
-import validate from './validators/validate'
+import { validate, asyncValidate } from './validators/validate'
 
 const BUTTONS_POSITION = {
   START: 'start',
@@ -43,6 +43,10 @@ export default {
     handleModelChange: Function,
     handleDisabled: Function,
     handleReset: Function,
+
+    validate: Function,
+    asyncValidate: Function,
+    asyncBlurFields: Array,
   },
 
   data() {
@@ -51,6 +55,7 @@ export default {
       errors: {},
       form: {
         submitting: false,
+        validating: false,
       },
     }
   },
@@ -81,35 +86,33 @@ export default {
       const value = !isNil(formLevelInitialValue) ? formLevelInitialValue : fieldLevelInitialValue
 
       const setError = nextValue => {
-        let validatorsPromise = Promise.resolve()
-        let syncError = false
-
-        const on = {
-          success: () => vm.$delete(vm.errors, name),
-          error: error => {
-            if (error) {
-              vm.$set(vm.errors, name, error)
-            }
-          },
-        }
-
         if (validators) {
-          validatorsPromise = validate(validators, nextValue, name)
-            .then(on.success)
-            .catch(error => {
-              on.error(error)
-              syncError = true
-            })
+          const offValidating = this.manageValidatingState()
+          const error = validate(validators, nextValue, name)
+          offValidating()
+
+          const method = error ? vm.$set : vm.$delete
+
+          method(vm.errors, name, error)
         }
+      }
+
+      const on = {
+        success: () => vm.$delete(vm.errors, name),
+        error: error => vm.$set(vm.errors, name, error),
+      }
 
-        if (asyncValidators) {
-          validatorsPromise
-            // Prevent async validation when we have sync errors
-            .then(() => syncError && Promise.reject())
-            .then(() => validate(asyncValidators, nextValue, name))
+      const setAsyncError = () => {
+        if (!this.errors[name] && asyncValidators) {
+          const offValidating = this.manageValidatingState()
+
+          return asyncValidate(asyncValidators, this.state[name], name)
             .then(on.success)
             .catch(on.error)
+            .then(offValidating)
         }
+
+        return Promise.resolve()
       }
 
       const setValue = nextValue => {
@@ -134,10 +137,19 @@ export default {
       return {
         cleanFormValue,
         setError,
+        setAsyncError,
         useState: () => [this.state[name], setValue, this.errors[name]],
       }
     },
 
+    manageValidatingState() {
+      this.form.validating = true
+
+      return () => {
+        this.form.validating = false
+      }
+    },
+
     manageSubmittingState() {
       this.form.submitting = true
 
@@ -158,12 +170,17 @@ export default {
 
       const messages = this.messages || {}
       const off = this.manageSubmittingState()
-      return Promise.resolve(this.handleSubmit({ ...this.initialValues, ...this.state }))
-        .then(
-          () => Notification.success(messages.success),
-          () => Notification.error(messages.error)
-        )
-        .then(off)
+      const submitPromise = Promise.resolve(
+        this.handleSubmit({ ...this.initialValues, ...this.state })
+      )
+
+      // Just subscribe to promise, do not catch errors
+      submitPromise.then(
+        () => Notification.success(messages.success),
+        () => Notification.error(messages.error)
+      ).then(off)
+
+      return submitPromise
     },
 
     nativeOnReset(event) {
@@ -202,23 +219,27 @@ export default {
         },
       ]
 
+      const { submitting, validating } = this.form
+      const disabled = submitting || validating
+      const submitDisabled = disabled || (!this.isValid && !this.handleDisabled)
+
       return (
         <div class={buttonsClassName}>
           {this.reset && (
-            <Button nativeType="reset" disabled={this.form.submitting}>
+            <Button nativeType="reset" disabled={disabled}>
               {buttons.reset}
             </Button>
           )}
           {this.save && (
-            <Button nativeType="submit" type="primary" disabled={this.form.submitting}>
+            <Button nativeType="submit" type="primary" disabled={disabled}>
               {buttons.save}
             </Button>
           )}
           {this.submit && (
             <Button
               type={this.save ? 'danger' : 'primary'}
               nativeType={!this.save ? 'submit' : undefined}
-              disabled={(!this.isValid && !this.handleDisabled) || this.form.submitting}
+              disabled={submitDisabled}
               on-click={this.nativeOnSubmit}>
               {buttons.submit}
             </Button>

VueForm/validators/validate.js

@@ -1,21 +1,31 @@
 import noop from 'lodash/noop'
 import invariant from 'invariant'
-import isPromise from '../utils/is-promise'
 
-export default function validate(validators, value, name) {
+export const validate = function validate(validators, value, name) {
   invariant(Array.isArray(validators), '"validate" accepts an array of validators')
 
-  return validators.reduce(
-    (sequence, validator = noop) =>
-      sequence.then(() => {
-        const result = validator(value, name)
+  let error
+  let i = 0
+  const { length } = validators
+
+  for (i; i < length; i += 1) {
+    const validator = validators[i] || noop
+    const errorString = validator(value, name)
 
-        if (isPromise(result)) {
-          return result
-        }
+    if (errorString) {
+      error = errorString
+      break
+    }
+  }
+
+  return error
+}
 
-        return result ? Promise.reject(result) : Promise.resolve()
-      }),
+export const asyncValidate = function asyncValidate(validators, value, name) {
+  invariant(Array.isArray(validators), '"validate" accepts an array of validators')
+
+  return validators.reduce(
+    (sequence, validator = noop) => sequence.then(() => validator(value, name)),
     Promise.resolve()
   )
 }

docs/bundle.js

@@ -12,17 +12,17 @@
 }
 
 
-.buttons[data-v-98b83d4a] {
+.buttons[data-v-929e2c82] {
   display: flex;
   flex-direction: row;
   flex-wrap: no-wrap;
   justify-content: flex-start;
   align-items: flex-start;
 }
-.buttons_center[data-v-98b83d4a] {
+.buttons_center[data-v-929e2c82] {
   justify-content: center;
 }
-.buttons_end[data-v-98b83d4a] {
+.buttons_end[data-v-929e2c82] {
   justify-content: flex-end;
 }
 

docs/main.css

@@ -1,6 +1,6 @@
 {
   "name": "@detools/vue-form",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Vue Form component on hooks",
   "main": "VueForm/index.js",
   "scripts": {