After form validation all errors disappear on any form value update

[justinobney]

This happens when you apply the validation from an API response rather than using client-side validation.

This is related to a similar issue when using serverValidation prop. If you have errors you can click the submit button to clear all the errors. Then it will allow you submit the form again

[alfonmga]

Hey Justin any progress on this? I think it would be great if a field validation error disappears after his field value is updated.

Example of correct behaviour (not possible at this moment with formik-semantic-ui):

[justinobney]

@alfonmga how are you adding validation errors? Are you using the imperative api? formikApi.setFieldError('firstName', 'Invalid Name');? If so, try adding the prop serverValidation to your form. I hate that name but was in a hurry. I have not finalized it or documented it yet. But the idea is that when you are setting the errors via an api response, you want the behavior you mentioned above.

See: https://github.com/turner-industries/formik-semantic-ui/blob/master/example/src/forms/SimpleForm.js#L40

[justinobney]

The reason this behavior exists without that prop, is because I am assuming the consumer is running their validation logic via the validate prop which runs after field values change.

[alfonmga]

@justinobney thanks for your quick response. Unfortunately looks like validationSchema prop doesn't work (validation logic is not running) when I'm passing serverValidation prop to my form. Is there anyway to make both them work together?

[justinobney]

I have thought of those 2 as mutually exclusive. Could you create a reproducible example of your form on codesandbox. Here is an example you can start from: https://codesandbox.io/s/4xvxoykx97

[alfonmga]

@justinobney Here's the CodeSandbox.io URL: https://codesandbox.io/s/7w51n0k10q.

As you can see, validationSchema is not running for some reason. It doesn't show any validation error when you submit the form.

If serverValidation form prop is removed then it works as expected but then we don't get this feature.

[justinobney]

@alfonmga I now see your use-case and I will look into it later today if I get a chance.

[justinobney]

In this case, it is interesting because desire is for both client side and server side validation. The issue comes where: 1) Client-side validations run on every loss of focus 2) Once there are no client-side validations, the form can submit 3) Server response can add field level validation errors 4) Losing focus of any field after that runs all client side validations, which are valid, removing all errors from the form

The main problem here is that a field can only have 1 error per fieldName so the particular library I am using cant distinguish from server validations and client validations (edited) I could add an API that differs from the built-in setFieldError(name..) that is considered fixed on blur. Perhaps setFieldErrorUntilVisited(name...) (PS: I hate that name)