How to redirect to another page when using preventDefault()?

Question

Can someone help me to redirect to another page(in my case, redirect to "cart page"). Im using preventDefault() to avoid from go to the other page before validate but after i use preventDefault(), even after the validation, im still on the same page. PLEASE HELP ME:(

<script type="text/javascript">
    const form = document.getElementById('form');
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 emailValue = email.value.trim();
const passwordValue = password.value.trim();


if(emailValue === '') {
setErrorFor(email, 'This field is required');
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'Not a valid email');
} else {
setSuccessFor(email);
}

if(passwordValue === '') {
setErrorFor(password, 'This field is required');
} else {
setSuccessFor(password);
}


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

function setSuccessFor(input) {
const formValidate = input.parentElement;
formValidate.className = 'form-validate 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);
}
}

  </script>

<form id="form" action="cart.html" method="get">
                <div class="form-validate">
                  <label class="form-label" for="email">Email</label>
                  <input class="form-input" id="email" type="text">
                        <small>Error message</small>
                </div>
                <div class="form-validate">
                  <label class="form-label" for="password">Password</label>
                  <input class="form-input" id="password" type="password">
                        <small>Error message</small>
                </div>
<div class="form-validate text-center">
                  <button class="btn btn-outline-dark" type="submit"><i class="fa fa-sign-in-alt me-2"></i> Log in</button>
                </div>
              </form>

score 0 · Answer 1 · answered Jul 09 '21 at 18:10

Store whether the form is valid in a variable named isValid and set it to false in your if statements should one of the fields be invalid.

After validation, check whether isValid is true. If it is, submit the form with form.submit():

const form = document.getElementById('form');
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 emailValue = email.value.trim();
  const passwordValue = password.value.trim();
  var isValid = true;

  if (emailValue === '') {
    setErrorFor(email, 'This field is required');
    isValid = false;
  } else if (!isEmail(emailValue)) {
    setErrorFor(email, 'Not a valid email');
    isValid = false;
  } else {
    setSuccessFor(email);
  }

  if (passwordValue === '') {
    setErrorFor(password, 'This field is required');
    isValid = false;
  } else {
    setSuccessFor(password);
  }

  if (isValid) {
    form.submit();
  }

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

  function setSuccessFor(input) {
    const formValidate = input.parentElement;
    formValidate.className = 'form-validate 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" action="cart.html" method="get">
  <div class="form-validate">
    <label class="form-label" for="email">Email</label>
    <input class="form-input" id="email" type="text">
    <small>Error message</small>
  </div>
  <div class="form-validate">
    <label class="form-label" for="password">Password</label>
    <input class="form-input" id="password" type="password">
    <small>Error message</small>
  </div>
  <div class="form-validate text-center">
    <button class="btn btn-outline-dark" type="submit"><i class="fa fa-sign-in-alt me-2"></i> Log in</button>
  </div>
</form>

How to redirect to another page when using preventDefault()?

1 Answers1