How to prevent user from submitting text that already exists in a remote api?

Question

I am creating a VueJS app that contains a list of names called divisions . The user can submit a new name for a division and can also update a division name. The names of the divisions are received from a remote api and any edits made are then also sent to the api via a PUT request. This works well.

However, the problem is how can I prevent a user from submitting a division name that already exists ?

I have a parent component (named Divisions.vue ) that contains a GET request like so:

  methods: {
    async getAllDivisions() {
      try {
        this.divisions = (await ApiService.getAllDivisions()).data
      } catch (error) {
        console.error(error)
      }
    }
  },

Here is how I have my code set up in a file called DivisionEdit.vue

Template HTML:

<form @submit.prevent="onSubmitUpdate">

    Division Name:
    <input type="text" v-model="division.division" />
    <button type="submit">
      Update Division
    </button>

</form>

Script section:

data() {
    return {
      division: {
        division: '',
        division_id: null
      },

methods: {
    onSubmitUpdate() {
    ApiService.updateDivision(this.division)
  }
}

And I have the api service code like so in apiService.js :

 updateDivision(division) {
    return this.getApiClient().put('/Divisions', division)
  }

Answer 1

You already have all the divisions in the parent component, you can pass that as a props to child component

And in the child component before onSubmitUpdate, you can have two approaches here

1) you can disable the update button by default, and have validation for the input division by adding @input event -> check division if already exist, if not enable the button

<form @submit.prevent="onSubmitUpdate">

    Division Name:
    <input type="text" v-model="division.division" @input="divisionExists" />
    <button type="submit" :disabled="btnDisable">
      Update Division
    </button>

</form>

In Script: 

props: {
  divisions: Object,
},
data() {
    return {
      division: {
        division: '',
        division_id: null
      },
      btnDisable: true,
   }
}
methods: {
    divisionExists() {
      if (this.divisions.map(x => x.division).includes(this.division.division)){
        this.btnDisable = true
      } else {
        this.btnDisable = false;
      }
    },
    onSubmitUpdate() {
    ApiService.updateDivision(this.division)
  }
}

2) You can dirrectly add a condition in the onSubmitUpdate method to check if the edit division is already exist it will not trigger update api

onSubmitUpdate() {
if (!this.divisions.map(x => x.division).includes(this.division.division)){
            ApiService.updateDivision(this.division)
         }
    }