Do not run async validations if field is invalid by sync validity. Fixes #329

Author: davidkpiano

src/components/control-component.js

@@ -273,8 +273,22 @@ class Control extends Component {
       model,
     } = this.props;
 
+    // If there are no async validators,
+    // do not run async validation
     if (!asyncValidators) return false;
 
+    // If any sync validity is invalid,
+    // do not run async validation
+    const asyncValidatorKeys = Object.keys(asyncValidators);
+    const syncValid = Object.keys(fieldValue.validity).every((key) => {
+      // If validity is based on async validator, skip
+      if (!!~asyncValidatorKeys.indexOf(key)) return true;
+
+      return fieldValue.validity[key];
+    });
+
+    if (!syncValid) return false;
+
     return (dispatch) => {
       mapValues(asyncValidators,
         (validator, key) => dispatch(actions.asyncSetValidity(model,

test/control-component-spec.js

@@ -722,23 +722,23 @@ describe('Extended Control components', () => {
       test: modelReducer('test', {}),
     });
 
-    it('async validation should not override sync validity', () => {
-      const field = TestUtils.renderIntoDocument(
-        <Provider store={store}>
-          <Control.text
-            model="test.foo"
-            validators={{
-              required: (val) => val && val.length,
-            }}
-            asyncValidators={{
-              asyncValid: (_, asyncDone) => asyncDone(false),
-            }}
-          />
-        </Provider>
-      );
+    const field = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <Control.text
+          model="test.foo"
+          validators={{
+            required: (val) => val && val.length,
+          }}
+          asyncValidators={{
+            asyncValid: (_, asyncDone) => asyncDone(false),
+          }}
+        />
+      </Provider>
+    );
 
-      const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+    const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
 
+    it('async validation should not run when field is invalid', () => {
       input.value = '';
       TestUtils.Simulate.change(input);
       TestUtils.Simulate.blur(input);
@@ -747,6 +747,22 @@ describe('Extended Control components', () => {
         store.getState().testForm.foo.validity,
         {
           required: false,
+        });
+
+      assert.isUndefined(store.getState().testForm.foo.validity.asyncValid);
+    });
+
+    it('async validation should not override sync validity', () => {
+      input.value = 'asdf';
+      TestUtils.Simulate.change(input);
+      TestUtils.Simulate.blur(input);
+
+      assert.isDefined(store.getState().testForm.foo.validity.asyncValid);
+
+      assert.deepEqual(
+        store.getState().testForm.foo.validity,
+        {
+          required: true,
           asyncValid: false,
         });
     });

test/field-component-spec.js

@@ -941,25 +941,25 @@ Object.keys(testContexts).forEach((testKey) => {
         test: modelReducer('test', {}),
       }));
 
-      it('async validation should not override sync validity', () => {
-        const field = TestUtils.renderIntoDocument(
-          <Provider store={store}>
-            <Field
-              model="test.foo"
-              validators={{
-                required: (val) => val && val.length,
-              }}
-              asyncValidators={{
-                asyncValid: (_, asyncDone) => asyncDone(false),
-              }}
-            >
-              <input type="text" />
-            </Field>
-          </Provider>
-        );
+      const field = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Field
+            model="test.foo"
+            validators={{
+              required: (val) => val && val.length,
+            }}
+            asyncValidators={{
+              asyncValid: (_, asyncDone) => asyncDone(false),
+            }}
+          >
+            <input type="text" />
+          </Field>
+        </Provider>
+      );
 
-        const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+      const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
 
+      it('async validation should not run when field is invalid', () => {
         input.value = '';
         TestUtils.Simulate.change(input);
         TestUtils.Simulate.blur(input);
@@ -968,6 +968,22 @@ Object.keys(testContexts).forEach((testKey) => {
           store.getState().testForm.foo.validity,
           {
             required: false,
+          });
+
+        assert.isUndefined(store.getState().testForm.foo.validity.asyncValid);
+      });
+
+      it('async validation should not override sync validity', () => {
+        input.value = 'asdf';
+        TestUtils.Simulate.change(input);
+        TestUtils.Simulate.blur(input);
+
+        assert.isDefined(store.getState().testForm.foo.validity.asyncValid);
+
+        assert.deepEqual(
+          store.getState().testForm.foo.validity,
+          {
+            required: true,
             asyncValid: false,
           });
       });