jaredpalmer / formik

Build forms in React, without the tears 😭
https://formik.org
Apache License 2.0
33.98k stars 2.79k forks source link

Field component validate property add two optional parameters (field id, value) to function signature #1888

Open brauliodiez opened 5 years ago

brauliodiez commented 5 years ago

🚀 Feature request

Field component, validate

Current Behavior

Right now the validate function that is exposed in the Field component has the following signature:

validate?: (value: any) => undefined | string | Promise<any>

When integrating with validation libraries, it turns out that you in some cases you need to pass the whole values and the id of the field being edited (e.g. a generic password and password match field validation).

Right now this can be achieved by adding an inline function and repeating the id of the field for every field:

<Field name="email" validate={(value) =>validateField("email", value, values)} />

Desired Behavior

It would be great if this comes already informed in the validate function params (optional), we could just write a single function (helper or on top of the component) and just call:

{/* validateField function expects value, fieldId, values*/}
<Field name="email" validate={validateField} />

Suggested Solution

It would be great if the validate function could have the following signature

validate?: (value: any, fieldId? : string, values?: any) => undefined | string | Promise<any>

Or preparing this for future updates (see additional context section):

interface Context {
  values : any;
  fieldId: string;
  // Future enhancements e.g. Event Type
}
validate?: (value: any, context :  Context) => undefined | string | Promise<any>

Who does this impact? Who is this for?

This can be useful to integrate Formik with third party validation libraries (e.g. in our case we are the authors of Fonk (https://github.com/Lemoncode/fonk), we have already manage to build an adaptor for React Final Form, and we are working now on creating an adaptor for Formik.

Describe alternatives you've considered

Right now we will use the verbose option: repeat for every validate the step of adding a handler and manually call the Fonk validateField function informin the fieldId and values, we thought about solving this using currying, but values gets updated on every change, it won't work.

Additional context

React Final Form offers this two optional parameters, maybe it could be worth to include only a single extra param called "Context" or "Meta" where could be added more context information if needed (e.g. the event type that triggered the validation).

Johnrobmiller commented 3 years ago

I'm probably way too late, but I have a workaround for this:

Let's say that you have your own validate function named "customValidation(values, props)" where "props" is any other argument you want whose values exist outside of Formik, possibly as state variables somewhere else.. Then, you would do:

<Formik ... validate={(values) => customValidation(values, props)} ... />