How to implement loader after form validation using JavaScript?

Question

My idea is to show loader circle after clicking a form submit button, because it's take some time to redirect user to page which let you know that form is submitted successfully. But with my limited JavaScrip knowledge I can't figure it out how to start loader only if user have filed out all required fields. Is it possible using JavaScript?

Here is my HTML code:

        <form id="form">
          <input type="text" required>
          <button type="submit" class="button" onclick="this.classList.toggle('button--loading')">
            <span class="button__text">Save</span>
          </button>
        </form>

and CSS code:

.button {
  position: relative;
  padding: 8px 16px;
  background: #009579;
  border: none;
  outline: none;
  border-radius: 2px;
  cursor: pointer;
}

.button:active {
  background: #007a63;
}

.button__text {
  font: bold 20px "Quicksand", san-serif;
  color: #ffffff;
  transition: all 0.2s;
}

.button--loading .button__text {
  visibility: hidden;
  opacity: 0;
}

.button--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

You should research using an submit event handler on your form, preventing automatic submission with event.preventDefault(). Check to see if all fields are filled out. If not, don't continue. If so, trigger the loading code and allow the form to submit. I think you'll want your form to submit via ajax and then use JS to redirect the page afterwards if you want your loading code to stay on the screen. — Kinglish
– Kinglish, Commented Nov 28, 2022 at 21:02

user3221512 · Accepted Answer · 2022-11-28 22:01:50Z

1

You have to change your HTML slightly and also have to add this JS function:

<form id="form" onsubmit="return submitTheForm(this);">
    <input type="text" required>
    <button type="submit" class="button">
        <span class="button__text">Save</span>
    </button>
</form>

<script>
    function submitTheForm(theForm){
        const eButton = theForm.querySelector('button[type="submit"]');
        eButton.classList.toggle('button--loading');
    }
</script>

answered Nov 28, 2022 at 22:01

user3221512

2123 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jorgepelcastre · Accepted Answer · 2022-11-28 22:57:20Z

0

Only replace start and end animation

const form = document.getElementById('form');

const handleSubmit = (event) => {
  event.preventDefault();
  const data = new FormData(form);
  const url = "your url here";
  const options = {
     method: "POST",
     body: data
  } 
  // start animation
  fetch(url, options)
   .finally(() => {
     // end animation
   });
}

form.addEventListener('submit', handleSubmit);

edited Nov 28, 2022 at 22:57

answered Nov 28, 2022 at 21:52

jorgepelcastre

983 bronze badges

Collectives™ on Stack Overflow

How to implement loader after form validation using JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related