import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

class PostsNew extends Component {
  renderField(field) {
    return (
      <div className="form-group">
        <label>{field.label}</label>
        <input
          className="form-control"
          type="text"
          {...field.input}
        />
      </div>
    );
  }

  renderPostField(field) {
    return(
      <div className="form-group">
        <label>{field.label}</label>
        <textarea
          className="form-control"
          type="textarea"
          {...field.input}
        />
      </div>
    );
  }

  render() {
    return (
      <form>
        <Field
          label="Title"
          name="title"
          component={this.renderField}
        />
        <Field
          label="Categories"
          name="categories"
          component={this.renderField}
        />
        <Field
          label="Post Content"
          name="content"
          component={this.renderPostField}
        />
      </form>
    );
  }
}

function validate(values) {
  const errors = {};

  // Validate the inputs from 'values'
  if (!values.title) {
    errors.title = "Enter a title!";
  }
  if (!values.categories) {
    errors.title = "Enter some !";
  }
  if (!values.content) {
    errors.title = "Enter a title!";
  }

  // if errors is empty, the form is fine to submit
  // if errors has any properties, redux form assumes form is invalid
  return errors;
}


export default reduxForm({
  validate,
  form: 'PostsNewForm'
})(PostsNew);

@@ -149,27 +149,61 @@
     
-return (%0A      %3Cdiv
+const %7B meta: %7B touched, error %7D %7D = field;%0A    const
  cla
@@ -200,34 +200,36 @@
  const className
-=%22
+ = %60
 form-group%22%3E%0A   
@@ -214,33 +214,121 @@
 me = %60form-group
-%22
+ $%7Btouched && error ? 'has-danger' : ''%7D%60;%0A%0A    return (%0A      %3Cdiv className=%7BclassName%7D
 %3E%0A        %3Clabel
@@ -449,32 +449,34 @@
 .input%7D%0A        
+  
 /%3E%0A      %3C/div%3E%0A
@@ -472,76 +472,195 @@
     
-%3C/div%3E%0A    );%0A  %7D%0A%0A  renderPostField(field) %7B%0A    return(%0A      %3Cdiv
+  %3Cdiv className=%22text-help%22%3E%0A          %7Btouched ? error : ''%7D%0A        %3C/div%3E%0A      %3C/div%3E%0A    );%0A  %7D%0A%0A  renderPostField(field) %7B%0A    const %7B meta: %7B touched, error %7D %7D = field;%0A    const
  cla
@@ -661,26 +661,28 @@
 st className
-=%22
+ = %60
 form-group%22%3E
@@ -679,17 +679,104 @@
 rm-group
-%22
+ $%7Btouched && error ? 'has-danger' : ''%7D%60;%0A%0A    return(%0A      %3Cdiv className=%7BclassName%7D
 %3E%0A      
@@ -912,32 +912,34 @@
 .input%7D%0A        
+  
 /%3E%0A      %3C/div%3E%0A
@@ -935,64 +935,238 @@
     
-%3C/div%3E%0A    );%0A  %7D%0A%0A  render() %7B%0A    return (%0A      %3Cform
+  %7Btouched ? error : ''%7D%0A      %3C/div%3E%0A    );%0A  %7D%0A%0A  onSubmit(values) %7B%0A    console.log(values);%0A  %7D%0A%0A  render() %7B%0A    const %7B handleSubmit %7D = this.props;%0A%0A    return (%0A      %3Cform onSubmit=%7BhandleSubmit(this.onSubmit.bind(this))%7D
 %3E%0A  
@@ -1518,24 +1518,98 @@
 %0A        /%3E%0A
+        %3Cbutton type=%22submit%22 className=%22btn btn-primary%22%3ESubmit%3C/button%3E%0A
       %3C/form
@@ -1808,37 +1808,42 @@
 s) %7B%0A    errors.
-title
+categories
  = %22Enter some !
@@ -1841,16 +1841,26 @@
 er some 
+categories
 !%22;%0A  %7D%0A
@@ -1887,37 +1887,39 @@
 t) %7B%0A    errors.
-title
+content
  = %22Enter a titl
@@ -1904,39 +1904,44 @@
 ontent = %22Enter 
-a title
+some content
 !%22;%0A  %7D%0A%0A  // if

Handle form submission and conditionally show error messages