Comments (11)
I made a more complete fiddle @hydraheim
https://jsfiddle.net/CristiJ/bt5dhqtf/1119/ and will add it to the other examples from the docs.
from vue-form-wizard.
Will delve into the example once we revisit this for refactoring. Highly appreciated for the hard work here, rare for issues that reside outside the main component. This is above and beyond, sir.
from vue-form-wizard.
@cristijora I'm also not able to get the vue-form-wizard to work with vee-validate. The solution you mentioned would be much appreciated!
from vue-form-wizard.
https://jsfiddle.net/bt5dhqtf/927/
on-validate
is called whenever a certain step has a before-change
function and this function is executed.
It's basically called whenever there is a validation of a certain step with the result of the validation.
It might be useful when you do the validations in some other components asynchronously like here
https://jsfiddle.net/CristiJ/bt5dhqtf/286/
validateSecondTab: function(){
return this.$refs.secondTabForm.validate();
},
handleValidation: function(isValid, tabIndex){
console.log('Tab: '+tabIndex+ ' valid: '+isValid)
if(!isValid){
// display something here
}
},
and maybe you want to display some notifications, alerts etc.
Note that on-validated is not called if a step doesn't have a before-change
method
To summarize:
on-validate
is called upon each before-change
with the result of the validation of each before-change
.
Play around with this fiddle and maybe it will be easier to understand
https://jsfiddle.net/bt5dhqtf/931/
from vue-form-wizard.
Right, it seems your example uses some sort of third-party form schema generator and validator, which upon you use the result of validate() to further propagate your handleValidation outcome.
At the moment we're using bootstrap-vue (which is way awesome, one might add) to generate the forms, with Vuelidate as a validator. Unsure if the reactive validation object Vuelidate generates can be directly connected without checking each required attribute explicitly. Like so:
Template
<tab-content title="Setup" class="row" icon="fa fa-2x fa-info" :before-change="() => validateStep(1)">
Script
Validations
validations: {
selectedCustomerId: {
required,
numeric: numeric
}
}
Methods
// TODO: This is extremely unelegant. Find a better approach.
validateStep: function (d) {
if (d === 0) {
if (!this.$v.selectedCustomerId.$invalid) {
this.formError = false
return true
} else {
this.formError = true
return false
}
}
Which is, as the TODO clearly states, fairly unelegant.
from vue-form-wizard.
What about Validation groups ?
https://monterail.github.io/vuelidate/#sub-validation-groups
You could make these validation groups and check return this.$v.step1
Will try to make a demo maybe
from vue-form-wizard.
@hydraheim Here is a basic fiddle for Vuelidate.
https://jsfiddle.net/CristiJ/bt5dhqtf/952/
It's not very good looking because I made it in like 5mins but you can have form groups and validate a "group" of inputs, the group being the set of inputs from one of your "tab-contents"
from vue-form-wizard.
Thanks for looking into that.
Already looked at validation groups, but referencing the docs there doesn't seem to be any support for validating several isolated groups (which would correspond to step 1, step 2, and so on). There might be, but the docs leaves some things to be desired.
from vue-form-wizard.
Well I think you should have 1 group per step :)
If you want to validate 2 groups I guess you should create 2 and validate them together in a function
Here is the validation for one group
this.$v.validationGroup.$touch();
return !this.$v.validationGroup.$invalid
For 2 or more you can save them in some array
this.$v.validationGroup.$touch();
this.$v.validationGroup2.$touch();
return !this.$v.validationGroup.$invalid && !this.$v.validationGroup2.$invalid.
Anyway, those are vuelidate specific details. Form-wizard was not built with a specific validator library in mind. It exposes the before-change
functions which can be used to handle validation regardless of library. So far I've made wizards with vee-validate, vue-form-generator and element-ui with no issues, so I guess you can do it with vuelidate as well. Just figure out how to trigger validation manually for a set of inputs and you're good to go.
from vue-form-wizard.
Glad I could help @hydraheim As a side note, the example from above was added to the readme. Maybe it helps other people too. Also I used bootstrap in it to keep it simpler but shouldn't be an issue. Let me know if it works out in the end and if you had to do other changes so I can update my example as well. I didn't use vuelidate too much, so I might not know the best practices for it yet.
from vue-form-wizard.
@cristijora - Is there any way I could please see your integration you mentioned with vee-validate? I've spent a couple of hours trying to get it to work and I'm about out of ideas :/
from vue-form-wizard.
Related Issues (20)
- 31 commits since the last release, can you please tag a new release? HOT 1
- Demos: Don't use v-for directives together with v-if directives on the same element.
- How to enable all tabs? HOT 1
- Slot for icons?
- Much of the Documentation is not rendering/missing
- based on user selection change the tab index not working
- Awesome Wizard and Malformed Build Process HOT 1
- How to Disable the tab2
- How come the tab anchor tag has javascript:void(0) ? Messes up CSP policies.
- how to remove the left line HOT 1
- How can I add a checked symbol?
- Lazy Load not working
- No control over the style of wizard footer buttons HOT 1
- Dynamic Button
- Reset form HOT 1
- Typescript HOT 1
- Custom Header Buttons
- Add own svg icons instead
- Hi i updated this package to vue3 and add type definition (TS) support HOT 1
- route
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-form-wizard.