title: How to Change Default Error Text in Yup/Formik?
body: <p>If I click on the email input field, the field says "Enter Your Email". This was set by me. However, during I'm typing,when the validation check isn't fulfilled, it says 'enter a valid email' something, which is a default, not written by me.</p>
  
  <p>In case of wrong password, since I am using .matches(), I get my desired text printed on the screen. How can I do so for email as well?</p>
  
  <p>Here's my Yup object:</p>
  
  <pre><code>const schema = Yup.object({
    email: Yup
      .string()
      .email()
      .required('Please Enter your Email'),
    password: Yup
      .string()
      .required('Please Enter your password')
      .matches(
        /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&amp;])[A-Za-z\d@$!%*#?&amp;]{8,}$/,
        "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character"
      )
  });
  </code></pre>
  
  <p>This is how my Formik component looks like:</p>
  
  <pre><code> &lt;Formik
              initialValues={{ email: '', password: '' }}
              onSubmit={(values, actions) =&gt; {
                setTimeout(() =&gt; {
                  alert(JSON.stringify(values, null, 2));
                  actions.setSubmitting(false);
                }, 1000);
              }}
              validationSchema={schema}
            &gt;
              {props =&gt; {
                const {
                  values: { email, password },
                  errors,
                  touched,
                  handleChange,
                  isValid,
                  setFieldTouched
                } = props;
                const change = (name: string, e: { persist: () =&gt; void; }) =&gt; {
                  e.persist();
                  handleChange(e);
                  setFieldTouched(name, true, false);
                };
                return (
                  &lt;form style={{ width: '100%' }} onSubmit={_ =&gt; alert('Submitted!')}&gt;
                    &lt;TextField
                      variant="outlined"
                      margin="normal"
                      id="email"
                      fullWidth
                      name="email"
                      helperText={touched.email ? errors.email : ""}
                      error={touched.email &amp;&amp; Boolean(errors.email)}
                      label="Email"      
                      value={email}
                      onChange={change.bind(null, "email")}
                    /&gt;
                    &lt;TextField
                      variant="outlined"
                      margin="normal"
                      fullWidth
                      id="password"
                      name="password"
                      helperText={touched.password ? errors.password : ""}
                      error={touched.password &amp;&amp; Boolean(errors.password)}
                      label="Password"
                      type="password"
                      value={password}
                      onChange={change.bind(null, "password")}
                    /&gt;
  &lt;/Formik&gt;
  </code></pre>
  
  <p>In Formik props, errors : An object containing error messages of the field.</p>
  
  <p><a href="https://i.stack.imgur.com/gEsZz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gEsZz.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/aqzrP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aqzrP.png" alt="enter image description here"></a></p>