Fields are not marked as touched during submission in Formik

Active3 hr before
Viewed126 times

4 Answers


Cannot get validation only to fire for Antd form with Formik - errored fields only show when actually trying to submit , How to ensure a <select> form field is submitted when it is disabled? ,This question was removed from Stack Overflow for reasons of moderation. Please refer to the help center for possible explanations why a question might be removed.

 Pretag team - issue, fix, solve, resolve

Click on the Submit button and look at the Formik state. Email is validated by Yup and has error and is touched. Age is validated at the field and has an error but is NOT touched.,In our product we use validationSchema to validate our form but we also allow customers to add their own form fields to it. Since we have no idea what their validation will be it can't be included in our Yup validation, so they need to validate at the Field level. When the form is submitted Formik shows the field as invalid but not as touched like it does with validationSchema.,Fields with validate don't get marked as touched so the error isn't shown as you can see below. Email is Yup validation and Age field validation.

props = {
   "values": {
      "email": ""
   "errors": {
      "age": "Age is required",
      "email": "Required"
   "touched": {
      "email": true
   "isSubmitting": false,
   "isValidating": false,
   "submitCount": 1,
   "dirty": false,
   "isValid": false,
   "initialValues": {
      "email": ""
   "validateOnChange": true,
   "validateOnBlur": true
load more v

While our contact form works, it’s not quite feature-complete; users can submit it, but it doesn’t tell them which (if any) fields are required.,We pass an id and name HTML attribute that matches the property we defined in initialValues,Like errors and values, Formik keeps track of which fields have been visited. It stores this information in an object called touched that also mirrors the shape of values/initialValues. The keys of touched are the field names, and the values of touched are booleans true/false.

 npx create - react - app my - app
load more v

On submit, Formik should continue to mark ALL the keys in initialValues as touched.,Formik state after submit is clicked and the input field is not changed by the user. As you can see the error message is visible and touched is automatically set., Ask questionssetFieldValue to undefined deletes the value from values and prevents errors from showing / touched being updated on submit

 Pretag team - issue, fix, solve, resolve

Other "fields-undefined" queries related to "Fields are not marked as touched during submission in Formik"