Adding back erroneously deleted parts

Author: davidkpiano

src/components/control-component.js

@@ -271,8 +271,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

@@ -775,6 +775,17 @@ describe('Extended Control components', () => {
       test: modelReducer('test', { foo: '' }),
     });
 
+    TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <Control.text
+          model="test.foo"
+          validators={{
+            required: (val) => val && val.length,
+          }}
+        />
+      </Provider>
+    );
+
     it('should initially be invalid', () => {
       assert.deepEqual(
         store.getState().testForm.foo.validity,