Vue-form-generator: Add event in callback onValidationError

[zevitagem]

It is necessary to add the $ event variable in the onValidationError callback in of the "FieldSubmit.vue" file.

In my case, this component is inside a FORM, and the way the code is currently, I can not do "preventDefault" when the form has errors, I can only do it on the "onSubmit".

[zoul0813]

@zevitagem I recommend not placing VFG inside of a <form /> ... but if you do, you should attach a submit handler to the form and check VFG's validation status in there ...

<form @submit="onSubmit">
  <vue-form-generator ref="vfg" ... />
</form>

onSubmit($event) {
  if(this.$refs.vfg.errors.length > 0) {
    $event.preventDefault();
    // handle invalid form
  }
}

Alternatively, you can just use @submit.prevent="onSubmit" and then submit the form manually in the handler.

[jaywilburn]

I am using VFG but from generated JSON. I parse out the JSON and write the function outside the JSON. How would I set preventDefault? Right now this is being used in a Vue app that lives inside of an ASP.net site, and the submit causes a post back. How can I write the function to submit but also preventDefault?

[zoul0813]

@jaywilburn attach an event callback to the forms submit event, and catch it there. Do not attempt to catch the submit from the button's event.

[tim-yao]

Just would like to correct a typo in above solution https://github.com/vue-generators/vue-form-generator/issues/408#issuecomment-371148616

Should be ref not refs.

<form @submit="onSubmit">
  <vue-form-generator ref="vfg" ... />
</form>

[zoul0813]

Thanks, I fixed the comment