Input fields validation in contact form - HTML/CSS

Issue

I have the following code:

//Contact Form Redirection
var form = document.getElementById("my-form");

async function handleSubmit(event) {
  event.preventDefault();
  var data = new FormData(event.target);
  fetch(event.target.action, {
    method: form.method,
    body: data,
    headers: {
      'Accept': 'application/json'
    }
  }).finally(() => {
    window.location = "thankyou.html";
  });
}
form.addEventListener("submit", handleSubmit)

//Contact Form Error Animation 
document.querySelector('form').addEventListener('submit', function (e) {
  var isValid = true;
  this.querySelectorAll('input, textarea').forEach(function (f) {
    if (!f.checkValidity()) {
      isValid = false;
      f.style.borderColor = "red";
      f.style.animation = "shake 0.82s forwards";
      setTimeout(function () { f.style.animation = "unset"; }, 820);
    } else {
      f.style.borderColor = "initial";
    }
  })
  if (!isValid) {
    e.preventDefault();
  }
})

/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div style="text-align:center">
        <div class="section-title">
          <h2><br/>Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
      <div class="row">
        <div class="column">
          <form name="myform" action="https://formspree.io/f/xdobkgny" id="my-form" method="POST" novalidate>
            <label for="firstname">First Name</label>
            <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Your Email.." required>
            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
            <input type="submit" value="Submit">
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

The form is running fine except it redirects to a page when there is no input in the field and when the error is thrown. Basically, it should not redirect me to a page when there is nothing typed in the input fields whereas its redirecting me to thankyou.html even when there is nothing in the input fields.

See this clip for the output I'm getting:

https://watch.screencastify.com/v/BSkuGitl5ACHDWEvGziM

How can I avoid this?

Update

https://watch.screencastify.com/v/RkgLmLAGztVduI26LV55

the animation does not work on one input field and I also would like the "please fill out this field" message to be removed and only have the shake animation

UPDATE2

Apparently, this is the JS code that sends the responses to email, so can you use this to make changes to your code?

var form = document.getElementById("my-form");

async function handleSubmit(event) {
  event.preventDefault();
  var data = new FormData(event.target);
  fetch(event.target.action, {
    method: form.method,
    body: data,
    headers: {
      'Accept': 'application/json'
    }
  }).finally(() => {
    window.location = "thankyou.html";
  });
}
myform.firstname.oninvalid = badEntrie
myform.lastname.oninvalid = badEntrie
myform.email.oninvalid = badEntrie
myform.subject.oninvalid = badEntrie

function badEntrie({ target }) {
  target.classList.add('shakingErr')
  setTimeout(() => { target.classList.remove('shakingErr') }, 820)
}
form.addEventListener("submit", handleSubmit)

Solution

Try that :

const form = document.forms.myform // HTML: <form name="myform" 
  ;
form.onsubmit = e =>
  {
  e.preventDefault()
  let data = Object.fromEntries( new FormData(form).entries())

  let validationOK = true
  for (let entrie in data) 
    {
    if (!form[entrie].checkValidity())
      {
      validationOK = false
      form[entrie].classList.add('shakingErr') 
      setTimeout(() => { form[entrie].classList.remove('shakingErr') }, 820)
      }
    }
  if (validationOK)
    {
    fetch( form.action,
      { method: 'POST'
      , headers:
        { 'Accept'       : 'application/json'
        , 'Content-Type' : 'application/json; charset=UTF-8'
        }
      , body: JSON.stringify(data)
      })
    .finally(() => { window.location = 'thankyou.html' })
    }
  }

input,
select,
textarea {
  width         : 100%;
  padding       : 12px;
  border        : 1px solid #555;
  margin-top    : 6px;
  margin-bottom : 16px;
  resize        : vertical;
  }
textarea {
  height        : 170px;
  }
button {
  background-color : #0563bb;
  color            : white;
  padding          : 12px 20px;
  border           : none;
  cursor           : pointer;
  }
button:before {
  content        : attr(type);
  text-transform : capitalize;
  }
button:hover {
  opacity : 0.9;
  }
.contactform {
  position                  : relative;
  border-radius             : 50px;
  background-color          : #f2f2f2;
  padding                   : 5px;
  z-index                   : 2;
  display                   : block;
  margin-left               : auto;
  margin-right              : auto;
  margin-bottom             : auto;
  margin-top                : 1%;
  width                     : 100%;
  animation-name            : gradient;
  animation-duration        : 3s;
  animation-iteration-count : infinite;
  }
.contactform:hover {
  animation-name            : gradient;
  animation-duration        : 15s;
  animation-iteration-count : infinite;
  }
div.contactform > div:not(.row) {
  text-align : center;
  }
.column {
  float        : center;
  width        : 50%;
  margin-top   : 6px;
  padding      : 20px;
  display      : block;
  margin-left  : auto;
  margin-right : auto;
  }
.row:after {
  content : "";
  display : table;
  clear   : both;
  }
@media screen and (max-width: 600px) {
  .column,
  button {
    width      : auto;
    margin-top : 0;
    }
  }
.shakingErr {
  border-color: red;
  animation   : shake 0.82s forwards;
}
@keyframes shake {
  10%,90%     { transform: translate3d(-1px, 0, 0); }
  20%,80%     { transform: translate3d( 2px, 0, 0); }
  30%,50%,70% { transform: translate3d(-4px, 0, 0); }
  40%,60%     { transform: translate3d( 4px, 0, 0); }
  }

<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div>
        <div class="section-title">
          <h2><br/>Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
      <div class="row">
        <div class="column">
          <form name="myform" action="https://formspree.io/f/xdobkgny" method="POST" novalidate >
            <label>First Name</label>
            <input name="firstname" type="text"  placeholder="Your First Name.." required>
            <label>Last Name</label>
            <input  name="lastname" type="text"  placeholder="Your Last Name.." required>
            <label>Email:</label>
            <input name="email"     type="email" placeholder="Your Email.." required>
            <label>Subject</label>
            <textarea  name="subject" placeholder="Lets Collaborate.." required></textarea>
            <button type="submit"></button>  
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Answered By - Mister Jojo