How to Do Form Validation for Inputs Using Fetch API?

Question

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.

At the beginning of `getFee` you should validate form input values. Could you share the full markup for the form? — bryce, Jun 15 '22 at 18:32
Keep the `required` attribute. Before doing the `fetch`, check `document.querySelector('form').checkValidity()` to see if it's true. See [MDN's article on form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#validating_forms_using_javascript) — Heretic Monkey, Jun 15 '22 at 21:22
Does this answer your question? [javascript: validate form before submit?](https://stackoverflow.com/questions/27918843/javascript-validate-form-before-submit) — Heretic Monkey, Jun 15 '22 at 21:23
See also [a way to check validity of HTML5 forms?](https://stackoverflow.com/q/5846382/215552) — Heretic Monkey, Jun 15 '22 at 21:24
the thing is I am not wrapping my inputs with a form. It literally just an input because I submit my data through JS, hence I don't need to use form tag — joesono1, Jun 16 '22 at 02:18
actually I just added a simple `form` tag around my app, and using that `checkValidity()` now shows the pop up error, but my issue is my function is still running when I click my button. I tried to add `preventDefault` but it says `Cannot read properties of undefined (reading 'preventDefault')` — joesono1, Jun 16 '22 at 02:38

score -1 · Answer 1 · answered Jun 15 '22 at 21:14

-1

Without seeing the form HTML I can only guess. But you could try the built-in HTML attribute for inputs, "required". https://www.w3schools.com/html/html_form_attributes.asp

answered Jun 15 '22 at 21:14

Logi Haraldsson

1
1

The OP mentions using the `required` attribute in their question. – Heretic Monkey Jun 15 '22 at 21:16
Also, don't bother guessing; wait until you have enough rep, then comment, asking for more detail. Until then, move to another question. – Heretic Monkey Jun 15 '22 at 21:17
I'm not using a form to get the data, so doesn't matter what I add to the html. I'm using Javascript with an API hence I have to use a different approach. The input is just there to get what I type, but that doesn't stop the button from running the function in JS – joesono1 Jun 16 '22 at 02:13
That's not a validation using fetch... – Y. Gherbi Jun 16 '22 at 11:07

How to Do Form Validation for Inputs Using Fetch API?

1 Answers1