score:28

Accepted answer

@djheru your solution is correct because formik sets touched flags on blur event instead of on change. here is formik author comment about this: you have to call formiks handleblur to notify formik that blur event has been triggered - so yes, these handlers are needed.

score:25

i got it working by accessing the handleblur function that's passed in the render function argument, and adding that as an onblur handler for each of the form elements. not sure if that's needed because i'm using react-bootstrap form components, but the react-bootstrap docs have a formik example, but the touched object was not getting updated.

(
    <formik
      validationschema={schema}
      onsubmit={submitform}
      initialvalues={{ name, email }}
      render={({
        handlesubmit,
        handlechange,
        handleblur, // handler for onblur event of form elements
        values,
        touched,
        errors,
      }) => {
        return (
          <form novalidate classname="mt-4" onsubmit={handlesubmit}>
            <form.row>
              <form.group as={col} controlid="namecontrol">
                <form.label>full name</form.label>
                <form.control
                  name="name"
                  required
                  value={values.name}
                  onchange={handlechange}
                  onblur={handleblur} // this apparently updates `touched`?
                  isvalid={touched.name && !errors.name}
                  isinvalid={touched.name && errors.name}
                  type="text"
                  placeholder="your child's name"
                />
                <form.control.feedback>looks good!</form.control.feedback>
                <form.control.feedback type="invalid">
                  {errors.name || 'please enter your child\'s name'}
                </form.control.feedback>
              </form.group>
            </form.row>

Related Query

More Query from same tag