[Question] How is @on-validate supposed to work?

[hydraheim]

Looking at the docs, there is very little outlining how this directive works. What does it run through and what alters its outcome? Hence:

**Template**
  <form-wizard @on-complete="onComplete"
                  @on-loading="setLoading"
                  @on-validate="handleValidation"

**Methods**
        handleValidation: function(isValid, tabIndex){
           console.log('Tab: '+tabIndex+ ' valid: '+isValid)
        },

Would always yield "isValid" as true.

Reference: https://cristijora.github.io/vue-form-wizard/#/?id=async-validation

[cristijora]

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/

[hydraheim]

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.

[cristijora]

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

[cristijora]

@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"

[hydraheim]

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.

[cristijora]

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.

[cristijora]

I made a more complete fiddle @hydraheim
https://jsfiddle.net/CristiJ/bt5dhqtf/1119/ and will add it to the other examples from the docs.

[hydraheim]

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.

[cristijora]

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.

[grex22]

@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 :/

[malbrecht0792]

@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!