Vue js vee validate password confirmation with custom components

Question

I use vee-validate in my project with custom components with no problems.

But now for a Password Confirmation input field, I'm not able to make it work properly.

I have custom components for the input fields, somethink like <base-input-field>.

If I add a ref="password" attribute in my custom component (<base-input-field ref="password">), it will not reference the <input> inside my custom component, but the <div> wrapper that encapsulates the <input> html component.

Code example:

            <!-- Password -->
            <div class="row">
              <base-text-field
                ref="password"
                name="password"
                type="password"
                :error="isVisible && errors.first('password')"
                v-validate="{
                  required: true,
                  min: 6,
                  max: 30,
                }"
                v-model.trim="password"
                required
              />
            </div>

            <!-- Confirm Password -->
            <div class="row">
              <base-text-field
                name="password_conf"
                type="password"
                :error="isVisible && errors.first('password_conf')"
                v-validate="{
                  required: true,
                  confirmed: 'password',
                }"
                :data-vv-as="password"
                v-model.trim="password_conf"
                required
              />
            </div>

The answer for this question will help you.

Peshala Liyanage
– Peshala Liyanage

2020-08-06 17:40:34 +00:00
Commented Aug 6, 2020 at 17:40 — Peshala Liyanage
– Peshala Liyanage, Commented Aug 6, 2020 at 17:40

Reuel Ribeiro · Accepted Answer · 2019-05-29 01:55:35Z

1

I don't know vee-validate but here is an idea from a similar problem I had with custom components not having access to <input> directly:

Get the reference to the input using JS:

this.$refs.password.$el.querySelector("input")

You could save it in a variable and pass it to your component I guess. Again, I don't know vee-validate. Hope it gives you some ideas.

answered May 29, 2019 at 1:55

Reuel Ribeiro

1,49915 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Riddhi · Accepted Answer · 2019-05-29 07:23:20Z

1

Can u check which events are supported on your custom component(May be @input/@change)?

If any of events are fired on change of your input there is an option data-vv-validate-on in v-validate where you can set on which event you want to check the validation. Read more here

<base-text-field
            ref="password"
            name="password"
            type="password"
            :error="isVisible && errors.first('password')"
            v-validate="{
              required: true,
              min: 6,
              max: 30,
            }"
            v-model.trim="password"
            data-vv-validate-on="change"
            required
          />

answered May 29, 2019 at 7:23

Riddhi

2,2541 gold badge11 silver badges17 bronze badges

Comments

Ryley · Accepted Answer · 2019-05-29 21:11:51Z

1

Follow the requirements in this page and you should be fine:

emit input event when the value in your component changes
have name and value defined in component via $_veeValidate. Or, use data-vv-name and data-vv-value-path (details here).

Since you didn't provide the code in base-text-field I can't really give you any further example of how it should work for you.

answered May 29, 2019 at 21:11

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

Collectives™ on Stack Overflow

Vue js vee validate password confirmation with custom components

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related