Enhancement - validation now occurs on external changes. Fixes #183

Author: davidkpiano

src/components/control-component.js

@@ -1,7 +1,9 @@
 import { Component, createElement, PropTypes } from 'react';
 import connect from 'react-redux/lib/components/connect';
-
 import _get from 'lodash/get';
+import merge from 'lodash/merge';
+
+import { invertValidity, getFieldFromState, getValidity } from '../utils';
 import { sequenceEventActions } from '../utils/sequence';
 import actions from '../actions';
 
@@ -10,14 +12,19 @@ function mapStateToProps(state, props) {
   const modelString = typeof model === 'function'
     ? model(state)
     : model;
+  const fieldValue = getFieldFromState(state, modelString);
 
   if (!mapProps) {
-    return props;
+    return {
+      ...props,
+      fieldValue,
+    };
   }
 
   return mapProps({
     model,
     modelValue: _get(state, modelString),
+    fieldValue,
     ...props,
     ...controlProps,
     ...sequenceEventActions(props),
@@ -43,6 +50,22 @@ class Control extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    const {
+      modelValue,
+      fieldValue,
+      validateOn,
+    } = this.props;
+
+    if (fieldValue
+      && !fieldValue.validated
+      && modelValue !== prevProps.modelValue
+      && validateOn === 'change'
+    ) {
+      this.validate();
+    }
+  }
+
   handleKeyPress(event) {
     const { onSubmit } = this.props;
 
@@ -51,6 +74,27 @@ class Control extends Component {
     }
   }
 
+  validate() {
+    const {
+      model,
+      modelValue,
+      validators,
+      errors: errorValidators,
+      dispatch,
+    } = this.props;
+
+    const fieldValidity = getValidity(validators, modelValue);
+    const fieldErrors = getValidity(errorValidators, modelValue);
+
+    const errors = validators
+      ? merge(invertValidity(fieldValidity), fieldErrors)
+      : fieldErrors;
+
+    dispatch(actions.setErrors(model, errors));
+
+    return modelValue;
+  }
+
   render() {
     const { controlProps, component } = this.props;
 
@@ -65,15 +109,30 @@ class Control extends Component {
 }
 
 Control.propTypes = {
+  model: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string,
+  ]),
   control: PropTypes.any,
   onLoad: PropTypes.func,
   onSubmit: PropTypes.func,
   modelValue: PropTypes.any,
+  fieldValue: PropTypes.object,
   mapProps: PropTypes.func,
   changeAction: PropTypes.func,
   updateOn: PropTypes.string,
+  validateOn: PropTypes.string,
+  validators: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+  errors: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.object,
+  ]),
   controlProps: PropTypes.object,
   component: PropTypes.any,
+  dispatch: PropTypes.func,
 };
 
 Control.defaultProps = {

src/reducers/form-reducer.js

@@ -27,6 +27,7 @@ const initialFieldState = {
   untouched: true, // will be deprecated
   valid: true,
   validating: false,
+  validated: false,
   viewValue: null,
   array: false,
   validity: {},
@@ -152,6 +153,7 @@ function _createFormReducer(model, initialState) {
           dirty: true, // will be deprecated
           pristine: false,
           value: action.value,
+          validated: false,
         });
 
         if (action.removeKeys) {
@@ -268,6 +270,7 @@ function _createFormReducer(model, initialState) {
           errors,
           validity: action.validity,
           valid: isBoolean(errors) ? !errors : every(errors, error => !error),
+          validated: true,
         });
 
         return icepick.merge(formIsValidState, {
@@ -291,6 +294,7 @@ function _createFormReducer(model, initialState) {
           errors: action.errors,
           validity,
           valid: isValid(validity),
+          validated: true,
         });
 
         return icepick.merge(setErrorsState, {

test/field-component-spec.js

@@ -519,6 +519,7 @@ describe('<Field /> component', () => {
       test: modelReducer('test', {
         foo: '',
         blur: '',
+        external: '',
       }),
     }));
 
@@ -613,6 +614,38 @@ describe('<Field /> component', () => {
         }, 'should only validate upon blur');
     });
 
+    it('should validate on external change', () => {
+      let timesValidationCalled = 0;
+
+      TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Field
+            model="test.external"
+            validators={{
+              required: (val) => {
+                timesValidationCalled += 1;
+                return val && val.length;
+              },
+            }}
+          >
+            <input type="text" />
+          </Field>
+        </Provider>
+      );
+
+      assert.equal(timesValidationCalled, 1,
+        'validation called on load');
+
+      assert.isFalse(store.getState().testForm.fields.external.valid);
+
+      store.dispatch(actions.change('test.external', 'valid'));
+
+      assert.isTrue(store.getState().testForm.fields.external.valid);
+
+      assert.equal(timesValidationCalled, 2,
+        'validation called because of external change');
+    });
+
     it('should send the proper model value to the validators', () => {
       const field = TestUtils.renderIntoDocument(
         <Provider store={store}>