Hi so I'm trying to make my page redirect to 'confirmationpage.html' only when all the fields are correctly entered. This is my Javascript, how would I go about doing this?
const form = document.getElementById('form');
const name = document.getElementById('name');
const email = document.getElementById('email');
const subject = document.getElementById('subject');
const text = document.getElementById('text');
form.addEventListener('submit', function(e) {
e.preventDefault();
checkInputs();
});
function checkInputs() {
// get values from the inputs
const nameValue = name.value.trim();
const emailValue = email.value.trim();
const subjectValue = subject.value.trim();
const textValue = text.value.trim();
if(nameValue === '') {
// show error message
// add error class
setErrorFor(name, 'Name cannot be blank');
} else {
// add success class
setSuccessFor(name);
}
if(emailValue === '') {
setErrorFor(email, 'Email cannot be blank');
} else if(!isEmail(emailValue)) {
setErrorFor(email, 'Please enter a valid email address');
} else {
setSuccessFor(email);
}
if(subjectValue === '') {
setErrorFor(subject, 'A subject is required');
} else {
setSuccessFor(subject);
}
if(textValue === '') {
setErrorFor(text, 'Please add some text');
} else {
setSuccessFor(text);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement; // .form-control
const small = formControl.querySelector('small');
// add error message
small.innerText = message;
// add error class
formControl.className = 'form-control error';
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
function isEmail(email) {
return /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*.test(email);
}
Any help would be very appreciated! I'm very new to webpage design and I've been struggling a lot recently