Comments (9)
@a-trost there should be error class names applied to failing inputs.
I would imagine a method that queried the DOM by the error class css selector, grabbed the offset height of the first matching element from the document and then executed a window.scrollTo()
would do the trick.
from vue-formulate.
Phew, took a little too long to get to this one, but it has finally been resolved and will be published in 2.5. There is a new invalid-message
prop. The work-in-progress docs are here:
https://vueformulatecom-git-release-250.braid.vercel.app/guide/forms/#form-validation
from vue-formulate.
Thanks for the swift reply @justin-schroeder! I think a message like 'Not all fields are completely valid' is enough. Listing all individual errors (again as they are already shown below the individual fields) seems a bit overkill to me.
I'll have a look at the submit-raw event.
Thanks again!
from vue-formulate.
This is a great point @pimhooghiemstra. I can definitely see this being a use case a lot of users would run into, so making it easy absolutely falls within the purview of what we're trying to do here. From a heuristics and UX perspective, would you prefer a generalized message like "Not all the fields are complete and valid" or would you prefer listing all of the validation error messages?
Today
Also, just so you're able to move forward with your own project, there is a way to do this now that's a bit verbose, but not too bad. You can hook into the submit-raw
event and perform your own validation check.
<template>
<FormulateForm
@submit="sendResults"
@submit-raw="checkValidation"
:form-errors="errors"
>
<FormulateInput
name="email"
validation="required|email"
/>
<FormulateErrors />
<FormulateInput type="submit" />
</FormulateForm>
</template>
<script>
export default {
data () {
return {
errors: []
}
}
methods: {
sendResults (data) {
// Only when successful ...
},
async checkValidation (submission) {
// May or may not be successful
const hasErrors = await submission.hasValidationErrors()
if (hasErrors) {
this.errors.push('Not all fields have been filled out correctly')
} else {
this.errors = []
}
}
}
}
</script>
from vue-formulate.
@andrew-boyd That worked perfectly! Great solution. Sometimes I forget about vanilla stuff when deep in Vue/libraries. Thanks a ton!
from vue-formulate.
Hey @justin-schroeder, I actually have a similar use-case and that's super helpful! I'm trying to figure out a way to also find the specific field that's failing validation and scroll the user to it. I've tried submission.showErrors()
and a couple other functions that submission
has on it, but no luck. Is there a way to do this?
I've got a form that's more like 90 fields long, so this is a very helpful bit of UX.
Thanks for all your amazing work!
from vue-formulate.
Ok, tagging this as targeted for the 2.4.0
release.
from vue-formulate.
@justin-schroeder We noticed impact of this solution: const hasErrors = await submission.hasValidationErrors()
- we have a lot of async validation methods which are calling API to check validity of specific field. So we have to use debounce there. This is an issue because when we want to check if the form has any errors then we have to call hasValidationErrors()
again - duplicated API calls.
I would like to know if the form has any errors without calling API again.
Our temporary solution:
<FormulateForm
ref="form"
:disabled="!isValidate"
@validation="validate"
@submit="registration"
>
validate() {
this.isValidate = !this.$refs.form.$children.some(
(input) => typeof input.isValid !== 'undefined' && !input.isValid
)
So we iterated on each field and their data to check if is valid or not without calling the validate method again.
@andrew-boyd you can use this method to check if some specific field has an error without query on DOM.
from vue-formulate.
I have been researching how to achieve the exact thing. Thank you. Would be great to improve on the documentation as well as I think many people would encounter this. Happy to help improve on the docs.
from vue-formulate.
Related Issues (20)
- Nuxt integration issue for plugin that needs window object
- Vue Formulate and Graphql HOT 2
- Add opportunity to use templates with JSON Schema
- Asynchronous file upload or an event to see if all uploads are done
- Custom Validation Messages HOT 2
- Vue 2.7 & script setup
- Need to get the name of the file Input in uploader
- Slow perfomance to type in input fieds. HOT 1
- textarea emits false immediately after value when wrapped in conditional statement in tsx template HOT 1
- FileRemoved get ID or any reference about file
- Dark theme for the project? HOT 3
- @input event is triggered so many times while we are sliding the slider
- "addMore" slot content in repeatable group input not showing up HOT 2
- E-mail validation rule HOT 2
- Performance degradation (super slow TTFB) with long select option list HOT 2
- The behavior of Vue Formulate File Input is incorrect during uploading
- File upload: Uncaught (in promise) Unable to upload file
- How to change the range slider dot color? HOT 2
- Upgrade guide from VueFormulate to FormKit
- Vue Formulate Fails to run with Inertia js HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-formulate.