javascript form submit prevent

Question

I am using the following function to override the onsubmit behavior of a form. However, it still submits the form.

function validate() {

    var mainForm = document.getElementById("form");
    mainForm.onsubmit = function (e) {
        e.preventDefault();
        alert("form submit prevented");
    }

    var x = document.forms["form"]["fname"].value;
    var y = document.forms["form"]["pname"].value;
    var email = document.forms["form"]["email"].value;
    var phone = document.forms["form"]["phone"].value;
    var date = document.forms["form"]["date"].value;
    var month = document.forms["form"]["month"].value;
    var year = document.forms["form"]["year"].value;


    window.load = function () {
        var myForm = document.getElementById('form');
        myForm.onsubmit = function (e) {
            return validate(); // will be false if the form is invalid
        }
    }

    if(x == null || x == "" || isNaN(x) == false) {
        alert("Check Name, It can't have numbers. You can use Roman numbers.");
        return false;
    } else if(y == null || y == "") {
        alert("Picture Name must be filled out");
        return false;
    } else if(email == '' || email.indexOf('@') == -1 || email.indexOf('.') == -1) {
        //alert("Insert valid Email Address");
        makeRed();
        return false;
    } else if(phone == '' || phone < 1000000000 || phone > 9999999999) {

        alert("Enter valid phone number");
        return false;

    } else if(date == '' || date < 01 || date > 31) {

        alert("Enter valid Date ");
        return false;

    } else if(month == '' || month < 1 || month > 12) {

        alert("Enter valid Month ");
        return false;

    } else if(year == '' || year < 1800 || year > 2016) {
        alert("Enter valid Year ");
        return false;

    }

    //Function used to make colors red instead of individual codelines
    function makeRed(inputDiv) {
        inputDiv.style.backgroundColor = "#AA0000";
        inputDiv.parentNode.style.backgroundColor = "#AA0000";
        inputDiv.parentNode.style.color = "#FFFFFF";
    }

    //Function made to clean the divs when the validation is met.
    function makeClean(inputDiv) {
        inputDiv.style.backgroundColor = "#FFFFFF";
        inputDiv.parentNode.style.backgroundColor = "#FFFFFF";
        inputDiv.parentNode.style.color = "#000000";
    }
}

Answer 1

Minor question, are you using:

<input type="submit">

Instead of:

<input type="button">

Using the latter, change your functions from:

mainForm.onsubmit = function(e){....

And add this to the end of your Validate function:

document.getElementById("myForm").submit();