How to make modal close after validation using Vue js?

Question

I am using <q-modal>(Quasar Framework) for a form. On clicking Add button a form will pop over. In this, I am validating each form tags, after clicking submit button. To close the modal, I am using @click="$refs.maximizedModal.close()" for submit button.

Everything works fine. Now I need to retain modal if the validation is not returning true or if validation satisfies then the modal need to be closed.

Is there any method to do conditional submit in Vue js?

Answer 1

You should make a custom function for the submit of the form and use it, something like this :

....

methods{
  checkForm(e){
    if(VALIDATION_IS_TRUE){
      //Validation has passed, we submit the form OR close the modal
      $refs.maximizedModal.close(); // Maybe this.$refs.maximizedModal.close()
      e.target.submit();
    }else{
       //The form is not validated, do something to inform the user
    }
  }
}

and instead of using the @click for the submit button, add this to the form element :

<form @submit.prevent='checkForm($event)'>

Hope this helps!