Vee-validate: Confirmed validation is not working

[dragonfire1119]

Versions:

• VueJs: 2.0.1
• Vee-Validate: 2.0.0-beta.22

Description:

The confirmed validation is throwing Uncaught TypeError: Right-hand side of 'instanceof' is not callable

Steps To Reproduce:

<div :class="{'form-group': true, 'has-error': errors.has('password')}">
    <label for="password" class="control-label">New password</label>
    <input v-validate="'required|confirmed'" type="password" class="form-control" id="password" name="password" placeholder="New Password" v-model="settings.password">
    <p class="help-block" v-if="errors.has('password')">{{errors.first('password')}}</p>
</div><!--end form group-->

<div :class="{'form-group': true, 'has-error': errors.has('password_confirmation')}">
    <label for="password_confirmation" class="control-label">Verify password</label>
    <input v-validate="'required'" type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Verify password" v-model="settings.password_confirmation">
</div><!--end form group-->

I've tried with having the target field in there & without.

It's failing on this line: https://github.com/logaretm/vee-validate/blob/437f816d910d6f4ad9e23eddd1602f5d0c528cb0/src/listeners.js#L132

[hultberg]

I've created a jsfiddle with your code, and can't reproduce the error is that fiddle. https://jsfiddle.net/75a5mc3c/1/

[dragonfire1119]

@hultberg Well I'm using mine in a .vue template don't know if that makes a difference or not? Everything else works on the validation it seems like. The jsfiddle is not exactly like real world but I guess Ill depend more on the Laravel backend for the confirmed validation.

I did notice that your jsfiddle had a newer version of vue so I upgraded my version but it still didn't work on my end.

[hultberg]

@dragonfire1119 Difference between having the code in a .vue file or not, should not matter. Are you able to create a fiddle that reproduces this error for the purpose of tracking down the issue?

It would also be helpful to see what the scope variable (in https://github.com/logaretm/vee-validate/blob/2.0.0-beta.22/src/listeners.js#L142) is by debugging it.

[dragonfire1119]

@hultberg

scope: Vue$3 {_uid: 2, _isVue: true, $options: Object, _renderProxy: Proxy, _self: Vue$3…}

Event: Event {isTrusted: true, type: "input", target: input#password_confirmation.form-control, currentTarget: input#password_confirmation.form-control, eventPhase: 2…}

this$1.scope: Returns null

If I remove the if statement it works.

The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.

I'm guessing Event doesn't have a instance of Function.constructor somewhere up its prototype chain.

[thatdoorsajar]

Exactly the same issue. Also using from within a .vue template. Also on a confirm rule.

[nicolocodev]

You should use confirmed:nameOfTheConfirmationField As in my case, i have a custom field component:

<field type="password" name="password" placeholder="Password" validate="required|confirmed:confirmPassword" />

<field type="password" name="confirmPassword" placeholder="Confirm your password" validate="required" />

[AGPDev]

+1 after update to 2.0.0-rc.3

<q-field
  :error="errors.has('form.fields.password')"
  :error-label="errors.first('form.fields.password')">
  <q-input
    type="password"
    name="password"
    v-model="form.fields.password"
    v-validate="'required|min:8'"
    data-vv-name="form.fields.password"
    data-vv-as="Senha"
    float-label="Senha">
  </q-input>
</q-field>
<q-field
  :error="errors.has('form.fields.password_confirmation')"
  :error-label="errors.first('form.fields.password_confirmation')">
  <q-input
    type="password"
    name="password_confirmation"
    v-model="form.fields.password_confirmation"
    v-validate="'required|min:8|confirmed:password'"
    data-vv-name="form.fields.password_confirmation"
    data-vv-as="Repetir senha"
    float-label="Repetir senha">
  </q-input>
</q-field>

[logaretm]

@AGPDev it does not work properly with custom components, will try to implement it or change how confirmed and similar rules behave.

[AGPDev]

after build and install de master code, custom validate work again, i dont know why but maybe help you

[darrena092]

If it helps anyone - this didn't work for me until I included ref='password_confirmation' in my confirmation input.

[andi9010]

this work for me:
v-validate="{required: true, is: modelPassword}"

[phprad]

is: modelPassword

Thanks for this genius reply.