Supply touched object to validation method

Feature

Current Behavior

Currently the validation method takes in as parameters the values from the form and props. In my current situation, I have to show an error on input A when input B has been interacted with but only if input A has been touched. Inside the validation method, there is no way to grab the information of the touched values and so it makes this type of validation really difficult.

Desired Behavior

Have access to the touched object in the validation method.

Suggested Solutions

Pass the touched object to the validation method.

• Formik Version: 0.11.11
• OS: Windows 10
• Node Version: 8.9.4
• Package Manager and version: npm 5.6.0

Opinions?

[hvolschenk]

Hiya,

There are definitely situations where this would be useful, for example:

I have a form with two fields, monthlyAmount and yearlyAmount. A user only needs to fill in one of the two.

If the user focuses on monthlyAmount, tabs off, and focuses yearlyAmount, and tabs off (without filling in any value in either) an error needs to be displayed in both. (monthlyAmount - Monthly, or, and yearlyAmount - Yearly amount required). This means I need to wait until both are touched before validating either.

However, if the user focuses on monthlyAmount, fills in an incorrect value, and tabs off, an error needs to be displayed immediately (monthylAmount - Enter a monthly value less than 100).

Here is a sample of the code that will work if I am supplied with touched in my validation method.

form.js

import { withFormik } from 'formik'

import Component from './component';

const validate = (values, props, touched) => {
  const errors = {};
  if (!values.monthlyAmount && touched.monthlyAmount && touched.yearlyAmount) {
    errors.monthlyAmount = 'Monthly, or';
  }
  if (!values.yearlyAmount && touched.monthlyAmount && touched.yearlyAmount) {
    errors.yearlyAmount = 'yearly amount is required';
  }
  if (values.monthlyAmount && values.monthlyAmount > 100 && touched.monthlyAmount) {
    errors.monthlyAmount = 'Enter a monthly value less than 100';
  }
  if (values.yearlyAmount && values.yearlyAmount > 100 && touched.yearlyAmount) {
    errors.yearlyAmount = 'Enter a yearly value less than 100';
  }
};

export default withFormik({ validate })(Component);

component.jsx

import React from 'react';

const Component = ({ errors, handleBlur, handleChange, handleSubmit, touched, values }) => (
  <form onSubmit={handleSubmit}>
    <input
      name="monthlyAmount"
      onBlur={handleBlur}
      onChange={handleChange}
      type="number"
      value={values.monthlyAmount}
    />
    <p>{touched.monthlyAmount && errors.monthlyAmount}</p>
    <input
      name="yearlyAmount"
      onBlur={handleBlur}
      onChange={handleChange}
      type="number"
      value={values.yearlyAmount}
    />
    <p>{touched.yearlyAmount && errors.yearlyAmount}</p>
  </form>
);

export default Component;

Maybe you can suggest a clean solution without using touched?

[jaredpalmer]

Right so why can’t you just do something like {touched.fieldA && touched.fieldB && errors.fieldB} ?