Vee-validate: Initial model validation bug

[ahmadmilzam]

Versions:

• VueJs: 2.2.1
• Vee-Validate: 2.0.0-beta.25

Description:

I have a formData model in data property that need to validate,
The formData object looks like this:

data() {
  return {
    formData: {
      username: '',
      email: ''
    }
  }
}

And the template:

<input
  name="username"
  v-model="formData.username"
  v-validate:formData.username="'required'"
  :class="{'c-input': true, 'is-invalid': errors.has('username') }"
  type="text" id="username">

<input
  name="email"
  v-model="formData.email"
  v-validate:formData.email="'required|email'"
  :class="{'c-input': true, 'is-invalid': errors.has('email') }"
  type="text" id="email">

But strange behavior happen when I'm insert a value on username field, this trigger next validation event to email field even if email field is untouced. So i remember in the documentation page, to add .initial object chain to the model if I want to avoid initial model validation, it still not working.

My latest code looks like this:

<input
  name="username"
  v-model="formData.username"
  v-validate:formData.username.initial="'required'"
  :class="{'c-input': true, 'is-invalid': errors.has('username') }"
  type="text" id="username">

<input
  name="email"
  v-model="formData.email"
  v-validate:formData.email.initial="'required|email'"
  :class="{'c-input': true, 'is-invalid': errors.has('email') }"
  type="text" id="email">

BTW, v-validate model works fine if don't wrap my model inside a formData object.

data() {
  return {
    username: '',
    email: '',
  };
}

<input
  name="username"
  v-model="username"
  v-validate:username.initial="'required'"
  :class="{'c-input': true, 'is-invalid': errors.has('username') }"
  type="text" id="username">

<input
  name="email"
  v-model="email"
  v-validate:email.initial="'required|email'"
  :class="{'c-input': true, 'is-invalid': errors.has('email') }"
  type="text" id="email">

Any idea? Thank you very much

[logaretm]

.initial has been broken for a while now, I hope I will be able to standardize the behavior across all use cases after I'm finished with the current issues with flags and classes.

I'm thinking about switching its behavior, both from a verbal standpoint and practical one, so The initial modifier does not imply that it will ignore the initial value validation, actually it implies the opposite; as in it will validate the initial value, which makes more sense to me since the probability that you want to validate a value initially is considerably less than the opposite. and I admit it is easier to implement than the original intended case.

I would like to hear your opinion on this minor breaking change.

[ahmadmilzam]

@logaretm I think that make more sense, the initial modifier should not ignore the initial validation, it should do the opposite to validate the model when it mounted to the DOM. Because in most cases, the model property will be empty in the first place, so we don't need to validate the property before user change the value.

Btw since any dot . inside directive mean a modifier, should I write something like this formData['key'].initial to add initial modifier in the v-validate directive?

[logaretm]

I've pushed the change, now the initial modifier should force validation upon initial values, as for the original issue I'm still trying few things.

the initial modifier would stay the same, v-validate.initial I'm not sure what do you mean by your last comment.

[ahmadmilzam]

@logaretm
I mean, in my data() properties I have a specific property for formdata that i wrap inside an object.

data() {
  return {
    formData: {
      username: '',
      email: ''
    }
  }
}

In order to validate my model with initial modifier, should I change my code to something like this?

<input
  name="username"
  v-model="username"
  v-validate:formData['username'].initial="'required'"
  :class="{'c-input': true, 'is-invalid': errors.has('username') }"
  type="text" id="username">

Since dot . in directive is a separator for modifier, I can't write that code like this: v-validate:formData.username.initial. The directive will guess username is a modifier.

[nthndnn]

Hi @logaretm,

I've been working on a project with this and seem to have stumbled across this issue too... any idea when the fix will be tagged?

Thanks!

[logaretm]

@ahmadmilzam I think args must be a simple expression, meaning there can't be any separation as they are evaluated as strings to the directive API, then I watch them using the $watch method, so complicated expressions like array access or dot notation won't work reliably or at all, feel free to correct me.

@nathanjdunn I'm currently working on many fixes for a lot of issues, once I'm done with some of them I will tag a version, I assume maybe in a day or two if things go well. as I still have to identify why initial validations fire off when they shouldn't.

[hvalcourtSerdy]

"But strange behavior happen when I'm insert a value on username field, this trigger next validation event to email field even if email field is untouced.".

I have the same problem here, but when a load the page. Maybe it's because Chrome auto-field the email, but the auto-field email is a valid email, it shloud not trigger email error.

The problem is there with v-validate:credentials.username="'required|email'" or with initial v-validate:credentials.username.initial="'required|email'" .

[logaretm]

@hvalcourtSerdy Field args cannot contain dot notations, this is the Vue specification of a directive arg, not a limitation with the plugin, so credentials.username actually translates to:

"watch the credentials prop and apply a username modifier on the directive" so you would need to use the other form instead:

 v-validate="{ rules: 'required|email', arg: 'credentials.username' }"

which should handle dot notations.

as for the original issue I think it is resolved with the latest changes I've done to the initial modifier.

[hvalcourtSerdy]

It's working with this syntax ! Thanks a lot!