Vue-form-generator: How can I validate a form manually (programmatically) ?

[lionel-bijaoui]

I know that vfg can validate after each change or on load, but how can I use an external element (not the build in submit field) to manually force a validation ?
My exemple is like that :

        <div class="formulaire__generator">
            <vue-form-generator :schema="schema" :model="model" :options="formOptions" :isNewModel="true"></vue-form-generator>
        </div>
        <nav class="formulaire__navigation">
            <div>Quit</div>
            <div @click="prevStep" :class="{'is-inactive': !firstStep}">Back</div>
            <div>Save</div>
            <div @click="nextStep" :class="{'is-inactive': !lastStep}">Next</div>
        </nav>

What I'm doing is that I'm creating a form with multiple "pages" or "sections" but one model. I load of schema by "page" and users can go back and forth.
What I want is validate the form when someone click on the "Next" button (or "Back").
So users fill the questions and when next is clicked, I launch validation and scroll the container to the question. The "scroll to bad part" is not complicated, since I can just look at the classes. The complicated is trigger the validation process manually.

Thank you for your help!

[icebob]

It's not easy. The validation is inside vfg, so if you want to call, you need a reference to vfg with $refs.
After it you can call the validate() method.

This solution is not too good if you have more vfg on the same page, but currently (I think) there are no alternatives.

[lionel-bijaoui]

Thank you! For my problem it is a good solution. I will test it soon and close when done.