How to stop auto validation when change attributes on a field

[convers39]

I want to disable all auto validation and only validate the form when the form is submitted.

I have set validateOnBlur, validateOnMount, validateOnChange all to false, but in my situation, it does not work.

I am using a toggle button to control the input type between 'text' and 'password' so that I can show/hide the user input on password. But every time when I click the toggle button the validation runs and shows the error message.

How can I stop the validation?

Here is my code and sandbox

type FormikSubmitHandler<V> = (value: object, actions: FormikHelpers<V>) => void
const loginSchema = Yup.object().shape({
  password: Yup.string().required('required')
})

const Login = () => {
  const [showPass, setShowPass] = useState(false)
  const handleSubmit: FormikSubmitHandler<FormikValues> = (
    values,
    actions
  ) => {
//...
  }
  return (
    <>
      <Formik
        initialValues={{ password: '' }}
        validationSchema={loginSchema}
        onSubmit={handleSubmit}
        validateOnBlur={false}
        validateOnMount={false}
        validateOnChange={false}
      >
        {({ isSubmitting, touched, setFieldError }) => {
          return (
            <Form>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <label>
                  password:
                  <Field name="password">
                    {({ field, form }) => (
                      <input
                        {...field}
                        type={showPass ? 'text' : 'password'}
                      />
                    )}
                  </Field>
                  <button
                    onClick={() => setShowPass(!showPass)}
                  >
                    {showPass ? '👀' : '🙈'}
                  </button>
                  {touched && (
                    <ErrorMessage name="password">
                      {(msg) => <p>{msg}</p>}
                    </ErrorMessage>
                  )}
                </label>
                <button
                  type="submit"
                  disabled={isSubmitting}
                >
                  submit
                </button>
              </div>
            </Form>
          )
        }}
      </Formik>
    </>
  )
}

[convers39]

not sure why it seems working on codesandbox, closing..

[convers39]

I see the problem here, the toggle button didnt specify a button type so it also trigger the form submit, after adding button type it works..