Best way to validate qinput field on qbtn click with axios call

[happymax]

Hi all,
I have a simple form with some qinput fields that I want to validate before post the data to the backend server when the user click a button.

My code is this

<template>
...
<q-btn dense class="q-mt-sm q-ma-xs" color="green" icon="check_circle_outline"  @click="UpdateRow"/>
...
</template>
...
<script>
....
methods: {

      async UpdateRow () {
                
            this.descrerror = []
            if (this.orderrow.item.length === 0) {
               this.descrerror.push('Item code is wrong')
            } else {
               await RestfulServices.getitemdesc(this.orderrow.item).then(response => {
                  if (response.statusText !== 'OK' || response.data.length === 0) {
                     this.descrerror.push('Item does not exists.')
                }
              })
            }

          if (this.descrerror.length > 0) {
              this.validateerror = true
             return
           }
}
...
</script>

To get the item description from the backend server I use Axios and I had to use async and await istructions to prevent that the instructions following the request to the server from being executed before the server replied.

I thought about not using Vuelidate because several controls require access to the back-end server, but maybe it’s not a bad idea.

Do you have any advice to improve this code ?

Thank you

[Stanley]

@happymax I would suggest that doing the sync check(E.g. data format, null check) in the front end and doing the async check in the back end. What’s your implementation for the back end? Take J2EE for example, it can use the spring annotation @Validated @RequestBody to do the data check first, then post the data to the database.

[happymax]

@Stanley Thank you for the answer.
I use Golang for the back-end server and I only have to check the item code by making a call (with axios) to the back-end server; all other checks are carried out in Quasar.

[Stanley]

@happymax So it’s your decision. In my opinion, if you call the data validation API firstly then call the posting data API, there will be two network round-trips. Why not put them together?

[happymax]

@Stanley Its a good idea. I’ll try to modify my process. Thank you for the suggestion.