Formik: Track warnings like errors

[jonathanj]

Currently a field is either invalid or valid. In most form-heavy applications there is a grey area where a value might be outside of some "known good" parameter but not necessarily invalid, resulting in a warning that doesn't affect form-validity but is still composed of validation functions. Extending this thinking, it's possible that fields might have a number of meta states (with errors and warnings being just two) that can be built out of validators. One such (real-world) example is a "visibility" state: Is some condition met (or not met)? Then this field (or group of fields) should have their visibility affected.

I filed a similar issue for redux-form (which already has warnings) a while ago but have since shied away from redux-form.

I think this could be implemented in a future proof way (while retaining backwards compatibility) by introducing a new setter function and a new render prop (an object mapping validation type keys error, warning, etc. to objects of validation results).

[jaredpalmer]

Can you give me an example of a warning? I have yet to truly see one in the wild.

[prichodko]

I think two base states are really touched and error. Everything else (e.g. visibility based on some condition) could be achieved with status.

[jonathanj]

@jaredpalmer In our form-heavy application we have cases where it's important we capture as much valid data upfront as possible but we're hesitant to outright declare some user input as invalid because the rules would be arbitrary ones made up by ourselves ("How long have you lived here?") and could prevent valid (but perhaps extreme) input from being submitted, a warning deals with "fat finger" cases like these quite well in my experience.

@prichodko Status sounds like it can only have one value which seems somewhat limiting? Is my assumption incorrect?

[cyoung-mspark]

I have an app form with a select list and one of the form options requires some additional notifications to the user. We were using redux-form's warning state to highlight a reminder to the user that selecting the option requires that they understand their choice. We could have handled it with an event listener but it was a nice way of putting that message in the form input feedback area.

[donysukardi]

Here's an example of a warning from our application

[bytasv]

@jaredpalmer any updates on this? I see PR is up and author has added tests. Just started using Formik and bumped into issue of missing warnings as they are needed for my usecase :)

[volodymyr-kushnir]

I need something like this as well.
In my case I use asynchronous validation to visit a URL that user inputs into the field to go and fetch a JSON to help populate some other fields. If I receive the data then it's all fine, but if I don't then I'd like to have an orange circle next to the input that'll have a hint on hover with a message like "URL 404'd, but that's okay, you can just type it all yourself". So users would expect some feedback and it can be either a warning if file not found or an error if it is found, but invalid in any way.
That's why I would expect validate to return { errors: {}, warnings: {} } instead of just errors (need to account for backwards compatibility here). #685 implements something similar, but slightly differently. Basically it sort of runs two separate checks (validate and warn) whereas I'd propose to have only one.
I could use my own state to manage this or I could work on the PR that implements the idea.
Any thoughts?

[donysukardi]

One of the reasons why I kept validate and warn separated is so that it's not introducing a breaking change, as validate currently only returns errors object.

The other reason is that it follows similar API as redux-form.

I chanced upon this example of warnings implementation on react-final-form which is quite interesting - https://codesandbox.io/s/m5qwxpr6o8. Perhaps we could achieve something like that without building in warnings mechanism in Formik itself.

[Andreyco]

Formik is very flexible. You can achieve this in many ways. I attempted to recreate warning like validation messages, here is the code https://codesandbox.io/s/xppooqx884

Edit: I see, errors block form submission.

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale[bot]]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[danielpowell4]

Difference between @Andreyco's implementation and redux-form is that warn in redux-form does not mark a form as invalid stopping submission

In redux-form as the name implies, a warning is just a notice that the user can then override. Allows for flexibility

[Jaikant]

+1 for the issue.

[jamime]

I have the requirement for info and warning validations on a project that I'm working on at the moment.

Example warning

Did you mean to select a date 6 months in the future?

[dmitov]

@jaredpalmer Let's reopen this! :)

[milkysingh]

@jaredpalmer it will be an awesome enhancement. Let's reopen this.

[annavlz]

well, need some warnings/information on a field without making it invalid and found this issue
So +1 to "it would be awesome to have warnings"

[CloudPower97]

@jaredpalmer Is this going to be a thing in the future? I'd like to see this feature implemented as well! :smiley:

[marya7]

I would also love this feature!

[vincerubinetti]

Fairly big shortcoming for what is supposed to be the go-to form management library. Formik might be "very flexible" and allow you to implement this on your own. But so is vanilla html/js; I'm using a library to save time.

Pretty sure there's enough upvotes here to say this should be more than an "enhancement". At the very least this issue should be reopened/re-considered.

[alexandernst]

Can we re-open this? @jaredpalmer
It seems like a feature that a lot of people are interested in.

[samrcwaters]

Agreed, I just ran into this same issue. Has anyone else found a workaround to show errors while still allowing form submissions?

[danielpowell4]

@samrcwaters Agreed, I just ran into this same issue. Has anyone else found a workaround to show errors while still allowing form submissions?

I just check if the field has been touched and treat it like anything I'd want to conditionally render based on a piece of state in React

Formik doesn't _really_ need to help here

Just like you don't need it to conditionally change input placeholders or hints like here in a no-context sample of a form field 😇

<FormEl>
  <FormikCheckboxGroup
    label="Custom Label"
    name="relational_ids"
    options={customOptionsFromProps}
    isDisabled={!customOptionsFromProps.length}
    hint={`${
      !anotherCustomThing ? "Select 'Other Field' to see options." : ""
    }`}
    values={values.relational_ids}
  />
</FormEl>;