show validation errors

odedre · Jan 24, 2016 · 2e87ccd · 2e87ccd
1 parent d94d07b
commit 2e87ccd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git 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,25 +10,33 @@ 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">
             {title.touched ? title.error : ''}
           </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
@@ -0,0 +1,3 @@
+form a {
+  margin-left: 5px;
+}