Validating form relative to fields pending validation in validateFields action. Fixes #395

Author: davidkpiano

src/actions/field-actions.js

@@ -160,6 +160,24 @@ const validateErrors = trackable((model, errorValidators) => (dispatch, getState
   dispatch(setValidity(model, errors, { errors: true }));
 });
 
+function isFormValidWithoutFields(form, fieldsValidity) {
+  if (Object.keys(form.validity).length && !isValid(form.validity)) {
+    return false;
+  }
+
+  // TODO: map through form keys without $form
+  const valid = Object.keys(form.fields)
+    .every((fieldKey) => {
+      if (fieldsValidity.hasOwnProperty(fieldKey)) {
+        return true;
+      }
+
+      return form.fields[fieldKey].valid;
+    });
+
+  return valid;
+}
+
 const validateFields = trackable((model, fieldValidators, options = {}) => (dispatch, getState) => {
   const value = _get(getState(), model);
 
@@ -179,7 +197,7 @@ const validateFields = trackable((model, fieldValidators, options = {}) => (disp
   if (validCB || invalidCB) {
     const form = getForm(getState(), model);
     const formValid = (form && !fieldsValidity.hasOwnProperty(''))
-      ? form.valid
+      ? isFormValidWithoutFields(form, fieldsValidity)
       : true;
     const fieldsValid = options.errors
       ? !isInvalid(fieldsValidity)

test/form-component-spec.js

@@ -1497,4 +1497,55 @@ describe('<Form> component', () => {
       assert.equal(timesTwoValidationCalled, 1);
     });
   });
+
+  describe('submitting after invalid', () => {
+    const store = createStore(combineReducers({
+      login: modelReducer('login', { username: '' }),
+      loginForm: formReducer('login', { username: '' }),
+    }), applyMiddleware(thunk));
+    let timesCalled = 0;
+    const handleSubmit = () => {
+      timesCalled++;
+    };
+    const form = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <Form
+          model="login"
+          onSubmit={handleSubmit}
+          validators={{ username: (val) => !!val }}
+          validateOn="submit"
+        >
+          <Field model="login.username">
+            <input />
+          </Field>
+        </Form>
+      </Provider>
+    );
+
+    const formNode = TestUtils.findRenderedDOMComponentWithTag(form, 'form');
+    const input = TestUtils.findRenderedDOMComponentWithTag(form, 'input');
+
+    it('should be invalid after initial submit', () => {
+      TestUtils.Simulate.submit(formNode);
+
+      assert.isFalse(store.getState().loginForm.valid);
+      assert.isFalse(store.getState().loginForm.fields.username.valid);
+    });
+
+    it('should submit after found to be valid', () => {
+      input.value = 'changed';
+
+      TestUtils.Simulate.change(input);
+
+      assert.isFalse(store.getState().loginForm.fields.username.valid,
+        'should not be valid yet');
+
+      TestUtils.Simulate.submit(formNode);
+
+      assert.isTrue(store.getState().loginForm.valid);
+      assert.isTrue(store.getState().loginForm.fields.username.valid);
+
+      assert.equal(timesCalled, 1);
+    });
+  });
 });