Making a JS/HTML validation form for my website. The form works great but I want to show an alert dialog box showing the users inputs before submitting successfully. I initialize var dataPreview to return if no errors occur, however upon pressing submit, it goes straight to the confirmation page. Any feedback is appreciated!
function validateForm(){
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var address = document.contactForm.address.value;
var birth = document.contactForm.birth.value;
var nameErr = emailErr = mobileErr = addressErr = birthErr = true;
if(name == "") {
printError("nameErr", "Please enter your name");
} else {
var regex = /^[a-zA-Z\s]+$/;
if(regex.test(name) === false) {
printError("nameErr", "Please enter a valid name");
} else {
printError("nameErr", "");
nameErr = false;
}
}
if(email == "") {
printError("emailErr", "Please enter your email address");
} else {
// Regular expression for basic email validation
var regex = /^\S+@\S+\.\S+$/;
if(regex.test(email) === false) {
printError("emailErr", "Please enter a valid email address");
} else{
printError("emailErr", "");
emailErr = false;
}
}
if(mobile == "") {
printError("mobileErr", "Please enter your mobile number");
} else {
var regex = /^[1-9]\d{9}$/;
if(regex.test(mobile) === false) {
printError("mobileErr", "Please enter a valid 10 digit mobile number");
} else{
printError("mobileErr", "");
mobileErr = false;
}
}
if(address == "") {
printError("addressErr", "Please enter your address");
} else {
var regex = /^[a-zA-Z\s]+$/;
if(regex.test(address) === false) {
printError("addresasErr", "Please enter a valid name");
} else {
printError("addressErr", "");
addressErr = false;
}
}
if(birth == "") {
printError("birthErr", "Please enter your birthday");
} else {
var regex = /^[a-zA-Z\s]+$/;
if(regex.test(birth) === false) {
printError("birthErr", "Please enter a valid birthday");
} else {
printError("birthErr", "");
birthErr = false;
}
}
***if((nameErr || emailErr || mobileErr || addressErr || birthErr) == true){
return false;
} else{
var dataPreview = "You have entered the following information: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Address: " + address + "\n" +
"Birthday: " + birth + "\n";
alert(dataPreview);
}
}
</script>