title: React final-form I want to handleSubmit only if all fields are valid
body: <p>I have setup a contact form with react-final-form. The problem is that I don't really understand how to allow submitting form only when all fields are valid. </p>
  
  <p>Right now my form does the data fetch and shows errors underneath the fields either when they are empty or when e-mail address is not valid. </p>
  
  <p>As a base for my react-final-form I used code from <a href="https://codesandbox.io/s/yk1zx56y5j" rel="nofollow noreferrer">this sandbox</a>. 
  Also I don't really understand what is the difference between <code>onSubmit</code> in <code>&lt;Form/&gt;</code> and <code>onSumbit</code> in <code>&lt;form&gt;</code>. </p>
  
  <p><strong>Question 1. : How to allow handleSubmit only if all Fields are valid?</strong></p>
  
  <p><strong>Question 2. : What is the difference between both onSubmit properties?</strong></p>
  
  <p>Here is my code : </p>
  
  <pre><code>import React from 'react';
  import { Form, Field } from "react-final-form";
  
  const sleep = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
  
  const onSubmit = async values =&gt; {
    await sleep(300);
    window.alert(JSON.stringify(values, 0, 2));
  };
  
  export class ContactPage extends React.Component {
    constructor(props) {
      super(props);
      this.handleSubmit=this.handleSubmit.bind(this);
    }
  
  handleSubmit(e) {
    e.preventDefault();
    console.log(this.firstName.value);
  
    //Setting up values for fetch body
    const firstName = this.firstName.value;
    const email = this.email.value;
    const subject = this.subject.value;
    const message = this.message.value;
  
    fetch('/contact/send', {
      method:'POST',
      headers:{
        'Accept':'application/json, text/plain, */*',
        'Content-Type':'application/json'
      },
      body:JSON.stringify({
        firstName:firstName,
        email:email,
        subject:subject,
        message:message,
      }),
    })
    .then(res=&gt;res.json())
    .then(console.log('here'))
    .then(data=&gt;console.log(data))
    .catch(err=&gt;console.log(err));
  
  //Cleaning up data from form
    this.firstName.value="";
    this.email.value="";
    this.subject.value="";
    this.message.value="";
  };
  
   render() {
      return (
        &lt;div className="contact"&gt;
          &lt;div className="contact__form"&gt;
            &lt;Form
        onSubmit={onSubmit}
        validate={values =&gt; {
          const errors = {};
          if (!values.firstName) {
            errors.firstName = "Required";
          }
          if (!values.subject) {
            errors.subject = "Required";
          }
          if (!values.email) {
            errors.email = "Required";
          } else if(!values.email.match( /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)) {
            errors.email = "Please enter a valid e-mail adress"
          }
          if (!values.message) {
            errors.message = "Required";
          }
          return errors;
        }}
        render={({ handleSubmit, submitting, values}) =&gt; (
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;Field name="firstName"&gt;
              {({ input, meta }) =&gt; (
                &lt;div&gt;
                  &lt;input {...input}
                    type="text"
                    placeholder="Name"
                    ref={(ref) =&gt; {this.firstName = ref}}
                  /&gt;
                  {meta.error &amp;&amp; meta.touched &amp;&amp; &lt;span&gt;{meta.error}&lt;/span&gt;}
                &lt;/div&gt;
              )}
            &lt;/Field&gt;
            &lt;Field name="subject"&gt;
              {({ input, meta }) =&gt; (
                &lt;div&gt;
                  &lt;input {...input}
                    type="text"
                    placeholder="Subject"
                    ref={(ref)=&gt;{this.subject = ref}}
                  /&gt;
                  {meta.error &amp;&amp; meta.touched &amp;&amp; &lt;span&gt;{meta.error}&lt;/span&gt;}
                &lt;/div&gt;
              )}
            &lt;/Field&gt;
            &lt;Field name="email"&gt;
              {({ input, meta }) =&gt; (
                &lt;div&gt;
                  &lt;input {...input}
                    type="email"
                    placeholder="E-mail"
                    ref={(ref) =&gt; {this.email = ref}}
                  /&gt;
                  {meta.error &amp;&amp; meta.touched &amp;&amp; &lt;span&gt;{meta.error}&lt;/span&gt;}
                &lt;/div&gt;
              )}
            &lt;/Field&gt;
            &lt;Field name="message"&gt;
              {({ input, meta }) =&gt; (
                &lt;div&gt;
                  &lt;textarea {...input}
                    type="text"
                    placeholder="Message"
                    ref={(ref) =&gt; {this.message = ref}}
                  /&gt;
                  {meta.error &amp;&amp; meta.touched &amp;&amp; &lt;span&gt;{meta.error}&lt;/span&gt;}
                &lt;/div&gt;
              )}
            &lt;/Field&gt;
            &lt;div className="buttons"&gt;
              &lt;button type="submit" disabled={submitting}&gt;
                Submit
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        )}
      /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default (ContactPage);
  </code></pre>