title: Different yup validation modes for different inputs with react
body: <p>I want to have different validation modes for different inputs. Currently, the form validation uses Yup with the <code>mode: &quot;onTouched&quot;</code>, but the problem is this mode applies to all inputs in the form.</p>
  <p>I've built a demo with the same principles to demonstrate this: <a href="https://codesandbox.io/s/react-playground-forked-8qb0k?file=/Pokemon.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-playground-forked-8qb0k?file=/Pokemon.js</a> - if you click in any of the 2 inputs and then click away, the error will show (if validation fails that is). I want one of the inputs to not have an <code>onTouched</code> mode. How can this be achieved?</p>
  <p>Currently it's set up as follows:</p>
  <pre><code>  const schema = Yup.object().shape({
      name: Yup.string()
        .required(&quot;Required&quot;)
        .min(3, &quot;Enter at least 3 characters&quot;),
      test: Yup.string()
        .required(&quot;Required Test&quot;)
        .min(2, &quot;Enter at least 2 characters&quot;)
    });
    const {
      register,
      handleSubmit,
      setError,
      formState: { errors },
      trigger,
      setValue,
      watch,
      clearErrors
    } = useForm({
      resolver: yupResolver(schema),
      mode: &quot;onTouched&quot;
      // reValidateMode: &quot;onChange&quot;
    });
  </code></pre>
  <p>And the form:</p>
  <pre><code>&lt;form onSubmit={handleSubmit(onSubmit /*, onError*/)}&gt;
          &lt;input
            {...register(&quot;name&quot;, { required: true })}
            name=&quot;name&quot;
            placeholder=&quot;Enter a pokemon&quot;
            onChange={onNameChange}
          /&gt;
          {errors.name &amp;&amp; &lt;p&gt;{errors.name.message}&lt;/p&gt;}
          &lt;input
            {...register(&quot;test&quot;, { required: true })}
            name=&quot;test&quot;
            placeholder=&quot;test&quot;
          /&gt;
          {errors.test &amp;&amp; &lt;p&gt;{errors.test.message}&lt;/p&gt;}
          &lt;button type=&quot;submit&quot; onClick={onSubmit}&gt;
            Show Pokemon
          &lt;/button&gt;
          {errors.namey &amp;&amp; &lt;p&gt;{errors.namey.message}&lt;/p&gt;}
        &lt;/form&gt;
  </code></pre>
  <p>Thanks</p>