title: How to properly validate form values with react-final-form multiple screen?
body: <p>I'm using react-final-form together with material ui, mui-rff and yup for form validations.
  I have multiple screens or should I say WIZARD SCREENS each screen has HTML form elements input and radio button.</p>
  <p>all HTML form elements are required meaning they can't proceed to next screen unless user input data or click on it.</p>
  <p>At the moment I have 2 problems here.</p>
  <ol>
  <li>The next button is not working as expected. I expect when current screen has value <code>valid: false</code> in short has errors next button is disabled so can't proceed to next screen. when screen value <code>valid: true</code> can proceed to next screen.</li>
  <li>The form validation is doing advanced validation for the next screen without clicking next button. so validity value is always <code>valid:false</code>. That's what I have noticed.</li>
  </ol>
  <p>Here's my partial code, see codesandbox for full demo of this.</p>
  <pre><code>    import { Form } from &quot;react-final-form&quot;;
      import { makeValidate } from &quot;mui-rff&quot;;
      import * as yup from &quot;yup&quot;;
  
   
  
       const initialValues = {
          option: &quot;optionB&quot;,
          user: {
            fname: &quot;&quot;,
            lastname: &quot;&quot;,
            motto: &quot;&quot;,
            country: &quot;&quot;
          },
          status: &quot;&quot;
        };
      
        const validationSchema = yup.object({
          option: yup.string().required(&quot;option required&quot;),
          user: yup.object({
            fname: yup.string().required(&quot;fname required&quot;),
            lastname: yup.string().required(&quot;lastname required&quot;),
            motto: yup.string().required(&quot;motto required&quot;),
            country: yup.string().required(&quot;country required&quot;)
          }),
          status: yup.string().required(&quot;status required&quot;)
        });
      
        // makeValidate is a mui-rff function
        const validate = makeValidate(validationSchema);
  
  
  
         &lt;Form
         initialValues={initialValues}
         validate={validate}
         keepDirtyOnReinitialize
         initialValuesEqual={() =&gt; true}
         onSubmit={() =&gt; console.log(&quot;submitted&quot;)}
         render={({ handleSubmit, values, valid, errors }) =&gt; (
         &lt;form onSubmit={handleSubmit}&gt;                    
         &lt;Button
              disabled={activeStep === 0}
              onClick={handleBack}
              className={classes.backButton}
         &gt;
                            Back
                          &lt;/Button&gt;
                          &lt;Button
                            variant=&quot;contained&quot;
                            color=&quot;primary&quot;
                            disabled={!valid} 
  // normally if the current has no error &quot;valid&quot; becomes true , false otherwise so to disabled if valid is false, in short you can't proceed. 
                            this part is buggy not working at all.
                            onClick={handleNext}
                          &gt;
                            {activeStep === steps.length - 1 ? &quot;Finish&quot; : &quot;Next&quot;}
                          &lt;/Button&gt;
                     &lt;/form&gt;
                    )}
                  /&gt;
  
  
      --------------------------- screens ----------------------------------------------
    
  
    // screen 1
   import { Radios } from &quot;mui-rff&quot;;
   const Screen1 = () =&gt; {
   return (
         &lt;div&gt;
                 This is Screen1
             &lt;br /&gt;
             &lt;br /&gt;
             &lt;Radios
             label=&quot;select option&quot;
             name=&quot;option&quot;
             formControlProps={{ margin: &quot;none&quot; }}
             radioGroupProps={{ row: true }}
             data={[
             { label: &quot;optionA&quot;, value: &quot;optionA&quot; },
             { label: &quot;optionB&quot;, value: &quot;optionB&quot; },
             { label: &quot;optionC&quot;, value: &quot;optionC&quot; }
             ]}
              /&gt;
          &lt;/div&gt;
           );
      };
      
      // screen 2
      import { TextField } from &quot;mui-rff&quot;;
      const Screen2 = () =&gt; {
        return (
          &lt;div&gt;
            This is Screen2
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;TextField name=&quot;user.fname&quot; variant=&quot;outlined&quot; required={true} /&gt;
            &lt;TextField name=&quot;user.lastname&quot; variant=&quot;outlined&quot; required={true} /&gt;
            &lt;TextField name=&quot;user.motto&quot; variant=&quot;outlined&quot; required={true} /&gt;
            &lt;TextField name=&quot;user.country&quot; variant=&quot;outlined&quot; required={true} /&gt;
          &lt;/div&gt;
        );
      };
      
      // screen 3
      import { TextField } from &quot;mui-rff&quot;;
      const Screen3 = () =&gt; {
        return (
          &lt;div&gt;
            This is Screen3
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;TextField name=&quot;status&quot; variant=&quot;outlined&quot; required={true} /&gt;
          &lt;/div&gt;
        );
      };
  </code></pre>
  <p><a href="https://codesandbox.io/s/material-demo-forked-pox70?file=/demo.js" rel="nofollow noreferrer">codesandbox</a></p>
  <p>links:</p>
  <ul>
  <li><a href="https://github.com/lookfirst/mui-rff" rel="nofollow noreferrer">mui-rff</a></li>
  <li><a href="https://final-form.org/react" rel="nofollow noreferrer">react-final-form</a></li>
  <li><a href="https://github.com/jquense/yup" rel="nofollow noreferrer">yup</a></li>
  </ul>
  <p>I can confirmed yup validation is working well like you seen on this screenshot below.
  <a href="https://i.stack.imgur.com/CMyzM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CMyzM.jpg" alt="enter image description here" /></a></p>