VeeValidate allows you to create logical forms with the
ValidationObserver component, as it can be nested and controlled by parent observers. Although recommended, you don't have to use the
The following are some common examples where you would have multiple forms in the same component.
Same Page Forms
You can have multiple forms in the same page, for example a sign up/sign in page with both forms.
Having multiple forms in the same page is messy, try to avoid that and refactor your forms into form components instead if your app has too many forms.
The native HTML
form tag doesn't allow you to nest other
form tags as children, and in reality the need for nested forms is rather rare.
form tags, you can create logically nested forms.
Tabbed forms structure isn't special per say, they are not that different from the last example. But the caveat is that you want to maintain the validation state even if the provider is hidden.
This is when
persist prop comes into play. This tells each parent observer to "remember" the state of its direction provider children, so when they are rendered next time they will get their state back.
Ideally in this example you wouldn't pass a step unless the current active set is valid. But they can go back freely to update their previous inputs.
Note that we don't need to use nested observers a lot here, they are only useful if you want to "group" some providers in a larger form structure.