Alert Value Not Populating Dialog Box

Viewed 10

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>  
0 Answers
Related