Having trouble with the javascript file does not respond to html form

Question

I'm trying to make a javascript file to check the rules of a registration form but the alert does not pop up so I don't know which part is not working.

When I click the submit button, It goes straight to the PHP file instead of listing messages in an alert window.

function validate() {
    var name = document.getElementById("name").value;
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var confirmPassword = document.getElementById("confirm-password").value;
    var genderM = document.getElementById("gender-male").checked; //radio
    var genderF = document.getElementById("gender-female").checked; //radio
    var temperature = document.getElementById("temperature").checked; //checkbox
    var favourite = document.getElementById("favourite").checked; //select
    var email = document.getElementById("email").value;
    var errMsg = "";
    var result = true;

    if (name == "") {
        errMsg += "Please enter a name.\n";
    }
    
    if (username == "") {
        errMsg  += "Please enter a username.\n";
    }

    if (password == "") {
        errMsg += "Please enter a password.\n";
    }

    if (confirmPassword == "") {
        errMsg += "Please re-enter password.\n";
    }

    if (password != confirmPassword) {
        errMsg += "Confirm password does not match.\n";
    }

    if (email == "") {
        errMsg += "Please enter an email address.\n";
    }

    if (email.indexof('@') == 0) {
        errMsg += "Email address invalid.\n";
    }

    if (email.indexof('@') < 0) {
        errMsg += "Email address must contain an @ symbol.\n";
    }

    if ((genderM = "" )&&(genderF = "")) {
        errMsg += "Please enter a gender.\n";
    }

    if (temperature == "") {
        errMsg += "Please enter a drink temperature.\n";
    }

    if (favourite == "") {
        errMsg += "Please enter a favourite drink.\n";
    }

    if (errMsg != "") {
        alert (errMsg);
        result = false;
    }
    return result;
}

function init() {
    var register = document.getElementById("register"); //form id="register"
    register.onsubmit = validate;
}

window.onload = init();

I tried to double check all the posibilities error like missing ";" or wrong elements, etc. However, not thing seems to work for me.

Answer 1

try this

window.onload = init // assign function instead of calling it