How to validate a form with JS then post it using PHP

Question

I have a form that I'm trying to validate using Javascript. The script works as intended, more or less. The issue is, I want to check whether the form is validated or not. If it is, I want to submit it to the database using PHP. If it's not, I don't want it to submit.

PS: the Javascript code works successfully insofar as displaying success/error messages.

My code looks like this:

const form = document.getElementById('form')
const firstName = document.getElementById('first-name')
const lastName = document.getElementById('last-name')
const username = document.getElementById('username')
const email = document.getElementById('email')

form.addEventListener('submit', (e) => {
    e.preventDefault();
    checkInputs();
})

function checkInputs(){
    const firstNameValue = firstName.value.trim();
    const lastNameValue = lastName.value.trim();
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();

    if(firstNameValue === ''){
        setErrorFor(firstName, 'First name cannot be blank');
    } else {
        setSuccessFor(firstName);
    }

    if(lastNameValue === ''){
        setErrorFor(lastName, 'Last name cannot be blank');
    } else {
        setSuccessFor(lastName);
    }

    if(usernameValue === ''){
        setErrorFor(username, 'Username cannot be blank');
    } else {
        setSuccessFor(username);
    }


    if(emailValue === ''){
        setErrorFor(email, 'Email cannot be blank');
    } else if (!isEmail(emailValue)){
        setErrorFor(email, 'Email is not valid');
    } else {
        setSuccessFor(email)
    }
}

function setErrorFor(input, message){
    const formControl = input.parentElement; // .input
    const msg = formControl.querySelector('.message');

    msg.innerText = message;

    formControl.classList.remove('success');
    formControl.classList.add('error');
}

function setSuccessFor(input){
    const formControl = input.parentElement; // .input
    formControl.classList.add('success');
}

function isEmail(email){
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}

<form method="POST" id="form">
  <div class="inputs">
    <div class="input">
      <label>First Name:</label>
      <input type="text" id="first-name" name="first-name" class="form-control" placeholder="First name">
      <div class="message">Error message</div>
    </div>
    <div class="input">
      <label>Last Name:</label>
      <input type="text" id="last-name" name="last-name" class="form-control" placeholder="Last name">
      <div class="message">Error message</div>
    </div>
    <div class="input">
      <label>Username:</label>
      <input type="username" id="username" name="username" class="form-control" placeholder="Username">
      <div class="message">Error message</div>
    </div>
    <div class="input">
      <label>Email Address:</label>
      <input type="email" id="email" name="email" class="form-control" placeholder="Email address">
      <div class="message">Error message</div>
    </div>
  </div>
  <input type="submit" name="save" class="btn btn-1" value="Save changes">
</form>