7

I am trying to add vee-validate rule on Validation Provider of password and confirm password. v-validate must be working where I had to add rules to a textbox. But here in my case, I must have to use Validation Provider. Please help!!!

Versions

vee-validate: 2.1.7
vue: 2.9.6

Code

<ValidationObserver ref="adminInfo">
<v-layout row wrap>
<v-flex xs12 md6>
    <ValidationProvider name="password" rules="required|min:5|max:35" ref="password">
    <v-text-field
      solo
      v-model="administratorInfo.newPassword"
      label="Set New Password"
      required

      slot-scope="{
          errors,
          valid
        }"
      :error-messages="errors"
      :success="valid"
    ></v-text-field>
    </ValidationProvider>
  </v-flex>
  <v-flex xs12 md6>
    <ValidationProvider name="confirm password" rules="'required|confirmed:password'">
    <v-text-field
      solo
      v-model="administratorInfo.cNewPassword"
      label="Confirm Password"
      required
      slot-scope="{
          errors,
          valid
        }"
      :error-messages="errors"
      :success="valid"
    ></v-text-field>
    </ValidationProvider>
  </v-flex>
</v-layout>
</ValidationObserver>

Getting error:

Cannot read property '$watch' of undefined

Prashant
  • 1,375
  • 2
  • 14
  • 22

3 Answers3

14

Finally found solution by replacing ref="password" to vid="password". Found solution here.

But I did not understood what is and why vid?

Prashant
  • 1,375
  • 2
  • 14
  • 22
  • 1
    When using `validation-provider` you must use `vid` instead of `ref`: https://vee-validate.logaretm.com/v2/guide/components/validation-provider.html#cross-field-validation – Richard Howell Jul 25 '21 at 21:39
0

This might be unrelated but make sure you have a v-model in your ValidationProvider of confirm password

Chyi
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 14 '21 at 09:18
0

In case someone is looking for how to pass vid when rules are an object:

<validation-provider :rules="{ required: true, max: 100, confirmed: 'confirmar' }" v-slot="validationContext"> </validation-provider>