Add validationResults getter, disableSubmitOnValidationError prop

Author: mikechabot

dist/components/form/FormConsumer.js

@@ -78,11 +78,12 @@ function (_Component) {
           instance = _this$props.instance,
           hideFormBorder = _this$props.hideFormBorder,
           width = _this$props.width;
+      var style = width ? {
+        width: this.props.width
+      } : {};
       return _react["default"].createElement("div", {
         className: "__rjfe__ rjfe-form-consumer",
-        style: width ? {
-          width: this.props.width
-        } : {}
+        style: style
       }, _react["default"].createElement(_FormTitle["default"], null), _react["default"].createElement("div", {
         className: "form-sections",
         style: this.getDerivedStyles(hideFormBorder)

dist/components/form/FormField/FormControl.js

@@ -74,7 +74,7 @@ function (_Component) {
     value: function renderErrors(id) {
       var instance = this.props.instance;
 
-      var _instance$getValidati = instance.getValidationResultByTag(id),
+      var _instance$getValidati = instance.getValidationResultById(id),
           messages = _instance$getValidati.messages;
 
       return Object.keys(messages).map(function (key) {

dist/components/form/FormSubsection/index.js

@@ -41,7 +41,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-var FormSubsection = (_dec = (0, _mobxReact.inject)('instance', 'hideFormTitle', 'hideSubsectionTitles', 'hideSubsectionSubtitles'), _dec(_class = (0, _mobxReact.observer)(_class = (_temp = _class2 =
+var FormSubsection = (_dec = (0, _mobxReact.inject)('instance', 'hideFormTitle', 'hideSubsectionTitles', 'hideSubsectionSubtitles', 'submitButtonLabel'), _dec(_class = (0, _mobxReact.observer)(_class = (_temp = _class2 =
 /*#__PURE__*/
 function (_Component) {
   _inherits(FormSubsection, _Component);

dist/components/form/index.js

@@ -145,6 +145,7 @@ Form.propTypes = {
   hideFormBorder: _propTypes["default"].bool,
   hideSubsectionTitles: _propTypes["default"].bool,
   hideSubsectionSubtitles: _propTypes["default"].bool,
+  disableSubmitOnValidationError: _propTypes["default"].bool,
   width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
   onSubmit: _propTypes["default"].func.isRequired,
   onUpdate: _propTypes["default"].func

dist/form-engine/index.js

@@ -631,7 +631,6 @@ function () {
     /**
      * Evaluate the show condition of the field
      * @param field
-     * @param tag
      * @returns {*}
      */
 
@@ -694,18 +693,28 @@ function () {
         });
       });
       Object.keys(this.fields).forEach(function (id) {
-        _this11.validationMap.fields[id] = _validationService["default"].isError(_this11.getValidationStatusByTag(id));
+        _this11.validationMap.fields[id] = _validationService["default"].isError(_this11.getValidationStatusById(id));
       });
     }
+    /**
+     * Get the ValidationResults object
+     * @returns {ValidationResults}
+     */
+
+  }, {
+    key: "getValidationResults",
+    value: function getValidationResults() {
+      return this.validationResults;
+    }
     /**
      * Get validation results by field id
      * @param id
      * @returns {{status: (*|string), messages: (*|Array)}}
      */
 
   }, {
-    key: "getValidationResultByTag",
-    value: function getValidationResultByTag(id) {
+    key: "getValidationResultById",
+    value: function getValidationResultById(id) {
       return this.validationResults.getResults(id);
     }
     /**
@@ -715,9 +724,9 @@ function () {
      */
 
   }, {
-    key: "getValidationStatusByTag",
-    value: function getValidationStatusByTag(id) {
-      return this.getValidationResultByTag(id).status;
+    key: "getValidationStatusById",
+    value: function getValidationStatusById(id) {
+      return this.getValidationResultById(id).status;
     }
     /**
      * Recursively check for validation statuses, and return
@@ -727,10 +736,10 @@ function () {
      */
 
   }, {
-    key: "getDeepValidationStatusByTag",
-    value: function getDeepValidationStatusByTag(id) {
-      var status = this.getValidationResultByTag(id).status;
-      var newStatus = this.findValidationStatus(this.getField(id)[FIELD.FIELDS], this.getDeepValidationStatusByTag.bind(this), true);
+    key: "getDeepValidationStatusById",
+    value: function getDeepValidationStatusById(id) {
+      var status = this.getValidationResultById(id).status;
+      var newStatus = this.findValidationStatus(this.getField(id)[FIELD.FIELDS], this.getDeepValidationStatusById.bind(this), true);
 
       if (_validationService["default"].isMoreSevereStatus(newStatus, status)) {
         status = newStatus;
@@ -772,7 +781,7 @@ function () {
   }, {
     key: "getSubsectionStatus",
     value: function getSubsectionStatus(subsection) {
-      return this.findValidationStatus(subsection.fields, this.getDeepValidationStatusByTag.bind(this), true);
+      return this.findValidationStatus(subsection.fields, this.getDeepValidationStatusById.bind(this), true);
     }
     /**
      * Return the validation status of a section

src/components/form/FormConsumer.jsx

@@ -12,7 +12,8 @@ import TabbedSections from './FormSection/TabbedSections';
     'hideFormBorder',
     'hideSubsectionTitles',
     'hideSubsectionSubtitles',
-    'submitButtonLabel'
+    'submitButtonLabel',
+    'disableSubmitOnValidationError'
 )
 @observer
 class FormConsumer extends Component {
@@ -38,8 +39,10 @@ class FormConsumer extends Component {
     render() {
         const { instance, hideFormBorder, width } = this.props;
 
+        const style = width ? { width: this.props.width } : {};
+
         return (
-            <div className="__rjfe__ rjfe-form-consumer" style={width ? { width: this.props.width } : {}}>
+            <div className="__rjfe__ rjfe-form-consumer" style={style}>
                 <FormTitle />
                 <div className="form-sections" style={this.getDerivedStyles(hideFormBorder)}>
                     {this.renderSections(instance.getSections())}

src/components/form/FormField/FormControl.jsx

@@ -25,7 +25,7 @@ class FormControl extends Component {
 
     renderErrors(id) {
         const { instance } = this.props;
-        const { messages } = instance.getValidationResultByTag(id);
+        const { messages } = instance.getValidationResultById(id);
         return Object.keys(messages).map(key => (
             <FormControlHint key={key} icon="asterisk" className="is-danger" text={messages[key].message} />
         ));

src/components/form/FormSubsection/index.jsx

@@ -6,7 +6,7 @@ import FormField from '../FormField/';
 import FormSubsectionTitle from '../util/FormSubsectionTitle';
 import FormSubmitButton from '../util/FormSubmitButton';
 
-@inject('instance', 'hideFormTitle', 'hideSubsectionTitles', 'hideSubsectionSubtitles')
+@inject('instance', 'hideFormTitle', 'hideSubsectionTitles', 'hideSubsectionSubtitles', 'submitButtonLabel')
 @observer
 class FormSubsection extends Component {
     static propTypes = {

src/components/form/index.jsx

@@ -69,6 +69,7 @@ class Form extends Component {
                 onUpdate={this.onUpdate}
                 hideFormTitle={this.props.hideFormTitle}
                 hideFormBorder={this.props.hideFormBorder}
+                disableSubmitOnValidationError={this.props.disableSubmitOnValidationError}
                 hideSubsectionTitles={this.props.hideSubsectionTitles}
                 hideSubsectionSubtitles={this.props.hideSubsectionSubtitles}
                 submitButtonLabel={this.props.submitButtonLabel}
@@ -86,6 +87,7 @@ Form.propTypes = {
     hideFormBorder: PropTypes.bool,
     hideSubsectionTitles: PropTypes.bool,
     hideSubsectionSubtitles: PropTypes.bool,
+    disableSubmitOnValidationError: PropTypes.bool,
     width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     onSubmit: PropTypes.func.isRequired,
     onUpdate: PropTypes.func

src/components/form/util/FormSubmitButton.jsx

@@ -2,17 +2,19 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
-@inject('onSubmit', 'submitButtonLabel')
+@inject('instance', 'onSubmit', 'submitButtonLabel', 'disableSubmitOnValidationError')
 @observer
 class FormSubmitButton extends Component {
     static propTypes = {
         onSubmit: PropTypes.func.isRequired,
         submitButtonLabel: PropTypes.string
     };
     render() {
+        const { instance, submitButtonLabel, onSubmit, disableSubmitOnValidationError } = this.props;
+        const disable = disableSubmitOnValidationError && instance.formHasError();
         return (
-            <button className="button is-link" onClick={this.props.onSubmit}>
-                {this.props.submitButtonLabel || 'Submit'}
+            <button className="button is-link" onClick={onSubmit} disabled={disable}>
+                {submitButtonLabel || 'Submit'}
             </button>
         );
     }

src/components/form/util/FormTitle.jsx

@@ -7,7 +7,7 @@ import FormSubmitButton from './FormSubmitButton';
 
 const DEFAULT_THEME = 'is-dark';
 
-@inject('instance', 'hideFormTitle', 'submitButtonLabel')
+@inject('instance', 'hideFormTitle', 'submitButtonLabel', 'disableSubmitOnValidationError')
 @observer
 class FormTitle extends Component {
     static propTypes = {

src/form-engine/index.js

@@ -496,7 +496,6 @@ class FormEngine {
     /**
      * Evaluate the show condition of the field
      * @param field
-     * @param tag
      * @returns {*}
      */
     isVisible(field) {
@@ -521,7 +520,7 @@ class FormEngine {
     validate(comprehensive = false) {
         this.validationResults = FormValidator.validate(this, this.validationResults, comprehensive);
         this.buildObservableValidationMap();
-        return this.validationResults.hasError();
+        return this.formHasError();
     }
 
     /**
@@ -549,16 +548,24 @@ class FormEngine {
             });
         });
         Object.keys(this.fields).forEach(id => {
-            this.validationMap.fields[id] = ValidationService.isError(this.getValidationStatusByTag(id));
+            this.validationMap.fields[id] = ValidationService.isError(this.getValidationStatusById(id));
         });
     }
 
+    /**
+     * Get the ValidationResults object
+     * @returns {ValidationResults}
+     */
+    getValidationResults() {
+        return this.validationResults;
+    }
+
     /**
      * Get validation results by field id
      * @param id
      * @returns {{status: (*|string), messages: (*|Array)}}
      */
-    getValidationResultByTag(id) {
+    getValidationResultById(id) {
         return this.validationResults.getResults(id);
     }
 
@@ -567,8 +574,8 @@ class FormEngine {
      * @param id
      * @returns {*|string}
      */
-    getValidationStatusByTag(id) {
-        return this.getValidationResultByTag(id).status;
+    getValidationStatusById(id) {
+        return this.getValidationResultById(id).status;
     }
 
     /**
@@ -577,11 +584,11 @@ class FormEngine {
      * @param id
      * @returns {*|string}
      */
-    getDeepValidationStatusByTag(id) {
-        let status = this.getValidationResultByTag(id).status;
+    getDeepValidationStatusById(id) {
+        let status = this.getValidationResultById(id).status;
         const newStatus = this.findValidationStatus(
             this.getField(id)[FIELD.FIELDS],
-            this.getDeepValidationStatusByTag.bind(this),
+            this.getDeepValidationStatusById.bind(this),
             true
         );
         if (ValidationService.isMoreSevereStatus(newStatus, status)) {
@@ -617,7 +624,7 @@ class FormEngine {
     getSubsectionStatus(subsection) {
         return this.findValidationStatus(
             subsection.fields,
-            this.getDeepValidationStatusByTag.bind(this),
+            this.getDeepValidationStatusById.bind(this),
             true
         );
     }
@@ -657,6 +664,14 @@ class FormEngine {
     sectionHasError(sectionId) {
         return this.validationMap.sections[sectionId] || false;
     }
+
+    /**
+     * Determine if the form has a validation error
+     * @returns {boolean}
+     */
+    formHasError() {
+        return this.validationMap.form;
+    }
 }
 
 decorate(FormEngine, {

stories/util/index.js

@@ -9,17 +9,17 @@ export const logInstance = instance => {
 };
 
 export const buildFormComponent = (instance, options = {}) => {
-    const { submitButtonLabel = 'Submit', height, width } = options;
+    const { submitButtonLabel = 'Submit', width } = options;
 
     const buttonLabel = text('submitButtonLabel', submitButtonLabel);
     return (
         <Form
-            {...height && { height }}
             {...width && { width }}
             hideFormTitle={boolean('hideFormTitle', false)}
             hideFormBorder={boolean('hideFormBorder', false)}
             hideSubsectionTitles={boolean('hideSubsectionTitles', false)}
             hideSubsectionSubtitles={boolean('hideSubsectionSubtitles', false)}
+            disableSubmitOnValidationError={boolean('disableSubmitOnValidationError', true)}
             submitButtonLabel={buttonLabel}
             instance={instance}
             onSubmit={logInstance(instance).action(buttonLabel)}