From 2e87ccd3bb73872182a91ea701bbf4687307e6e1 Mon Sep 17 00:00:00 2001
From: stephen grider <ste.grider@gmail.com>
Date: Sun, 24 Jan 2016 15:50:42 -0800
Subject: [PATCH] show validation errors

---
 blog/src/components/posts_new.js | 21 ++++++++++++++++++---
 blog/style/style.css             |  3 +++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/blog/src/components/posts_new.js b/blog/src/components/posts_new.js
index ce706182..246b6c72 100644
--- a/blog/src/components/posts_new.js
+++ b/blog/src/components/posts_new.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { reduxForm } from 'redux-form';
 import { createPost } from '../actions/index';
+import { Link } from 'react-router';
 
 class PostsNew extends Component {
   render() {
@@ -9,7 +10,8 @@ class PostsNew extends Component {
     return (
       <form onSubmit={handleSubmit(this.props.createPost)}>
         <h3>Create A New Post</h3>
-        <div className="form-group">
+
+        <div className={`form-group ${title.touched && title.invalid ? 'has-danger' : ''}`}>
           <label>Title</label>
           <input type="text" className="form-control" {...title} />
           <div className="text-help">
@@ -17,17 +19,24 @@ class PostsNew extends Component {
           </div>
         </div>
 
-        <div className="form-group">
+        <div className={`form-group ${categories.touched && categories.invalid ? 'has-danger' : ''}`}>
           <label>Categories</label>
           <input type="text" className="form-control" {...categories} />
+          <div className="text-help">
+            {categories.touched ? categories.error : ''}
+          </div>
         </div>
 
-        <div className="form-group">
+        <div className={`form-group ${content.touched && content.invalid ? 'has-danger' : ''}`}>
           <label>Content</label>
           <textarea className="form-control" {...content} />
+          <div className="text-help">
+            {content.touched ? content.error : ''}
+          </div>
         </div>
 
         <button type="submit" className="btn btn-primary">Submit</button>
+        <Link to="/" className="btn btn-danger">Cancel</Link>
       </form>
     );
   }
@@ -39,6 +48,12 @@ function validate(values) {
   if (!values.title) {
     errors.title = 'Enter a username';
   }
+  if (!values.categories) {
+    errors.categories = 'Enter categories';
+  }
+  if(!values.content) {
+    errors.content = 'Enter some content';
+  }
 
   return errors;
 }
diff --git a/blog/style/style.css b/blog/style/style.css
index e69de29b..ab51de76 100644
--- a/blog/style/style.css
+++ b/blog/style/style.css
@@ -0,0 +1,3 @@
+form a {
+  margin-left: 5px;
+}