Vue JS - button disabled before all validation errors are met

Question

I have a button that is meant to be disabled before all validation requirements are met. However the button is disabled only when I click it the first time and allow the validation errors to show up. I would like my button to be disabled from the beginning until all inputs are entered accordingly. Can someone assist with this, please?

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">
      School toevoegen
   </button>
</template>

Use isInvalid as a computed each time the data changes the isInvalid property will be updated — RajkumarG
– RajkumarG, Commented Mar 15, 2021 at 16:23

tony19 · Accepted Answer · 2021-03-15 22:56:27Z

1

Assuming isInvalid is a data property, initialize it to true, and only change it to false when you confirm the inputs are valid (in handleSubmit()):

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

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

Also, your disabled binding looks incorrect. It disables the button when the form specifies an invalid state AND when no town is selected, but I think you meant to use an OR condition (assuming that a town selection is required).

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

:disabled="isInvalid || !selectedTown" ✅

answered Mar 15, 2021 at 22:56

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue JS - button disabled before all validation errors are met

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related