So I have this app where I have to add a valid address in order to get a delivery fee.

My Problem is if I don't fill out any of the inputs and click my button, it will just show the error in my console, but the user won't know what happened and the function runs regardless of any inputs being added or not.

How do I make my button not run the function unless the inputs are filled out? Also, how do I display the error message on my browser?

Here is my Function

async function getFee() {
  const payload = getFormValues();
  const finalPayload = JSON.stringify(payload);

  const response = await fetch("/get-fee", {
    method: "POST",
    body: finalPayload,
    headers: { "Content-Type": "application/json" },
  })
    .then(async (response) => {
      const resp = await response.json();
      return resp;
    })
    .catch((rejected) => {
      console.log(rejected);
    });
}

Then I have my button in my HTML

 <button id="btn1" onclick="getFee()">
      Calculate Delivery Fee
    </button>

The problem is if I try to add required to my inputs, it does nothing since I am connecting to an API and using the data from my inputs to get the delivery fee.