Implementing validation in a form

The last part of our Redux Form implementation is the validation. Using the previous recipe, let's add validation of the input task.

How to do it...

The validations are needed in any form, so let's add some validations to our fields:

1. First, we need to modify our TodoForm.jsx and we need to create a validate function, where we need to validate if our task is not empty. We then need to create a renderError method to render our error message if we try to add an empty task, as shown in the following code:

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import './TodoForm.css';

class TodoForm extends Component {
renderInput = ({ input }) => <input {...input} type="text" />;

onSubmit = values => {
const { addTask, dispatch, reset } = this.props;

// Resetting our form...
dispatch(reset('todo'));

addTask(values);
  }

renderError(field) {
const { meta: { submitFailed, error } } = field;

if (submitFailed &amp...