提交表单后显示 vuelidate 错误消息

Question

I'm using vuelidate for form validation in vuejs3 and composition api.

After submit form, I call validate. If validation passes, the form fields should be emptied and vuelidate should be reset.

I currently do that like so:

const submitForm = () => {
  if (!v$.value.$validate()) {
    console.log(`Error : ${form} `)
    return
  } 
  // there will be an axios post request here:
  console.log(form)
  v$.value.$reset()
  Object.keys(form).forEach(v => form[v] = "")
  
}

For some reason, v$.value.$reset() is called also when the form is invalid (so validation passes even when forms are invalid) and Object.keys(form).forEach(v => form[v] = "") causes validation errors so that when the form is submitted correctly, all error messages show up.

How to clear the form without reloading the page and reset vuelidate only after submission without errors?

Answer 1

We can use this.$v.$reset(); to clear the error messages and it works fine for me