Multi step form

[Shyghar]

Hi, I'm trying to build a form with multiple steps.

To validate partially the form I tryed more than one approach but they are not working. I'm trying to analize the invalid inputs and if some of them are in the current step I have to show the error. I'm not using the onInvalidSubmit because in this way when I change step I already have errors of the nearly shower inputs.

I tryed

1. using form.setError('fieldname') but the errors are displayed in the wrong way. I have some custom error messages but when I call the setError() the AvForm displayed the default one and I need my custom onces.

2. using form.validateInput('field1', 'field2') not working..

3. using form.validateOne('fieldname') not working too.. maybe this is not the right way to call it?

Did someone achieve something like this?

[GoPro16]

If your form has truely different defining steps I would either render 1 form with only the rendered steps at each stage or have multiple with the validation logic for each. Then have some state manager or HOC that contains all the form data.

This way you can still get the benefits of the onSubmit handlers and not having to go outside of your way to do things like this.

The only time the error message would show is if the field is marked as touched. So its possible you may be calling it in the wrong context. If you want to post a codesandbox I can assist in any recommendations.

[Shyghar]

Is somewhere some documentation about the functions form.validateInput() or form.validateOne? Some example are welcome too.

In this stage I cannot rewrite the full component because the validation is pretty complex and it go throw all the steps : (

[GoPro16]

Unfortunately there is no good documentation on the underlying validation that was built out. We recently created a new reactstrap form library leveraging formik. @availity/form.

We do plan to give this library one last cleanup effort before moving off of it as a whole. I would recommend looking at that new library as its more flexible in what you can hook into.

Example

This is just to demonstrate how you can create a custom validator. What I would do if you only want them to trigger when moving to the next step is just return true for those validate steps unless the next step button is triggered.

I would stay away from calling setError as its not part of the child context and its bad to hook into a ref like that when using forms as it breaks the whole validation workflow structure.

[GoPro16]

Closing this issue, you can re-open if you have any further issues.