CODEWITHSUNDEEP
vue.jsvalidationvuejs2rulesvue-validator
Sam
Sam

Reputation: 149

ValidationProvider need to validate after submit Vue 2

I am using ValidationObserver and ValidationProvider for validating the email field.

<ValidationProvider
                  name="email"
                  rules="required|max:50|email"
                  v-slot="{ errors }"
                >
                  <md-field
                    class="border-round-10 border_box"
                    :class="{ 'md-invalid': errors.length > 0 }"
                  >
                    <label>Email </label>
                    <md-input
                      v-model="email"
                      @blur="greatToSeeYou()"
                    ></md-input>
                    <span class="md-error">{{ errors[0] }}</span>
                  </md-field>
                </ValidationProvider>

I want to validate the email only after the submit button. I tried so many options but didn't work.

Upvotes: 0

Views: 805

Answers (1)

Mic Fung
Mic Fung

Reputation: 5692

There is 4 modes to configure ValidationProvider: aggressive, lazy, eager and passive.

From your requirement, you would like to validate the form on submission only so you can choose passive mode

<ValidationProvider
   name="email"
   rules="required|max:50|email"
   v-slot="{ errors }"
   mode="passive"
>
   ...
</ValidationProvider>

Here is the codesandbox example I made for your reference:

https://codesandbox.io/s/kind-breeze-rbf27?file=/src/components/HelloWorld.vue:146-293

Upvotes: 1

Related Questions