The validation error server-side now returns a custom Error through the promise, which the error handler middleware handles

Author: DanFMoore

components/browser.js

@@ -8,7 +8,7 @@ var $ = require('jquery');
  * This will avoid the server rendered comments being replaced with nothing by JS.
  * If the AJAX call fails, then just render no comments after logging the error.
  */
-window.renderCommentBox = function renderCommentBox() {
+window.renderCommentBox = function () {
     var url = "/api/comments";
 
     $.get(url).then(

components/components.js

@@ -13,7 +13,6 @@
 
 var React = require('react');
 var marked = require('marked');
-var classNames = require('classnames');
 var validation = require('react-validation-mixin');
 var $ = require('jquery');
 
@@ -23,7 +22,7 @@ var schemas = require('./schemas');
 
 var Comment = React.createClass({
     displayName: 'Comment',
-    rawMarkup: function () {
+    rawMarkup() {
         var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
         return {__html: rawMarkup};
     },
@@ -33,7 +32,7 @@ var Comment = React.createClass({
 
 var CommentBox = React.createClass({
     displayName: 'CommentBox',
-    loadCommentsFromServer: function () {
+    loadCommentsFromServer() {
         $.get(this.props.url).then(
             (data) => {
                 this.setState({data: data});
@@ -43,7 +42,7 @@ var CommentBox = React.createClass({
             }
         );
     },
-    handleCommentSubmit: function (comment) {
+    handleCommentSubmit(comment) {
         var comments = this.state.data;
         // Optimistically set an id on the new comment. It will be replaced by an
         // id generated by the server. In a production application you would likely
@@ -66,28 +65,28 @@ var CommentBox = React.createClass({
             }.bind(this)
         });
     },
-    getInitialState: function () {
+    getInitialState() {
         return {data: this.props.comments};
     },
-    componentDidMount: function () {
+    componentDidMount() {
         this.loadCommentsFromServer();
         setInterval(this.loadCommentsFromServer, this.props.pollInterval);
     },
-    render: function () {
+    render() {
         return templates.commentBox.apply(this, [CommentList, CommentForm]);
     }
 });
 
 var CommentList = React.createClass({
     displayName: 'CommentList',
-    render: function () {
+    render() {
         return templates.commentList.apply(this, [Comment]);
     }
 });
 
 var CommentForm = React.createClass({
     displayName: 'CommentForm',
-    getInitialState: function () {
+    getInitialState() {
         // Define the rules and custom messages for each field.
         this.validatorTypes = schemas.commentForm;
 
@@ -98,7 +97,7 @@ var CommentForm = React.createClass({
      *
      * @param {Event} e
      */
-    activateValidation: function(e) {
+    activateValidation(e) {
         strategy.activateRule(this.validatorTypes, e.target.name);
         this.props.handleValidation(e.target.name)(e);
     },
@@ -107,7 +106,7 @@ var CommentForm = React.createClass({
      *
      * @param {Event} e
      */
-    handleChange: function (e) {
+    handleChange(e) {
         var state = {};
         state[e.target.name] = e.target.value;
 
@@ -120,7 +119,7 @@ var CommentForm = React.createClass({
      *
      * @param {Event} e
      */
-    handleSubmit: function (e) {
+    handleSubmit(e) {
         e.preventDefault();
 
         this.props.validate((error) => {
@@ -131,13 +130,11 @@ var CommentForm = React.createClass({
             }
         });
     },
-    getValidatorData: function () {
+    getValidatorData() {
         return this.state;
     },
-    getClasses: function (field) {
-        return classNames({
-            'has-error': !this.props.isValid(field)
-        });
+    getClassName(field) {
+        return this.props.isValid(field) ? '' : 'has-error';
     },
     render: templates.commentForm
 });

components/strategy.js

@@ -2,7 +2,7 @@
  * 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
+ * @see https://jurassix.gitbooks.io/docs-react-validation-mixin/content/overview/strategies.html
  */
 
 'use strict';
@@ -130,9 +130,19 @@ module.exports = {
                     resolve();
                 },
                 () => {
-                    reject(validator.errors.all());
+                    var e = new this.Error('A validation error occurred');
+                    e.errors = validator.errors.all();
+
+                    reject(e);
                 }
             );
         });
-    }
+    },
+    /**
+     * Extension of the built-in Error. Created by validateServer when validation fails.
+     * Exists so that middleware can check it with instanceof: if (err instanceof strategy.Error)
+     *
+     * @property {Object} errors Contains the error messages by field name.
+     */
+    Error: class extends Error {}
 };

components/templates.jsx

@@ -1,7 +1,7 @@
 var React = require('react');
 
 module.exports = {
-    comment: function () {
+    comment() {
         return (
             <div className="comment">
                 <h2 className="commentAuthor">
@@ -11,7 +11,7 @@ module.exports = {
             </div>
         );
     },
-    commentBox: function (CommentList, CommentForm) {
+    commentBox(CommentList, CommentForm) {
         return (
             <div className="commentBox">
                 <h1>Comments</h1>
@@ -20,7 +20,7 @@ module.exports = {
             </div>
         );
     },
-    commentList: function (Comment) {
+    commentList(Comment) {
         var commentNodes = this.props.data.map(function(comment) {
             return (
                 <Comment author={comment.author} key={comment.id}>
@@ -35,7 +35,7 @@ module.exports = {
             </div>
         );
     },
-    commentForm: function () {
+    commentForm() {
         function renderErrors(messages) {
             if (messages.length) {
                 messages = messages.map((message) => <li>{message}</li>);
@@ -51,7 +51,7 @@ module.exports = {
                         type="text"
                         placeholder="Your name"
                         name="author"
-                        className={this.getClasses('author')}
+                        className={this.getClassName('author')}
                         value={this.state.author}
                         onChange={this.handleChange}
                         onBlur={this.activateValidation}
@@ -65,7 +65,7 @@ module.exports = {
                         type="text"
                         placeholder="Say something..."
                         name="text"
-                        className={this.getClasses('text')}
+                        className={this.getClassName('text')}
                         value={this.state.text}
                         onChange={this.handleChange}
                         onBlur={this.activateValidation}

package.json

@@ -5,7 +5,6 @@
   "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",

server.js

@@ -37,7 +37,6 @@ app.use(express.static(path.join(__dirname, 'public')));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({extended: true}));
 
-
 app.get('/', function(req, res) {
   fs.readFile(COMMENTS_FILE, function(err, data) {
     if (err) {
@@ -74,7 +73,8 @@ app.get('/api/comments', function(req, res) {
   });
 });
 
-app.post('/api/comments', function(req, res) {
+app.post('/api/comments', function(req, res, next) {
+  // Validate the request and if it fails, call the error handler
   strategy.validateServer(req.body, schemas.commentForm).then(() => {
     fs.readFile(COMMENTS_FILE, function(err, data) {
       if (err) {
@@ -100,12 +100,20 @@ app.post('/api/comments', function(req, res) {
       });
     });
   })
-  .catch((errors) => {
-    // Handle validation errors
-    res.status(400).json(errors);
-  });
+  .catch(next);
 });
 
+/**
+ * If a validation error, output a 400 JSON response containing the error messages.
+ * Otherwise, use the default error handler.
+ */
+app.use(function(err, req, res, next) {
+  if (err instanceof strategy.Error) {
+    res.status(400).json(err.errors);
+  } else {
+    next(err, req, res);
+  }
+});
 
 app.listen(app.get('port'), function() {
   console.log('Server started: http://localhost:' + app.get('port') + '/');