Javascript form validation button: Proceed to the next page after form is valid

Question

My form validation works perfectly, but after the form is valid it dosen't proceed to the next page when i click on the submit button Here is the html for the code:

    <div class="header">
        <h2>Create Account</h2>
    </div>
    <form id="form" class="form" action="Iphone.html" method="post">
        <div class="form-control">
            <label for="username">Username</label>
            <input type="text" placeholder="Drake" 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="applehub@gmail.com" 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">Password</label>
            <input type="password" placeholder="Password" id="password"/>
            <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">Password check</label>
            <input type="password" placeholder="Password two" id="password2"/>
            <i class="fas fa-check-circle"></i>
            <i class="fas fa-exclamation-circle"></i>
            <small>Error message</small>
        </div>
        <input type="submit" value="Submit" name="">

        <a href="#" id="login"><p>Have an account? Login.</p></a>
    </form>
</div>

Here is the Javascript, i put the submit button e.preventDefault(); but i can't turn it of when the form is valid:

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

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();
    const password2Value = password2.value.trim();
    
    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, 'Not a valid email');
    } else {
        setSuccessFor(email);
    }
    
    if(passwordValue === '') {
        setErrorFor(password, 'Password cannot be blank');
    } else {
        setSuccessFor(password);
    }
    
    if(password2Value === '') {
        setErrorFor(password2, 'Password2 cannot be blank');
    } else if(passwordValue !== password2Value) {
        setErrorFor(password2, 'Passwords does not match');
    } else{
        setSuccessFor(password2);
    }
}

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);
}```

Answer 1

You need to manually redirect after you have checked that the validation is correct.

To redirect to another page, you can use: window.location = "http://www.yoururl.com";

If the application is SPA , use browserhistory.push('/uri');

Answer 2

This is caused by for e.preventDefault(); . If this function gets called, the inital action from the form gets 'disabled'.

I think in this situation the best case is to work with flags.
So the solution could look like this:

let is_form_checked = false;

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