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]

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]

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! 😃

[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>;

[povilass]

Think real example would be with warning, sync, and async.

1. You have a payment form with multiple text fields, field are normalized on blur and warning would tell that "Field was transliterated/whitelisted", Yes you can prevent a user from typing those but it is better to inform a user what you can not do than just no allow to type those because as a user I would be confused why I can not type some symbols.
2. When loading old initial data from before created data, I want to inform the user about old data and is it still relevant to use.

[jhumpohl]

Was just looking for a warning feature too. Its quite common when you have to do business validation that you need warnings.
In my current project we have to deal with production stages of animals. These production stages have predefined ranges. For some reasons the user needs to enter the current weight. It can happend that the animal gains weight faster or because of different reasons it has more time to grow then usually you cant validate hard on the predefined ranges.

If you have a range for eg. 200-400kg you validate hard for below 150kg and above 500kg. Between the difference you just want to show a warning to the user he is over the valid range. Because maybe he hits the wrong number. but he still can save these values.

[htr3n]

I would love to have this feature added too. Thanks.

[JavierLopezSCG]

Oh sheez this feature is what i'm looking for!! Any updates so far? BUMP

[rasmus-rudling]

Would love this feature as well!🙌

[poltor]

+1 for the issue.

[xdzurman]

+1

[ppozniak]

Going through a lot of pain now to do it in a sensible way. Would be a great feature.

Based off https://formik.org/docs/guides/form-submission Validating step is determining if Submission should happen, so maybe adding another step between that decides if Submission should happen?

Something like:

<Formik
  onError={({ errors, values }) => {
    // Check if errors include only warnings, i.e errors you want to ignore, or whatever you want
    // ...
   return false; // Block onSubmit
   return true; // Don't block onSubmit
  }}
/>

---

On the other hand it would be nice to have this happening automatically and yup adding support for non-critical errors, but that may be too much and out of scope.

[Samy0412]

+1

[TamirCode]

It seems to me that Formik is dead, does anyone know if react-final-form has this feature? Because someone mentioned earlier that redux forms have warnings and I think the creator of final form was the same one who worked on redux forms if I remember correctly.
Also let me know if react-hook-form can also achieve this, as I am seeking alternatives to formik

[povilass]

@TamirCode well I followed each form library and can say that formik, redux-forms and react-final-forms are all dead/without contributions to it. The react-final-forms creator is the same as redux-forms. redux-forms got warnings implemented but react-final-forms do not.

react-hook-form also doesn't have this but from discussions on react-hook-form/react-hook-form#1761 (comment) you can use it by creating this yourself, which also sucks.

[hovissimo]

An example of a warning for #389 (comment)

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

Generally, sometimes a specific form input can have non-obvious side effects and a validation warning would be an effective way to inform the user about those side effects.

Here's my specific example:
In our app there is a special "AccountOwner" role with special privileges and only one user can be assigned to this role at a time. When editing a User, selecting this special role has the side effect of also removing the role from whoever currently holds that role. To that end, we'd like to be able to include a validation warning that only appears when this special value is selected in the select input.

Could we re-architect our app around this and do away with the special role? Yes, technically, but that's completely infeasible. Having validation warnings similar to validation errors would be a nice way to address the issue. Our working alternative involves special case logic and form state, which is uncomfortable to say the least.

[SherifAshraf98]

Hi, I wanted to check in on the status of this issue. Our team needs this feature and we are keen to know if any progress has occurred.

Thanks!

[AnsurM]

Hi, would have been amazing if we had this feature! Over the years, this definitely looks like one of the most requested ones.
@jaredpalmer any specific reasons why we can't proceed with this please? 😄

[belizar]

Hi, any updated on this one? I just had the same issue this week.