Hacky validation stuff

Author: DanFMoore

comments.json

@@ -8,5 +8,35 @@
         "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": "[email protected]"
+    },
+    {
+        "id": 1455154018698,
+        "author": "sdfg",
+        "text": "[email protected]"
+    },
+    {
+        "id": 1455154150577,
+        "author": "sdfgsdfg",
+        "text": "sdsdfgsdfgsdf"
     }
-]
+]

components/components.js

@@ -14,6 +14,10 @@ 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 Comment = React.createClass({
     displayName: 'Comment',
@@ -82,27 +86,94 @@ var CommentList = React.createClass({
 var CommentForm = React.createClass({
     displayName: 'CommentForm',
     getInitialState: function () {
+        // Define the rules and custom messages for each field.
+        // Do this by creating a validator with no data; it's added later.
+        this.validatorTypes = new Validator(
+            {},
+            {
+
+            },
+            {
+                'min.text': 'Enter a message between 10 and 50 characters',
+                'max.text': 'Enter a message between 10 and 50 characters'
+            }
+        );
+
         return {author: '', text: ''};
     },
+    addValidation: function(e) {
+        this.validatorTypes.rules = this.validatorTypes._parseRules({
+            author: 'required',
+            text: 'required|min:10|max:50'
+        });
+
+        this.props.handleValidation('author')(e);
+        this.props.handleValidation('text')(e);
+    },
     handleAuthorChange: function (e) {
-        this.setState({author: e.target.value});
+        this.setState({author: e.target.value}, () => {
+            this.props.handleValidation('author')(e);
+        });
     },
     handleTextChange: function (e) {
-        this.setState({text: e.target.value});
+        this.setState({text: e.target.value}, () => {
+            this.props.handleValidation('text')(e);
+        });
     },
     handleSubmit: function (e) {
         e.preventDefault();
-        var author = this.state.author.trim();
-        var text = this.state.text.trim();
-        if (!text || !author) {
-            return;
-        }
-        this.props.onCommentSubmit({author: author, text: text});
-        this.setState({author: '', text: ''});
+
+        // If the form is valid, then submit the comment
+        this.props.validate((error) => {
+            if (!error) {
+                this.props.onCommentSubmit(this.state);
+                this.setState({author: '', text: ''});
+            }
+        });
+    },
+    getValidatorData: function () {
+        return this.state;
+    },
+    getClasses: function (field) {
+        return classNames({
+            'has-error': !this.props.isValid(field)
+        });
     },
     render: templates.commentForm
 });
 
+var strategy = {
+    /**
+     * Validate using the validatorjs library
+     *
+     * @see https://www.npmjs.com/package/validatorjs
+     *
+     * @param {Object} data the data submitted
+     * @param {Validator} validator the validatorjs validator
+     * @param {Object} options contains name of element being validated and previous errors
+     * @param {Function} callback called and passed the errors
+     */
+    validate: function(data, validator, options, callback) {
+        // Set the data again on the validator and clear existing errors
+        validator.input = data;
+        validator.errors.errors = {};
+
+        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 = {
     Comment,
     CommentBox,

components/templates.jsx

@@ -36,20 +36,43 @@ module.exports = {
         );
     },
     commentForm: function () {
+        function renderErrors(messages) {
+            if (messages.length) {
+                messages = messages.map((message) => <li>{message}</li>);
+
+                return <ul class="errors">{messages}</ul>;
+            }
+        }
+
         return (
             <form className="commentForm" onSubmit={this.handleSubmit}>
-                <input
-                    type="text"
-                    placeholder="Your name"
-                    value={this.state.author}
-                    onChange={this.handleAuthorChange}
+                <p>
+                    <input
+                        type="text"
+                        placeholder="Your name"
+                        className={this.getClasses('author')}
+                        value={this.state.author}
+                        onChange={this.handleAuthorChange}
+                        onBlur={this.addValidation}
                     />
-                <input
-                    type="text"
-                    placeholder="Say something..."
-                    value={this.state.text}
-                    onChange={this.handleTextChange}
+                </p>
+
+                {renderErrors(this.props.getValidationMessages('author'))}
+
+                <p>
+                    <input
+                        type="text"
+                        placeholder="Say something..."
+                        className={this.getClasses('text')}
+                        value={this.state.text}
+                        onChange={this.handleTextChange}
+                        onBlur={this.addValidation}
+
                     />
+                </p>
+
+                {renderErrors(this.props.getValidationMessages('text'))}
+
                 <input type="submit" value="Post" />
             </form>
         );

package.json

@@ -5,13 +5,17 @@
   "main": "server.js",
   "dependencies": {
     "body-parser": "^1.4.3",
+    "classnames": "^2.2.3",
     "express": "^4.4.5",
+    "install": "^0.4.2",
     "jquery": "^2.2.0",
     "marked": "^0.3.5",
     "node-jsx": "^0.13.3",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
-    "swig": "^1.4.2"
+    "react-validation-mixin": "^5.3.4",
+    "swig": "^1.4.2",
+    "validatorjs": "^2.0.2"
   },
   "devDependencies": {
     "babel-core": "^6.4.5",

public/css/base.css

@@ -60,3 +60,7 @@ p, ul {
 ul {
   padding-left: 30px;
 }
+
+.has-error {
+  border: 1px solid red;
+}

public/scripts/.gitignore

@@ -1,2 +1,2 @@
-*
-!.gitignore
+bundle.js
+bundle.js.map