0

Showing only relevant code, if more is needed tell me. My problem is that even when a name is entered to the text-field. I cannot go to the next card since !this.$v.$invalid never becomes false.. I have no idea what i am missing here..

Note that the errors are showing fine when clicked on the button without it having any value.

Vuelidate.js

import Vuelidate from 'vuelidate'
import VueTimepicker from 'vue-time-picker'


Vue.use(Vuelidate)

CardOne.js

import { validationMixin } from 'vuelidate'
import { required, maxLength ,email } from 'vuelidate/lib/validators'

  mixins: [validationMixin],
  validations: {
    name: { required, name },
  },
    methods {
      showNextCard(){
      this.$v.$touch() //it will validate all fields
      console.log(this.$v);
      if (!this.$v.$invalid) { //invalid, becomes true when a validations return false
        //you dont have validation error.So do what u want to do here
        console.log("in here");
        this.$emit("nextCard");
      }
    },
}
computed {
    name: {
      get () {
        return this.$store.state.cardOne.name;
      },
      set (value) {
        this.$store.commit('updateName', value)
      }
    },
    nameErrors () {
      const errors = []
      if (!this.$v.name.$dirty) return errors
      !this.$v.name.required && errors.push('Måste fyllas i')
      return errors
    },
}

CardOne.html

<div >
  <form>
    <v-text-field
      v-model="name"
      label="För- och efternamn"
      required
      @blur="$v.name.$touch()"
      :error-messages="nameErrors"
      :v="$v.name">
    </v-text-field>
    <v-btn
      v-bind:style="[formCardIndexx === 0 ? {'margin-left': 'auto'} : {}]"
      v-if="formCardIndexx != 10"
      active-class="no-active"
      class="next-button"
      type="button"
      :ripple="false"
      @click="showNextCard()">
      NÄSTA
    </v-btn>
  </form>
</div>

I saw that i had added that when i checked to see. But it did not help the problem. This is the v object printed right before it should validate the form. enter image description here

EmbeddedOS
  • 173
  • 6
  • 18

1 Answers1

0

In validations, you have:

validations: {
    name: { required, name },
  },

required makes sense and is a valid vuelidate built-in validator per https://vuelidate.js.org/#sub-builtin-validators. However, name doesn't. Unless you have a customer name validator defined somewhere in code you aren't showing, you should try removing that. It could be failing to validate because it can't validate against undefined, which from what I see in your code, name would surely evaluate to.

Try:

validations: {
    name: { required },
  },
innerurge1
  • 718
  • 3
  • 17
  • Hi innerurge1, thank you for your answer. Please check my question at the bottom. I updated it – EmbeddedOS Nov 20 '20 at 22:48
  • Any chance you could put this up in a reproducible manner using [stack snippits](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do), or a link to a js-fiddle or code pen? It would be much easier to debug and help you with it. The screenshot doesn't really give the full picture of what is happening as one interacts with it. – innerurge1 Nov 20 '20 at 22:56