How to stop validation while onblur event using VeeValidate

Question

I am using VeeValidate v3 and coreui.

My question is how to avoid validation while onblur event and allow only when onsubmit event using VeeValidate?

<template>
  <div class="d-flex align-items-center min-vh-100">
    <CContainer fluid>
      <CRow class="justify-content-center">
        <CCol md="6">
          <CCard class="mx-4 mb-0">
            <CCardBody class="p-4">
              <ValidationObserver v-slot="{ invalid }" ref="form" :disabled="true">
                <CForm novalidate  @submit.prevent="onSubmit" class="sign">
                  <h2 class="aligncenter my-5">Create Account</h2>
                  <ValidationProvider name="FirstName" rules="required" v-slot="{ errors }">
                    <CInput v-bind:class="{InputError:errors.length > 0}"
                      label="FirstName"
                      placeholder="First Name"
                      :description="errors[0]"
                      v-model="form.name.firstName" type="text"
                    />
                  </ValidationProvider>
                  <ValidationProvider name="LastName" rules="required" v-slot="{ errors }">
                      <CInput v-bind:class="{InputError:errors.length > 0}"
                        label="LastName"
                        placeholder="Last Name"
                        :description="errors[0]"
                        v-model="form.name.lastName" type="text"
                      />
                  </ValidationProvider>
                  ...
                  <div class="flex flex-center">
                    <CButton class="login-btn btn-lg f-w my-3" :disabled="invalid" color="success" label="Login" @click="register" >SIGN UP</CButton>
                  </div>
                </CForm>
              </ValidationObserver>
              <p class="aligncenter mt-10">Already a user? <router-link to="/login"><span class="text-success"><strong>SIGIN IN</strong></span></router-link></p>
            </CCardBody>
          </CCard>
        </CCol>
      </CRow>
    </CContainer>
  </div>
</template>

export default {
  name:"LoginPage",
  data() {
    return {
      form: {
        name:{
          firstName:"",
          lastName:"",
        }
        ...
    };
  },
  methods: {
    ...
    async register() {
      this.$refs.form.validate().then(async success => {
        if (!success) {
          return;
        }
        var result = await this.registerUser(this.form); 

        if (!result.success) {
          this.$toasted.error(result.message?result.message:"Some error occur");
        }
      });
    }
  }
};
</script>

As you can see the image, the validation happens if a user gets rid of text input, but ideally it should happen only if a user click the sign up button.

I couldn't figure this out after trying to hard code.

Thank you for helping me to get rid of this.

Answer 1

There is a feature called "interaction modes" in vee-validate v3 which allows you to customize when to validate your fields.

What you are looking for is the passive mode which validates only on submit.