JSchaenzle · April 21, 2018 14:47 · Oct 2, 2016 · Oct 1, 2016 · Oct 1, 2016 · Oct 1, 2016
diff --git a/ruleRunner.js b/ruleRunner.js
@@ -13,7 +13,7 @@ export const ruleRunner = (field, name, ...validations) => {
 
 export const run = (state, runners) => {
   return runners.reduce((memo, runner) => {
-    Object.assign(memo, runner(state));
+    return Object.assign(memo, runner(state));
   }, {});
 };
 

diff --git a/ruleRunner.js b/ruleRunner.js
@@ -12,10 +12,9 @@ export const ruleRunner = (field, name, ...validations) => {
 };
 
 export const run = (state, runners) => {
-  let errors = {};
-  runners.reduce((memo, runner) => {
-    Object.assign(errors, runner(state));
+  return runners.reduce((memo, runner) => {
+    Object.assign(memo, runner(state));
   }, {});
-  return errors;
 };
 
+
diff --git a/TextField.jsx b/TextField.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import OptionallyDisplayed from './OptionallyDisplayed.jsx';
+
+export default class TextField extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.shouldDisplayError = this.shouldDisplayError.bind(this);
+  }
+
+  shouldDisplayError() {
+    return this.props.showError && this.props.errorText != "";
+  }
+
+  render() {
+    return (
+      <div>
+        <input type="text" placeholder={this.props.placeholder}
+               value={this.props.text} onChange={this.props.onFieldChanged}  />
+        <OptionallyDisplayed display={this.shouldDisplayError()}>
+          <div className="validation-error">
+            <span className="text">{this.props.errorText}</span>
+          </div>
+        </OptionallyDisplayed>
+      </div>
+    );
+  }
+}
+
+TextField.propTypes = {
+  showError: React.PropTypes.bool.isRequired,
+  onFieldChanged: React.PropTypes.func.isRequired
+};
+
diff --git a/CreateAccount.jsx b/CreateAccount.jsx
@@ -0,0 +1,49 @@
+const fieldValidations = [
+  ruleRunner("name", "Name", required),
+  ruleRunner("emailAddress", "Email Address", required),
+  ruleRunner("password1", "Password", required, minLength(6)),
+  ruleRunner("password2", "Password Confirmation", mustMatch("password1", "Password"))
+];
+
+export default class CreateAccount extends React.Component {
+  constructor() {
+    // ...
+    this.state = {
+      showErrors: false,
+      validationErrors: {}
+    };
+
+    // Run validations on initial state
+    this.state.validationErrors = run(this.state, fieldValidations);
+  }
+
+  handleFieldChanged(field) {
+    return (e) => {
+      // update() is provided by React Immutability Helpers
+      // https://facebook.github.io/react/docs/update.html
+      let newState = update(this.state, {
+        [field]: {$set: e.target.value}
+      });
+      newState.validationErrors = run(newState, fieldValidations);
+      this.setState(newState);
+    };
+
+  handleSubmitClicked() {
+    this.setState({showErrors: true});
+    if($.isEmptyObject(this.state.validationErrors) == false) return null;
+    // ... continue submiting data to server
+  }
+
+  render() {
+    return (
+      <div>
+        <TextView placeholder="Email address" showError={this.state.showErrors}
+                  text={this.props.emailAddress} onFieldChanged={this.handleFieldChanged("emailAddress")}
+                  errorText={this.errorFor("emailAddress")} />
+
+        // Render Name, Password, Submit button, etc. fields
+      </div>
+    );
+  }
+
+}
diff --git a/errorMessages.js b/errorMessages.js
@@ -0,0 +1,12 @@
+
+export const isRequired = fieldName => `${fieldName} is required`;
+
+export const mustMatch = otherFieldName => {
+  return (fieldName) => `${fieldName} must match ${otherFieldName}`;
+};
+
+export const minLength = length => {
+  return (fieldName) => `${fieldName} must be at least ${length} characters`;
+};
+
+
diff --git a/ruleRunner.js b/ruleRunner.js
@@ -0,0 +1,21 @@
+
+export const ruleRunner = (field, name, ...validations) => {
+  return (state) => {
+    for (let v  of validations) {
+      let errorMessageFunc = v(state[field], state);
+      if (errorMessageFunc) {
+        return {[field]: errorMessageFunc(name)};
+      }
+    }
+    return null;
+  };
+};
+
+export const run = (state, runners) => {
+  let errors = {};
+  runners.reduce((memo, runner) => {
+    Object.assign(errors, runner(state));
+  }, {});
+  return errors;
+};
+
diff --git a/rules.js b/rules.js
@@ -0,0 +1,22 @@
+import * as ErrorMessages from './errorMessages.js';
+
+export const required = (text) => {
+  if (text) {
+    return null;
+  } else {
+    return ErrorMessages.isRequired;
+  }
+};
+
+export const mustMatch = (field, fieldName) => {
+  return (text, state) => {
+    return state[field] == text ? null : ErrorMessages.mustMatch(fieldName);
+  };
+};
+
+export const minLength = (length) => {
+  return (text) => {
+    console.log("Checking for length greater than ", length);
+    return text.length >= length ? null : ErrorMessages.minLength(length);
+  };
+};