Process an HTML Form without the Submit Button Using VeeValidate-CodePudding

I've created a form handler using its composable inside my <script setup>:

const { submitForm, resetForm, handleSubmit, meta } = useForm()

function save() {
  // Here I want to submit the form

  submitForm() // This doesn't work
  showSaveSnackbar.value = false
}

function discard() {
  resetForm()
  showSaveSnackbar.value = false
}

const onSubmit = handleSubmit(values => {
  // pretty print the values object
  alert(JSON.stringify(values, null, 2));
});

And in my template I wrote this:

<form @submit="onSubmit">
    <!-- inputs -->

</form>

I made a snackbar with a button that shows up (using useForm's meta.dirty attribute). When I edit the form and I want to submit it, I want to use this custom button instead of the HTML Form's Submit button (in this case the button calls the custom save() function).

I tried using the submitForm() function but without success.

How can I do this?

CodePudding user response：

I think you can handle the form processing in the save function (and possibly remove the onSubmit function).

const { errors, values } = useForm();

const save = () => {
  showSaveSnackbar.value = false
  alert(JSON.stringify(values.value, null, 2));
};