Added server side validation

DanFMoore · DanFMoore · commit a567747e736f · 2016-02-12T01:28:11.000Z
diff --git a/README.md b/README.md
@@ -1,9 +1,11 @@
 # Isomorphic React and Express
 
-This repository shows how React can be used with the Express framework isomorphically; that is to use the same code on both the server and browser. This uses the comment box example from the [React tutorial](http://facebook.github.io/react/docs/tutorial.html) but in addition to rendering the comment box in the browser, it pre-renders it on the server, using the same code.
+This repository shows how React can be used with the Express framework isomorphically; that is to use the same code on both the server and browser to render the same sections of pages. This uses the comment box example from the [React tutorial](http://facebook.github.io/react/docs/tutorial.html) but in addition to rendering the comment box in the browser, it pre-renders it on the server, using the same code.
 
 There are also a few other additions. I've set up `webpack` so that it bundles up the code to be used in the browser. I also didn't particularly like the `JSX` template render methods being in the same file as the controller / component code (despite what React says, they are not just "views"; they behave very similar to Angular's controllers). And lastly since I had to server-side rendering, I've had to use a view engine. I've chose `Swig` as unlike `Jade` it uses proper HTML and so means I have one fewer language to learn (which fits into the philosophy of isomorphism).
 
+Isomorphic validation is also available: see more information below under `Validation`.
+
 Naturally this means all of the other server language implementations have been removed - Python, PHP etc.
 
 ## Implementation
@@ -14,13 +16,19 @@ In the browser, the main entry point method which calls `ReactDOM.render`, is ad
 
 On the browser, `components/server.js` is `require`d, after the `node-jsx` module is set up, in order that the JSX syntax can be understood. This exports a `renderCommentBox` method which returns a static string after calling `ReactDOMServer.renderToString` from the `react-dom/server` module. The route for `/` simply calls this method and passes it as a variable to the `views/index.html` view.
 
+## Validation
+
+There is also client-side and server-side validation which again is isomorphic. This uses `react-validation-mixin` for React from which the rules are defined by `validatorjs`. These are connected using a "strategy" defined in `components/strategy.js` where more information can be found. The schemas are defined in `components/schemas.js`.
+
+Extra functionality has been added to `components/templates.jsx` and `components/components.js` to handle the validation and server-side to the `/api/comments` POST end point in `server.js`.
+
 ## To use
 
     npm install
     
 Next, to compile the browser code into `public/scripts/bundle.js`:
 
-    npm run webpack-dev
+    npm run webpack:dev
     
 Or if you want to compile it to a minified version without the source map:
 
@@ -30,4 +38,4 @@ And then start the server:
 
     npm start
     
-And visit <http://localhost:3000/>.
+And visit <http://127.0.0.1:3000/>.
diff --git a/comments.json b/comments.json
@@ -8,35 +8,5 @@
         "id": 1420070400000,
         "author": "Paul O’Shannessy",
         "text": "React is *great*!"
-    },
-    {
-        "id": 1455145027806,
-        "author": "dfgh",
-        "text": "dgh"
-    },
-    {
-        "id": 1455145275989,
-        "author": "dfghdf",
-        "text": "ghfgjh"
-    },
-    {
-        "id": 1455145280188,
-        "author": "fghjfgj",
-        "text": "fgjh"
-    },
-    {
-        "id": 1455152836500,
-        "author": "sdfgsd",
-        "text": "sdfg@sadf.com"
-    },
-    {
-        "id": 1455154018698,
-        "author": "sdfg",
-        "text": "sdfg@asdf.com"
-    },
-    {
-        "id": 1455154150577,
-        "author": "sdfgsdfg",
-        "text": "sdsdfgsdfgsdf"
     }
 ]
diff --git a/components/components.js b/components/components.js
@@ -10,16 +10,16 @@
  * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-'use strict';
 
-var templates = require('./templates.jsx');
 var React = require('react');
 var marked = require('marked');
-var $ = require('jquery');
 var classNames = require('classnames');
-
 var validation = require('react-validation-mixin');
-var Validator = require('validatorjs');
+var $ = require('jquery');
+
+var templates = require('./templates.jsx');
+var strategy = require('./strategy');
+var schemas = require('./schemas');
 
 var Comment = React.createClass({
     displayName: 'Comment',
@@ -89,23 +89,24 @@ var CommentForm = React.createClass({
     displayName: 'CommentForm',
     getInitialState: function () {
         // Define the rules and custom messages for each field.
-        this.validatorTypes = strategy.createInactiveSchema(
-            {
-                author: 'required',
-                text: 'required|min:10|max:50'
-            },
-            {
-                //'min.text': 'Enter a message between 10 and 50 characters',
-                //'max.text': 'Enter a message between 10 and 50 characters'
-            }
-        );
+        this.validatorTypes = schemas.commentForm;
 
         return {author: '', text: ''};
     },
-    addValidation: function(e) {
+    /**
+     * Activate the validation rule for the element on blur
+     *
+     * @param {Event} e
+     */
+    activateValidation: function(e) {
         strategy.activateRule(this.validatorTypes, e.target.name);
         this.props.handleValidation(e.target.name)(e);
     },
+    /**
+     * Set the state of the changed variable and then when set, call validator
+     *
+     * @param {Event} e
+     */
     handleChange: function (e) {
         var state = {};
         state[e.target.name] = e.target.value;
@@ -114,12 +115,17 @@ var CommentForm = React.createClass({
             this.props.handleValidation(e.target.name)(e);
         });
     },
+    /**
+     * Validate the form and if valid, submit the comment
+     *
+     * @param {Event} e
+     */
     handleSubmit: function (e) {
         e.preventDefault();
 
-        // If the form is valid, then submit the comment
         this.props.validate((error) => {
             if (!error) {
+                // this.props.onCommentSubmit is actually CommentBox.handleCommentSubmit
                 this.props.onCommentSubmit(this.state);
                 this.setState({author: '', text: ''});
             }
@@ -136,70 +142,6 @@ var CommentForm = React.createClass({
     render: templates.commentForm
 });
 
-var strategy = {
-    createSchema: function (rules, messages, createValidatorCallback) {
-        return {
-            rules,
-            messages,
-            createValidatorCallback
-        };
-    },
-    createInactiveSchema: function (rules, messages, createValidatorCallback) {
-        var schema = this.createSchema(rules, messages, createValidatorCallback);
-        schema.activeRules = [];
-
-        return schema;
-    },
-    activateRule: function(schema, rule) {
-        if (schema.activeRules.indexOf(rule) === -1) {
-            schema.activeRules.push(rule);
-        }
-    },
-    /**
-     * Validate using the validatorjs library
-     *
-     * @see https://www.npmjs.com/package/validatorjs
-     *
-     * @param {Object} data the data submitted
-     * @param {Object} schema contains rules and custom error messages
-     * @param {Object} options contains name of element being validated and previous errors
-     * @param {Function} callback called and passed the errors
-     */
-    validate: function (data, schema, options, callback) {
-        var rules = {};
-
-        // Only add active rules to the validator if an initially inactive schema has been created.
-        // Check all rules regardless if the form has been submitted (options.key is empty).
-        if (typeof schema.activeRules !== 'undefined' && options.key) {
-            for (let i in schema.activeRules) {
-                let ruleName = schema.activeRules[i];
-
-                rules[ruleName] = schema.rules[ruleName];
-            }
-        } else {
-            rules = schema.rules;
-        }
-
-        var validator = new Validator(data, rules, schema.messages);
-
-        if (typeof schema.createValidatorCallback === 'function') {
-            schema.createValidatorCallback(validator);
-        }
-
-        var getErrors = () => {
-            if (options.key) {
-                options.prevErrors[options.key] = validator.errors.get(options.key);
-                callback(options.prevErrors);
-            } else {
-                callback(validator.errors.all());
-            }
-        };
-
-        // Run the validator asynchronously in case any async rules have been added
-        validator.checkAsync(getErrors, getErrors);
-    }
-};
-
 CommentForm = validation(strategy)(CommentForm);
 
 module.exports = {
diff --git a/components/schemas.js b/components/schemas.js
@@ -0,0 +1,14 @@
+var strategy = require('./strategy');
+
+module.exports = {
+    commentForm: strategy.createInactiveSchema(
+        {
+            author: 'required',
+            text: 'required|min:10|max:50'
+        },
+        {
+            'min.text': 'Enter a message between 10 and 50 characters',
+            'max.text': 'Enter a message between 10 and 50 characters'
+        }
+    )
+};
diff --git a/components/strategy.js b/components/strategy.js
@@ -0,0 +1,138 @@
+/**
+ * Validate using the validatorjs library as a strategy for react-validation-mixin
+ *
+ * @see https://www.npmjs.com/package/validatorjs
+ * @see https://www.npmjs.com/package/react-validator-mixin
+ */
+
+'use strict';
+
+var Validator = require('validatorjs');
+
+module.exports = {
+    /**
+     * Used to create this.validatorTypes in a React component and to be passed to validate or validateServer
+     *
+     * @param {Object} rules List of rules as specified by validatorjs
+     * @param {Object} messages Optional list of custom messages as specified by validatorjs
+     * @param {Function} callback if specified, called to allow customisation of validator
+     * @returns {Object}
+     */
+    createSchema: function (rules, messages, callback) {
+        return {
+            rules,
+            messages,
+            callback
+        };
+    },
+    /**
+     * Same as createSchema, but the rules are disabled until activateRule is called
+     *
+     * @param {Object} rules List of rules as specified by validatorjs
+     * @param {Object} messages Optional list of custom messages as specified by validatorjs
+     * @param {Function} callback if specified, called to allow customisation of validator
+     * @returns {Object}
+     */
+    createInactiveSchema: function (rules, messages, callback) {
+        var schema = this.createSchema(rules, messages, callback);
+        schema.activeRules = [];
+
+        return schema;
+    },
+    /**
+     * Active a specific rule
+     *
+     * @param {Object} schema As created by createInactiveSchema
+     * @param {Object} rule Name of the rule as a key in schema.rules
+     */
+    activateRule: function(schema, rule) {
+        if (typeof schema.activeRules !== 'undefined' && schema.activeRules.indexOf(rule) === -1) {
+            schema.activeRules.push(rule);
+        }
+    },
+    /**
+     * Create a validator from submitted data and a schema
+     *
+     * @param {Object} data The data submitted
+     * @param {Object} schema Contains rules and custom error messages
+     * @param {Boolean} forceActive Whether to force all rules to be active even if not activated
+     * @returns {Validator}
+     */
+    createValidator: function (data, schema, forceActive) {
+        var rules = {};
+
+        // Only add active rules to the validator if an initially inactive schema has been created.
+        if (typeof schema.activeRules !== 'undefined') {
+            // Force all rules to be active if specified
+            if (forceActive) {
+                schema.activeRules = Object.keys(schema.rules);
+            }
+
+            for (let i in schema.activeRules) {
+                let ruleName = schema.activeRules[i];
+
+                rules[ruleName] = schema.rules[ruleName];
+            }
+        } else {
+            rules = schema.rules;
+        }
+
+        var validator = new Validator(data, rules, schema.messages);
+
+        // If a callback has been specified on the schema, call it to allow customisation of the validator
+        if (typeof schema.callback === 'function') {
+            schema.callback(validator);
+        }
+
+        return validator;
+    },
+    /**
+     * Called by react-validation-mixin
+     *
+     * @param {Object} data The data submitted
+     * @param {Object} schema Contains rules and custom error messages
+     * @param {Object} options Contains name of element being validated and previous errors
+     * @param {Function} callback Called and passed the errors after validation
+     */
+    validate: function (data, schema, options, callback) {
+        // If the whole form has been submitted, then activate all rules
+        var forceActive = !options.key;
+        var validator = this.createValidator(data, schema, forceActive);
+
+        var getErrors = () => {
+            // If a single element is being validated, just get those errors.
+            // Otherwise get all of them.
+            if (options.key) {
+                options.prevErrors[options.key] = validator.errors.get(options.key);
+                callback(options.prevErrors);
+            } else {
+                callback(validator.errors.all());
+            }
+        };
+
+        // Run the validator asynchronously in case any async rules have been added
+        validator.checkAsync(getErrors, getErrors);
+    },
+    /**
+     * Validate server-side returning a Promise to easier handle results.
+     * All inactive rules will be forced to activate.
+     *
+     * @param {Object} data The data submitted
+     * @param {Object} schema Contains rules and custom error messages
+     * @returns {Promise}
+     */
+    validateServer: function (data, schema) {
+        var validator = this.createValidator(data, schema, true);
+
+        return new Promise((resolve, reject) => {
+            validator.checkAsync(
+                () => {
+                    resolve();
+                },
+                () => {
+                    reject(validator.errors.all());
+                }
+            );
+        });
+    }
+};
diff --git a/components/templates.jsx b/components/templates.jsx
@@ -54,7 +54,7 @@ module.exports = {
                         className={this.getClasses('author')}
                         value={this.state.author}
                         onChange={this.handleChange}
-                        onBlur={this.addValidation}
+                        onBlur={this.activateValidation}
                     />
                 </p>
 
@@ -68,7 +68,7 @@ module.exports = {
                         className={this.getClasses('text')}
                         value={this.state.text}
                         onChange={this.handleChange}
-                        onBlur={this.addValidation}
+                        onBlur={this.activateValidation}
 
                     />
                 </p>
diff --git a/package.json b/package.json
diff --git a/server.js b/server.js
