Vee-validate: email and confirmed not working

[echodrome]

Versions

• vee-validate: 2.1.0-beta2 through 2.1.0-beta5
• vue: 2.5.2

Describe the bug
I have this code that works on version 2.0.9:

<div>
  <label for="email" class="a-required">E-mail address</label>
  <input type="text" id="email" name="email" maxlength="33" size="34" placeholder="[email protected]" v-model="formstore.email" v-validate="'required|email'" :class="{'has-error': errors.has('email')}" />
  <p v-if="errors.has('email')" class="error">{{errors.first('email')}}</p>
  <div class="clear"></div>
  <label for="email2" class="a-required">E-mail address confirm</label>
  <input type="text" id="email2" name="email2" maxlength="33" size="34" placeholder="[email protected]" v-validate="'confirmed:email'" :class="{'has-error': errors.has('email2')}" data-vv-as="email" />
  <p v-if="errors.has('email2')" class="error">{{errors.first('email2')}}</p>
</div>

However, when entering [email protected]_ on any of the fields it produces: The email field must be a valid email. Surprisingly the email [email protected]_ passes validation.

Then when entering the same email in the email2 field it throws: The email confirmation does not match.

[helixion]

I have this exact problem, but with password fields.
My inputs are data driven

data() {
    return {
      formFields: {
        newPassword: {
          value: "",
          type: "password",
          label: "NEW PASSWORD",
          id: "new-password",
          validators: {
            required: true,
            alpha_num: true,
            min: 8,
            max: 20
          }
        },
        retypePassword: {
          value: "",
          type: "password",
          label: "RETYPE NEW PASSWORD",
          id: "retype",
          validators: {
            required: true,
            confirmed: "new-password"
          }
        }
      },
      isSending: false
    };
  },

The component setup:

<dark-input v-model="field.value" :label="field.label" :id="field.id" :validators="field.validators" :type="field.type" :autocomplete="'new-password'"/>

and the component itself:

<template>
    <div class="input-wrapper">
        <input
        class="dark-input" 
        v-validate="validators"         
        :type="type" 
        :id="id" 
        :name="id" 
        :value="value"
        @input="$emit('input', $event.target.value)" 
        required="required"
        :autocomplete="autocomplete">
        <label for="" class="input-label">{{label}}</label>
        <span class="input-error" v-if="errors.has(id)">{{errors.first(id)}}</span>
    </div>
</template>

<script>
export default {
  inject: ['$validator'],
  props: {
    validators: {
      type: Object
    },
    type: {
      type: String,
      default: "text"
    },
   value: String,
   id: String,
   label: String,
   autocomplete: String
  }
};
</script>

[uno2xx]

Check this #1415 .

https://codesandbox.io/s/204w7pzr3n

[logaretm]

As @uno2xx pointed out, you should use refs from now on to target other rules.

[echodrome]

Adding ref did solve the issue I had with the emails not matching. However, I still get a not valid email address:

<div>
          <label for="email" class="a-required">{{$t('email')}}</label>
          <input type="text" id="email" name="email" maxlength="33" size="34" placeholder="[email protected]" v-model="formstore.email" ref="email" v-validate="'required|email'" :class="{'has-error': errors.has('email')}" />
          <p v-if="errors.has('email')" class="york-error">{{errors.first('email')}}</p>
          <div class="clear"></div>
          <label for="email2" class="a-required">{{$t('email_confirm')}}</label>
          <input type="text" id="email2" name="email2" maxlength="33" size="34" placeholder="[email protected]" v-validate="'confirmed:email'" :class="{'has-error': errors.has('email2')}" data-vv-as="email" />
          <p v-if="errors.has('email2')" class="york-error">{{errors.first('email2')}}</p>
</div>

[echodrome]

I created a sandbox to test this:

https://codesandbox.io/s/4jlv1p6569

[email protected] does not work

[logaretm]

[email protected] is not a valid Gmail address, the minimum count for the id must be more than 6. We use validator.js library for email validation.

[echodrome]

@logaretm thank you for the explanation. Just note that [email protected] validates