Only allow submission when no fields have validation errors

src/js/lib/form/component/formComponent.js

@@ -30,7 +30,7 @@ class FormComponent extends React.Component {
     static _getInitialState() {
         return {
             values: {},
-            errors: {}
+            validFields: {}
         };
     }
 
@@ -39,6 +39,30 @@ class FormComponent extends React.Component {
      */
     componentDidMount() {
         this._importInitialValuesStateFromChildFormElements();
+
+        this._disableSubmits();
+    }
+
+    /**
+     * @private
+     */
+    _disableSubmits() {
+        this._childrenInstances.forEach(child => {
+            if (child instanceof FormSubmitComponent) {
+                child.disable();
+            }
+        });
+    }
+
+    /**
+     * @private
+     */
+    _enableSubmits() {
+        this._childrenInstances.forEach(child => {
+            if (child instanceof FormSubmitComponent) {
+                child.enable();
+            }
+        });
     }
 
     /**
@@ -122,13 +146,45 @@ class FormComponent extends React.Component {
      */
     _onFieldInvalid(fieldIdentifier) {
         this._setFieldErrorState(fieldIdentifier, false);
+
+        this._resetSubmitStatus();
     }
 
     /**
      * @private
      */
     _onFieldValid(fieldIdentifier) {
         this._setFieldErrorState(fieldIdentifier, true);
+
+        this._resetSubmitStatus();
+    }
+
+    /**
+     * @private
+     */
+    _resetSubmitStatus() {
+        if (this._hasValidationErrors()) {
+            this._disableSubmits();
+        } else {
+            this._enableSubmits();
+        }
+    }
+
+    /**
+     * @returns {boolean}
+     *
+     * @private
+     */
+    _hasValidationErrors() {
+        for (var key in this.state.validFields) {
+            if (this.state.validFields.hasOwnProperty(key)) {
+                if (this.state.validFields[key] === false) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
     }
 
     /**
@@ -138,7 +194,7 @@ class FormComponent extends React.Component {
      * @private
      */
     _setFieldErrorState(fieldIdentifier, isValid) {
-        var errors = this.state.errors;
+        var errors = this.state.validFields;
         errors[fieldIdentifier] = isValid;
 
         this.setState({

src/js/lib/form/component/formSubmitComponent.js

@@ -1,10 +1,41 @@
 import React from 'react';
+import FormElementComponent from './formElementComponent';
 import { generateFormElementId } from './../helper/identifierHelper';
+import _ from 'lodash';
 
 /**
  * @author Gijs Nieuwenhuis <gijs.nieuwenhuis@freshheads.com>
  */
-class FormSubmitComponent extends React.Component {
+class FormSubmitComponent extends FormElementComponent {
+
+    /**
+     * @param {Object} props
+     */
+    constructor(props) {
+        super(props);
+
+        this.state = _.extend({}, this.state, {
+            isDisabled: this.props.isDisabled
+        });
+    }
+
+    /**
+     * @public
+     */
+    disable() {
+        this.setState({
+            isDisabled: true
+        });
+    }
+
+    /**
+     * @public
+     */
+    enable() {
+        this.setState({
+            isDisabled: false
+        })
+    }
 
     /**
      * @returns {XML}
@@ -15,22 +46,22 @@ class FormSubmitComponent extends React.Component {
                     id={generateFormElementId(this.props.identifier)}
                     name={this.props.identifier}
                     className={this.props.className}
-                    disabled={this.props.isDisabled}>
+                    disabled={this.state.isDisabled}>
                 {this.props.children}
             </button>
         );
     }
 }
 
-FormSubmitComponent.defaultProps = {
+FormSubmitComponent.defaultProps = _.extend({}, FormElementComponent.defaultProps, {
     className: 'btn btn-success',
     isDisabled: false
-};
+});
 
-FormSubmitComponent.propTypes = {
+FormSubmitComponent.propTypes = _.extend({}, FormElementComponent.propTypes, {
     identifier: React.PropTypes.string.isRequired,
     className: React.PropTypes.string.isRequired,
     isDisabled: React.PropTypes.bool.isRequired
-};
+});
 
 export default FormSubmitComponent;