External Form Validation

[abdullahcanakci]

Hi, I'm trying to implement a dynamic form system for third party users to use not by devs. This is important because I can't be sure that the users fill the form configuration "Form-TAG Action URL" or do it correctly.

Because of this reason I circumvented the default use style and added my own submit button around the package to have a handle on the formInputs provided. But I'm a bit lost on how to use validation. As far as I understand the validation works on submit button event.

Is there any way to use validation the way I do?

the gist of what I do.

<template>
  <div class="row justify-content-end">
    <FormRenderer
      :form-configuration="configuration"
      v-model="formInputData"
    />
    <button class="btn btn-primary" v-on:click="saveConfiguration">Save</button>
  </div>
</template>
<script>
import { VueFormBuilderPlugin, FormRenderer } from "v-form-builder";
import "v-form-builder/dist/v-form-builder.css"; //load CSS from your App

Vue.use(VueFormBuilderPlugin);

export default {
  name: "FormRender",
  components: { FormRenderer },
  data: () => ({
    configuration: {},
    formInputData: {}
  }),
  methods: {
    saveConfiguration: function (event) {
      axios.post(this.storeUrl, {
        form_id: this.formId,
        form_fields: this.formInputData,
      });
    },
}

[sethsandaru]

Hello @abdullahcanakci ,

To triggering the form validation process, you have to create a button inside your Form (https://phattranminh96.gitbook.io/vue-form-builder/getting-started/controls#button). Please check the "Run validation before emitting?" option in order to let the Validation run when users clicked the button.

It was my bad to not mention it in the Validation section on the documentation, I'll update it.

Let me know if you have any other questions.

[abdullahcanakci]

Thank you much appreciated.