title: Yup validation for a non-required field
body: <p>I have a profile creation form in my project for which i am using react-hooks-form and yup library for validation.</p>
  <p>In the form there is one field named <strong>Github-Username</strong> which is optional. But i want to validate it if users enters the username and it should be more than 2 characters, something like that.</p>
  <pre><code>  const schema = yup.object().shape({
      company: yup.string().min(3).required(),
      website: yup.string(),
      location: yup.string().min(2).required(),
      skills: yup.string().min(3).required(),
      githubUsername: yup.string().min(3).nullable().notRequired(),
      bio: yup.string(),
    });
  
    const { register, handleSubmit, errors, touched } = useForm({
      resolver: yupResolver(schema),
    });
  </code></pre>
  <p>// Form Field</p>
  <pre><code>        &lt;Form.Group controlId=&quot;formBasicGusername&quot;&gt;
            &lt;Form.Label&gt;Github Username&lt;/Form.Label&gt;
            &lt;Form.Control
              type=&quot;text&quot;
              name=&quot;githubUsername&quot;
              ref={register}
            /&gt;
            &lt;span className=&quot;text-danger text-capitalize&quot;&gt;
              {errors.githubUsername?.message}
            &lt;/span&gt;
          &lt;/Form.Group&gt;
  </code></pre>
  <p>This is the schema i have written so far, which is not working for githubUsername. It showing the error if it's empty. I want to validate only if it's not empty. Any leads on this?</p>
  <p><a href="https://i.stack.imgur.com/MpkW5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MpkW5.png" alt="enter image description here" /></a></p>