The Redux Form validation is not working

Question

I am new in react. Now if I am trying to put value in input fields, but not being able to do that showing blocked. Also no validation happening. Any suggestion will be appreciated. Please feel free to ask if you need any more information.

package.js file

"dependencies": {
    "axios": "^0.17.1",
    "react": "^16.0.0",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-form": "^7.1.2",
    "redux-thunk": "^2.2.0"
  }

reducer/index.js

import {combineReducers} from 'redux';
import {reducer as formReducer} from 'redux-form';
const rootReducer = combineReducers({
    form: formReducer
});

export default rootReducer;

root/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import {BrowserRouter, Route} from 'react-router-dom';
import reduxThunk from 'redux-thunk';

import reducers from './reducers';

import App from './components/app';
import Header from './components/main/header';
import Footer from './components/main/footer';
import Dashboard from './components/main/dashboard';
import Signin from './components/auth/signin';
import Signup from './components/auth/signup';
import About from './components/main/about';
import Contact from './components/main/contact';
import { reducer } from 'redux-form';

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);

ReactDOM.render(    
        <Provider store={createStoreWithMiddleware(reducer)}>
            <BrowserRouter>
                <div className="container">
                    <Header />
                    <Route path="/" component={App} />
                    <Route exact path="/" component={Dashboard} />
                    <Route path="/signin" component={Signin} />
                    <Route path="/signup" component={Signup} />
                    <Route path="/about" component={About} />
                    <Route path="/contact" component={Contact} />
                    <Footer />
                </div>
            </BrowserRouter>
        </Provider>
,document.getElementById('root')
);

components/signin.js

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

class Signin extends Component{

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

    onFormSubmit(values){
        console.log('test');

        event.preventDefault();
    }
    render(){
        const {handleSubmit} = this.props;
        return(
            <div>
                <form onSubmit={handleSubmit(this.onFormSubmit.bind(this))}>
                    <Field 
                        label="Enter your email"
                        name="email"
                        type="text"
                        placeholder="enter email ex@..example@empl.com"
                        component={this.renderCommonInputField}
                    />
                    <Field 
                        label="Enter your password"
                        name="password"
                        type="password"
                        placeholder="enter your password"
                        component={this.renderCommonInputField}
                    />                    
                    <button type="submit" className="btn btn-default">Submit</button>
                </form>
            </div>
        );
    }
}
function validate(values){
    const errors = {}
    if(!values.email){
        errors.email = "Email is required"
    }
    if(!values.password){
        errors.password = "Password is required"
    }
    return errors;
}
export default reduxForm({
    form: 'signinform',
    validate
})(Signin);

Answer 1

UPDATED:

Your problems is a little mistake when calling createStoreWithMiddleware on index.js. The param should be reducers and not reducer.

Replace: <Provider store={createStoreWithMiddleware(reducer)}>.

By: <Provider store={createStoreWithMiddleware(reducers)}>