Field Required Pop-up when Disabled Button is pressed?

Question

I hope everyone is well. I am trying to display a pop up for when a user attempts to submit a form when the required field is not filled out. Right now, the disabled part is functional, but I am running low on ideas that could work for this problem. I tried implementing another if statement in my async submit code, but alas, I was not successful. I have a feeling there is an easy fix to this, so I figured I would ask the geniuses. Anyways, here is some code that pertains to the following question. I will include everything that is related to the submit function below,

HTML

 <div>
          <button
            id="submitButton"
            :disabled="!localPartEntry.partNumber "
            @click="submitItem"
          >
            <i class="fas fa-paper-plane"></i>
            <span>Submit</span>
          </button>
        </div>

Typescript

async submitItem(): Promise<void> {
  this.localPartEntry.id = parseInt(this.id);
  if (await this.partStore.editPartDefinition(this.localPartEntry))
    if (await this.partStore.getParts())
      this.$router.push({
        path: `/`,
      });
},

Lastly, CSS

#submitButton
  border: 1px solid $primary-accent-color
  font-size: 1.5rem
  border-radius: .25rem
  cursor: pointer
  padding: .25rem .75rem
  transition: background .3s, color .3s
  color: $primary-accent-color
  background: transparent

  display: flex
  flex-direction: row
  justify-content: center
  align-items: center
  gap: .5rem

  &:hover
    color: $tertiary-background
    background: $primary-accent-color
.disabled
  background: grey !important

On a side note, the css id "Disabled" does not display grey when the submit button is disabled, so if anyone can see a quick fix to that it would be greatly appreciated! Thank you so much for your time and have a good day