[Vuejs]-Validations in Vue using Vuelidate are not working

by

0👍

✅

The click-handler updates currentStage without first validating the form. However, the validation occurs in appendFields, which is computed after buttonClicked(). The validation should be the first step, which can block the proceeding steps.

I would refactor it like this:

  1. Make appendFields a component method, since it’s not really a computed property (especially because it returns nothing).

  2. Move the currentStage update into its own function for clarity.

  3. Move the form validation from appendFields() to the button’s click-handler.

  4. In the click-handler, call the functions created in step 1 and 2 if the form is valid.

export default {
  methods: {
    // 1️⃣
    appendFields() {
      if (this.jsonStatham.hasOwnProperty(this.traffic.unique1)) { 
this.integrationParams.push(...Object.keys(this.jsonStatham[this.traffic.unique1]))
      }
    },
    // 2️⃣
    updateStage(value) {
      if (value === 0) {
        this.currentStage++
      } else if (value === 1) {
        this.currentStage--
      }
    },
    buttonClicked(value) {
      // 3️⃣
      this.v$.$validate()

      if (!this.v$.$error) {
        // 4️⃣
        this.appendFields()
        this.updateStage(value)

      } else {
        alert("Error, Not all fields are filled in.")
      }
    }
  }
}

Also be aware that useValidate() is intended for the Composition API, so it should be called inside setup():

export default {
  setup() {
    return {
      v$: useValidate()
    }
  }
}

Leave a comment