Vue JS - preventing button from being enabled until all validation errors have been resolved

Question

Vue JS - preventing button from being enabled until all validation errors have been resolved

I am facing an issue with my button that is supposed to be disabled until all validation requirements are met. Currently, the button only gets disabled after I click it for the first time and encounter validation errors. I need the button to be disabled right from the start until all inputs are correctly entered. Can anyone provide assistance with this matter?

Form component

<template>
  <div class="form-wrapper">
    <form @submit.prevent="handleSubmit(sendFormData)" novalidate>
      <slot name="form-content"/>
      <slot name="button-submit" :is-invalid="isInvalid"/>
    </form>
  </div>
</template>

inputs component (only showing the button section for this part):

<template #button-submit="{isInvalid}">
   <button :disabled="isInvalid && !selectedTown"
      :class="{'button-main-disabled': isInvalid && !selectedTown}"
      type="submit"
      class="button-main button-add">
      Add School
   </button>
</template>

javascript vue.js validation button vuejs2

Answer 1

Answer №1

To start, if isInvalid is set as a data property, make sure to initialize it as true, and only update its value to false once the inputs are confirmed as valid (in the handleSubmit() method):

export default {
  data() {
    return {
      isInvalid: true 👈
    }
  },
  methods: {
    handleSubmit() {
      // validate data...

      this.isInvalid = false /* data is valid */
    }
  }
}

Another thing to note is that your usage of the disabled binding might not be accurate. It currently disables the button when the form is in an invalid state AND no town is selected, but perhaps you intended for an OR condition (assuming that selecting a town is mandatory).

:disabled="isInvalid && !selectedTown" ❌
                     ^^

:disabled="isInvalid || !selectedTown" ✅

Answer 2

To start, if isInvalid is set as a data property, make sure to initialize it as true, and only update its value to false once the inputs are confirmed as valid (in the handleSubmit() method):

export default {
  data() {
    return {
      isInvalid: true 👈
    }
  },
  methods: {
    handleSubmit() {
      // validate data...

      this.isInvalid = false /* data is valid */
    }
  }
}

Another thing to note is that your usage of the disabled binding might not be accurate. It currently disables the button when the form is in an invalid state AND no town is selected, but perhaps you intended for an OR condition (assuming that selecting a town is mandatory).

:disabled="isInvalid && !selectedTown" ❌
                     ^^

:disabled="isInvalid || !selectedTown" ✅

Vue JS - preventing button from being enabled until all validation errors have been resolved

Answer №1

Similar questions

Transformation of Array of Objects to Array of Values using Node.js

What is the best way to toggle the visibility of fields on a modal in a Ruby on Rails

Performing various tasks using a Single Change Event in JQuery/JavaScript

Loop through a JSON object using a sequence of setTimeout() functions

I attempted to utilize the prop to transfer an object, but unfortunately, the value was not received

Expanding a table by including a new column using Node.js and Knex

The functionality of the Regions plugin in wavesurfer.js appears to be completely nonfunctional

Using node.js to set the billing address while confirming a Stripe Payment intent

Can anyone guide me on troubleshooting the firebase import error in order to resolve it? The error message I am encountering is "Module not found: Error:

I am looking to create a cascading dropdown list in C# MVC that pulls data from various SQL tables. How can I achieve

What could be causing the dropdownlist value not to be selected or checked while using "Select2.js"?

The inefficiencies of the Vue composition API: Reasons why it may be failing to meet your expectations

Latitude and longitude coordinates in Leaflet Vue.js have been successfully updated

Verify whether the input from ng-model is numeric

How to implement v-tooltip with v-for in Vuetify?

The message "Error: Unknown custom element: <router-view> - have you properly registered the component?" is prompting for a solution

When the value remains unchanged, Angular's @Input() value does not get updated

What is the best way to send a file to a JavaScript function within Django?

Encountering an issue in Angular 8 where there is a difficulty in reading the property 'NODE_NDEBUG' when attempting to serve the application

AngularJS Infowindow Button