Unable to set a validation when the field is inside a object

[christianrojas]

Hi,

How to set a validation when the field is inside a object?

Example:

new Vue({
   el: '#app',

   data: {
     person: {
       username: ''
     }
   }
});

<div id="app">
  <validator name="validation1">
    <form novalidate>
      <input type="text" v-validate:person.username.required>
      <div>
        <span v-show="$validation1.person.username.required">Required your name.</span>
      </div>
      <input type="submit" value="send" v-if="$validation1.valid">
    </form>
  </validator>
</div>

The validation result structure only get person as a field.

[KyLeoHC]

I have met a problem as the same with you.I also want to know how to figure out this problem.

[jsiebach]

+1!

[aaronjpitts]

Is there any support for this yet?

[VincentGarreau]

+1 :+1:

[tsnuer]

I was able to get something working by doing something like this. I had to add the field attribute and the rule and message things:

<input v-model="user.firstName" field="user.firstName" v-validate="{required: { rule: true, message: 'First Name is required!'}}" name="firstName" placeholder="First Name" type="text" class="form-control"/>

Doing so I was able to get errors inside of my validator object.

[wolfsblu]

I was able to get something working by doing something like this. I had to add the field attribute and the rule and message things

How did you access the various error messages? $validation.user.firstName.required does not work for me.

[tsnuer]

@helmi77 In my template I wrapped my form with a validator named signupValidation. And this is how I get back the errors in my component (I use lodash, to map through the errors).

      if (this.$signupValidation.errors && this.$signupValidation.errors.length > 0) {
        const errors = _.map(this.$signupValidation.errors, (error) => {
          return error.message;
        });

        this.$broadcast('error-messages', errors);
      }

[wolfsblu]

@tsnuer Thanks for the explanation! An official solution would be great though.

[wolfsblu]

My mistake, should have read the docs more carefully. There's a section about integrating vue-validator with v-model (v-model-integration)

<validator name="validation">
    <form novalidate>
        <input 
            type="email" 
            v-model="credentials.email"
            v-validate:email="['required']">

        <p v-if="$validation.email.required">Email required</p>
    </form>
</validator>