Scroll user to first form error @submit

Describe the new feature you’d like

I’d love to see an option to scroll users to the first error input (if an error exists) when they submit a form. Also would like to optionally focus the input that has the error.

Looking at the docs, it looks like this can be done with some kind of custom form error handler, but it would really be appreciated if we could simply set an option like the following:

<FormulateForm
  :scroll-to-error="true"
  :focus-error="true"
>

This was also mentioned in issues #182

If you have a temporary solution to accomplish this, I imagine many others would benefit from it as well.

[acemir]

@titusdecali Nice feature request.

I also needed this feature in a project I was working on and I was able to accomplish this behavior after checking the hasValidationErrors result from a function triggered by @submit.raw as in the following example.

https://codepen.io/acemir/pen/LYZbozN

This approach has a downside because Element.scrollIntoView with the center option is not widely supported but a polyfill like scroll-into-view or scroll-behavior-polyfill can be used to overcome this limitation.

Either way it would be great to see this as a ready-to-use feature or as a plugin.

[justin-schroeder]

After more thought I agree this would be a great feature — although I think it falls pretty squarely in “plugin” territory. However, the plugin ecosystem for vue formulate doesn’t really exist yet, so I created a new project board called “Plugins” where we can stash good plugin ideas for the community to build out or the maintainers of the project. So we’ll keep this open and “kind of” on the road map.

I’ve been dreaming up lots of ways to kickstart that plugin ecosystem, so more on that to come.