title: Redux Form 7.4.2 , How to prevent form submit on component render and showing errors
body: <p>Im using <a href="https://redux-form.com/7.4.2/docs/gettingstarted.md/" rel="nofollow noreferrer">reduxForm 7.4.2</a> , working with client side validation on simple form.</p>
  
  <p>The form is being submitted on page load and shows error like below : </p>
  
  <p><a href="https://i.stack.imgur.com/mqt4W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mqt4W.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>I want to prevent form being submitted on page load and show errors
    only when users click Submit button</p>
  </blockquote>
  
  <p>Here is the form component using reduxForm : </p>
  
  <pre><code>import React from 'react'
  import { Field, reduxForm } from 'redux-form'
  
  const renderField = ({ input, label, type, meta: { touched, error, warning } }) =&gt; {
    console.log(error);
    return(
      &lt;div className="form-group"&gt;
        &lt;label&gt;{label}&lt;/label&gt;
          &lt;input {...input} placeholder={label} type={type} className="form-control" /&gt;
          {error &amp;&amp; &lt;div className="invalid-feedback d-block"&gt;{error}&lt;/div&gt;}
  
      &lt;/div&gt;
    )
  }
  
  
  
  
  const validate = values =&gt; {
      const errors = {}
      if (!values.name) {
        errors.name = 'Name is Required'
      } else if (values.name.length &lt; 2) {
        errors.name = 'Must be 2 characters or more'
      }
      if (!values.email) {
        errors.email = 'Email is Required'
      } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
        errors.email = 'Invalid email address'
      }
      if (!values.password) {
        errors.password = 'Password Required'
      } else if (values.password.length &lt; 6) {
        errors.password = 'Password must be 6 characters'
      }
      return errors
    }
  
  const Form1Child=(props)=&gt;{
    const { handleSubmit, pristine, reset, submitting } = props
    return (
      &lt;form onSubmit={handleSubmit} className="needs-validation" noValidate&gt;
        &lt;Field name="name" type="text" component={renderField} label="Name"/&gt;
        &lt;Field name="email" type="email" component={renderField} label="Email"/&gt;
        &lt;Field name="password" type="password" component={renderField} label="Password"/&gt;
        &lt;div&gt;
          &lt;button className="btn btn-primary" type="submit" disabled={submitting}&gt;Submit&lt;/button&gt;
          &lt;button className="btn btn-default" type="button" disabled={pristine || submitting} onClick={reset}&gt;Clear Values&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    )
  }
  
  export default reduxForm({
      form: 'form1',
      validate 
    })(Form1Child)
  </code></pre>
  
  <p>Here is the parent component : </p>
  
  <pre><code>import React, { Component } from 'react'
  import Form1Child from './Form1Child';
  
  class Form1 extends Component {
      constructor(){
          super();
          this.state={
  
          }
      }
  
      handleSubmit=values=&gt;{
          alert(JSON.stringify(values));
      }
  
    render() {
      return (
        &lt;Form1Child onSubmit={this.handleSubmit}/&gt;
      )
    }
  }
  export default Form1;
  </code></pre>