title: In react-redux-form, how to disable submit button until all required field are not filled up
body: <p>working on a react app <a href="http://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example" rel="nofollow noreferrer">from this tutorial</a>, I require a library which handle form and validation and following 2 library comes in the most search results </p>
  
  <ol>
  <li><a href="https://redux-form.com/7.1.2/" rel="nofollow noreferrer">redux-form</a></li>
  <li><a href="https://davidkpiano.github.io/react-redux-form/docs/api/Form.html" rel="nofollow noreferrer">react-redux-form</a></li>
  </ol>
  
  <p>First of all, not sure which need to use so tried the later one with following steps </p>
  
  <p>Please check the <strong><a href="https://stackblitz.com/edit/react-svrw4x?file=App.js" rel="nofollow noreferrer">demo here</a></strong></p>
  
  <p>1) use <code>createForms()</code> in <code>combineReducers</code> in <em>reducers.js</em></p>
  
  <pre><code>const initialUserState = {
    firstName: '',
    lastName: '',
    userName: '',
    email: '',
    password: '',
    confirmPassword: ''
  };
  
  const rootReducer = combineReducers({
      ...createForms({
          user: initialUserState
      })
  });
  </code></pre>
  
  <p>2) in <em>RegisterPage.js</em> I have used  and  Component to create form </p>
  
  <pre><code>class RegisterPage extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        user: {
          firstName: '',
          lastName: '',
          username: '',
          email: '',
          password: '',
          confirmPassword: ''
        },
        submitted: false
      };
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    handleChange(event) {
      const { name, value } = event.target;
      console.log(`handleChange called =&gt; name ${name}, value: ${value}`);
      const { user } = this.state;
      this.setState({
        user: {
          ...user,
          [name]: value
        }
      });
    }
  
    handleSubmit(user) {
      console.log("handleSubmit state", this.state);
      this.setState({ submitted: true });
      const { user } = this.state;
      console.log("user", user);
      const { dispatch } = this.props;
      dispatch(userActions.register(user));
    }
  
    render() {
      return (
        &lt;div className="col-md-6 col-md-offset-3"&gt;
          &lt;h2&gt;Register&lt;/h2&gt;
          &lt;Form model="user" onSubmit={(user) =&gt; this.handleSubmit(user)} &gt;
            &lt;div className="form-group"&gt;
              &lt;label htmlFor="firstName"&gt;First Name&lt;/label&gt;
              &lt;Control.text
                id="firstName"
                className="form-control"
                model=".firstName"
                onChange={this.handleChange}
                validators={{ required: isRequired, maxLength: maxLength(50) }}
                validateOn="blur"
              /&gt;
              &lt;Errors
                model=".firstName"
                className="errors text-danger"
                show="touched"
                messages={{
                  required: 'Please provide First Name.',
                  maxLength: 'Maximum length can be 50 characters.'
                }}
              /&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
              &lt;label htmlFor="lastName"&gt;Last Name&lt;/label&gt;
              &lt;Control.text className="form-control" model=".lastName" onChange={this.handleChange} /&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
              &lt;label htmlFor="username"&gt;Username&lt;/label&gt;
              &lt;Control.text className="form-control" model=".username" onChange={this.handleChange} /&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
              &lt;label htmlFor="firstName"&gt;Email Address&lt;/label&gt;
              &lt;Control.text className="form-control" model=".email" onChange={this.handleChange} /&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
              &lt;label htmlFor="password"&gt;Password&lt;/label&gt;
              &lt;Control type="password" className="form-control" model=".password" onChange={this.handleChange} /&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
              &lt;label htmlFor="confirmPassword"&gt;Confirm Password&lt;/label&gt;
              &lt;Control type="password" id="confirmPassword" className="form-control" model=".confirmPassword" onChange={this.handleChange} /&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
              &lt;button type="submit" className="btn btn-primary" &gt;Register&lt;/button&gt;
            &lt;/div&gt;
          &lt;/Form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const connectedRegisterPage = connect()(RegisterPage);
  export { connectedRegisterPage as RegisterPage };
  </code></pre>
  
  <p>and when I click on submit button, the state changed to <em>"USER_REGISTER_REQUEST"</em>  state but it adds the additional property in user data as following </p>
  
  <pre><code>user: {
  confirmPassword : ""
  email: ""
  firstName: ""
  lastName: ""
  password: ""
  user.firstName: "foo" &lt;&lt; added extra property
  username: ""
  </code></pre>
  
  <p>So my collective queries are (Please allow me to ask similar question in one post, request you to not to downvote, they are all closely-related )</p>
  
  <ol>
  <li><p>Why do we need to define <code>this.state = { user : {} }</code> again in RegisterPage <code>constructor()</code> when we have already define as <code>initialUserState</code> in <code>combineReducer</code>. 
  I am not completely understanding this, Please help me.</p></li>
  <li><p>How to disable submit button until all required field are not filled up? calling from angular background, we use <code>ng-pristine</code>, <code>ng-touched</code>, <code>ng-valid</code> and many other directives to check the form field and write an expression in <code>ng-disabled</code> to disabled submit button. </p></li>
  </ol>
  
  <p>so does that similar functionality can be implemented in react?</p>
  
  <ol start="3">
  <li><p>Also checked in console that each time focus/blur state is being called unnecessarily <code>(type: "rrf/focus")</code>. How to prevent them or this is normal react behavior and does not impact our page in general?  </p></li>
  <li><p>Why is this adding additional data in user object while submit?</p></li>
  <li><p>Which library is more user-friendly from above?</p></li>
  </ol>