how to make form get submitted if form validation is success in javascript

Question

i have a simple form where i am doing some validations in javascript, the submit button is prevented by default to check if all validations are done the form is like below:

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');

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

  checkInputs();
});

function checkInputs() {
  // trim to remove the whitespaces
  const usernameValue = username.value.trim();
  const emailValue = email.value.trim();
  const passwordValue = password.value.trim();

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

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

  if (passwordValue === '') {
    setErrorFor(password, 'Roll number cannot be blank');
  } else if (passwordValue.length < 10) {
    setErrorFor(password, 'Roll number must be 10 digits');
  } else {
    setSuccessFor(password);
  }


}

function setErrorFor(input, message) {
  const formControl = input.parentElement;
  const small = formControl.querySelector('small');
  formControl.className = 'form-control error';
  small.innerText = message;
}

function setSuccessFor(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control 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 id="form" class="form" method="post" action="">
  <div class="form-control">
    <label for="username">Full Name</label>
    <input type="text" placeholder="Full Name" id="username" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>Error message</small>
  </div>
  <div class="form-control">
    <label for="username">Email</label>
    <input type="email" placeholder="Email" id="email" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>Error message</small>
  </div>
  <div class="form-control">
    <label for="username">Roll Number</label>
    <input type="text" maxlength="10" placeholder="Roll Number" id="password" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>Error message</small>
  </div>

  <button type="submit">Submit</button>
</form>

the validations are working fine, the issue if the form is not getting submitted if all validations are successful, can anyone please tell me how to accomplish this, thanks in advance

Answer 1

Not getting submitted becouse for e.preventDefault();. So e.preventDefault(); exicute when form is not valid otherwise not needed.

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');

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

function checkInputs() {
  // trim to remove the whitespaces
  const usernameValue = username.value.trim();
  const emailValue = email.value.trim();
  const passwordValue = password.value.trim();
  let error =true;
  if (usernameValue === '') {
    setErrorFor(username, 'Full name cannot be blank');
    error =false;
  } else {
    setSuccessFor(username);
  }

  if (emailValue === '') {
    setErrorFor(email, 'Email cannot be blank');
     error =false;
  } else if (!isEmail(emailValue)) {
    setErrorFor(email, 'Not a valid email');
     error =false;
  } else {
    setSuccessFor(email);
  }

  if (passwordValue === '') {
    setErrorFor(password, 'Roll number cannot be blank');
     error =false;
  } else if (passwordValue.length < 10) {
    setErrorFor(password, 'Roll number must be 10 digits');
     error =false;
  } else {
    setSuccessFor(password);
  }
  return error;

}

function setErrorFor(input, message) {
  const formControl = input.parentElement;
  const small = formControl.querySelector('small');
  formControl.className = 'form-control error';
  small.innerText = message;
}

function setSuccessFor(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control 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 id="form" class="form" method="post" action="">
  <div class="form-control">
    <label for="username">Full Name</label>
    <input type="text" placeholder="Full Name" id="username" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>Error message</small>
  </div>
  <div class="form-control">
    <label for="username">Email</label>
    <input type="email" placeholder="Email" id="email" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>Error message</small>
  </div>
  <div class="form-control">
    <label for="username">Roll Number</label>
    <input type="text" maxlength="10" placeholder="Roll Number" id="password" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>Error message</small>
  </div>

  <button type="submit">Submit</button>
</form>