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"  method="post" action="">
  <div >
    <label for="username">Full Name</label>
    <input type="text" placeholder="Full Name" id="username" />
    <i ></i>
    <i ></i>
    <small>Error message</small>
  </div>
  <div >
    <label for="username">Email</label>
    <input type="email" placeholder="Email" id="email" />
    <i ></i>
    <i ></i>
    <small>Error message</small>
  </div>
  <div >
    <label for="username">Roll Number</label>
    <input type="text" maxlength="10" placeholder="Roll Number" id="password" />
    <i ></i>
    <i ></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

CodePudding user response：

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"  method="post" action="">
  <div >
    <label for="username">Full Name</label>
    <input type="text" placeholder="Full Name" id="username" />
    <i ></i>
    <i ></i>
    <small>Error message</small>
  </div>
  <div >
    <label for="username">Email</label>
    <input type="email" placeholder="Email" id="email" />
    <i ></i>
    <i ></i>
    <small>Error message</small>
  </div>
  <div >
    <label for="username">Roll Number</label>
    <input type="text" maxlength="10" placeholder="Roll Number" id="password" />
    <i ></i>
    <i ></i>
    <small>Error message</small>
  </div>

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