[Vuejs]-Enable button when conditions are true in VueJS 3

Consolidate your form fields into a single model, along with the errors object.

Then use Object.keys to grab known field keys to do validation on.

export default {
  data() {
    return {
      form: {
        errors: {},
        values: {
          fullName: '',
          phoneNr: '',
          referrer: '',
        }
      }
    }
  },
  methods: {
    validate(field) {

      let fields = []
      // single field
      if (field) {
        delete this.form.errors[field]
        fields.push(field)
      } else {
        this.form.errors = {}
        // all fields
        fields = Object.keys(this.form.values)
      }


      if (fields.includes('fullName')) {
        if (this.form.values.fullName === '') {
          this.form.errors.fullName = 'Enter your full name'
        } else if (this.fullName !== some other validation) {
          ...
        }
      }

      if (fields.includes('phoneNr')) {
        if (this.form.values.phoneNr === '') {
          this.form.errors.phoneNr = 'Enter your phone number'
        }
      }

      if (fields.includes('referrer')) {
        if (this.form.values.referrer === '') {
          this.form.errors.referrer = 'Enter referrer'
        }
      }

      // if errors is empty return true
      return !Object.keys(this.form.errors).length
    },
    submit() {
      // validate all
      if (this.validate()) {
        // do some thing, form is valid, if native form handler, return true/false
      }
    }
  }
}

<div class="form-control" :class="{invalid: form.errors.fullName}">
  <label for="name">Namn</label>
  <input id="name" type="text" v-model="fullName" @blur="validate('fullName')">
  <p v-if="form.errors.fullName">{{ form.errors.fullName }}</p>
</div>

If you don’t specifically need the @blur validation, it simplifies things quite abit and its pretty standard to do validation on submit rather then on blur of individual fields.

export default {
  data() {
    return {
      form: {
        errors: {},
        values: {
          fullName: '',
          phoneNr: '',
          referrer: '',
        }
      }
    }
  },
  methods: {
    validate() {

      this.form.errors = {}

      if (this.form.values.fullName === '') {
        this.form.errors.fullName = 'Enter your full name'
      } else if (this.form.values.fullName !== some other validation) {
        ...
      }

      if (this.form.values.phoneNr === '') {
        this.form.errors.phoneNr = 'Enter your phone number'
      }


      if (this.form.values.referrer === '') {
        this.form.errors.referrer = 'Enter referrer'
      }


      // if errors is empty return true
      return !Object.keys(this.form.errors).length
    },
    submit() {
      if (this.validate()) {
        // do something, form is valid, if native form handler, return true/false
      }
    }
  }
}

<div class="form-control" :class="{invalid: form.errors.fullName}">
  <label for="name">Namn</label>
  <input id="name" type="text" v-model="fullName">
  <p v-if="form.errors.fullName">{{ form.errors.fullName }}</p>
</div>