Why does my JavaScript seems to not run in my HTML

Sorry for any formatting error, first time posting. Sorry if similar of this is already answered, I couldn’t find it anywhere (or I’m just bad at searching).

I’m doing a page to register user to my website, my javascript doesn’t work and I can’t find what’s wrong with it.

My html file does not display the alertbox which supposed to run if I leave my box empty, putting in the wrong characters, etc.

registration.html

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Registration Form</title>
</head>
<body onLoad="document.registration.userID.focus();">
<h1>Registration Form</h1>
<form name="registration" onSubmit="return validation();">
<label for="userID">User ID</label><br><input id="userID" name="userID" placeholder="Enter your ID" type="text"/><br>
<label for="userPass">Password</label><br><input id="userPass" name="userPass" placeholder="Enter your password" type="password" /><br>
<label for="userName">Username</label><br><input id="userName" name="userName" placeholder="Enter your username" type="text" /><br>
<label for="addr">Address</label><br><input id="addr" name="addr" placeholder="eg. Tamara Residence" type="text" /><br>
<label for="ctry">Country</label><br><select id="ctry" name="ctry">
    <option value="DEF">Please select your country</option>
    <option value="MY">Malaysia</option>
    <option value="IN">India</option></select><br>
<label for="zip">Zip Code</label><br><input id="zip" name="zip" placeholder="eg. 25565" type="text" /><br>
<label for="email">Email</label><br><input id="email" name="email" placeholder="eg. [email protected]" type="text" /><br>
Sex<br>
    <input type="radio" id="1" name="sex" value="1">
    <label for="1">Male</label><br>
    <input type="radio" id="2" name="sex" value="2">
    <label for="2">Female</label><br>
Language<br>
    <input type="checkbox" id="EN" name="EN" value="English">
    <label for="EN">English</label><br>
    <input type="checkbox" id="MY" name="MY" value="Malay">
    <label for="MY">Malay</label><br>
<label for="about">About</label><br>
    <textarea id="about" name="about" rows="4" cols="50">
    </textarea><br><br>
<input name="submit" type="submit" value="Register" />
</form>
<script src="formValidation.js" type="text/javascript"></script>
</body>
</html>

formValidation.js

function validation(){
    var userID = document.registration.userid;
    var userPass = document.registration.password;
    var userName = document.registration.name;
    var addr = document.registration.address;
    var ctry = document.registration.country;
    var zip = document.registration.zip;
    var email = document.registration.email;
    var sex = document.registration.sex;
    
    if (userID_validate(userID,5,12)) {
        if (userPass_validate(userPass,7,12)) {
            if (alphabet_validate(userName)) {
                if (alphanumeric_validate(addr)) {
                    if (empty_validate(ctry)) {
                        if (allnumeric_validate(zip)) {
                            if (emailformat_validate(email)) {
                                if (sex_validate(sex)) {
                                    
                                }
                            }
                        }
                    }
                } 
            }
        }
    }
    return false;
}
    
    function userID_validate(userID,a,b) {
        //length of string
        var userID_length = userID.value.length;
        if (userID_length == 0 || userID_length >= a || userID_length < b) {
            alert("ID should not be empty / length should be between " + a + " to " + b + " characters");
            userID.focus();
            return false;
        }
        return true;
    }
            
    function userPass_validate(userPass,a,b) {
        //length of string
        var userPass_length = userPass.value.length;
        if (userPass_length == 0 || userPass_length >= a || userPass_length < b) {
            alert("Password should not be empty / length should be between " + a + " to " + b + " characters");
            userPass.focus();
            return false;
        }
    }
            
    function alphabet_validate(userName) {
        var betReg = /^[A-Za-z]+$/;
        if (userName.value.match(betReg)) {
            return true;
        }
        else {
            alert("Username should only contain alphabet");
            userName.focus();
            return false;
        }
    }
    
    function alphanumeric_validate(addr) {
        var betnumReg = /^[0-9A-Za-z]+$/;
        if (addr.value.match(betnumReg)) {
            return true;
        }
        else {
            alert("Address can only be alphanumeric");
            addr.focus();
            return false;
        }
    }
    
    function empty_validate(ctry) {
        if(ctry.value == "DEF"){
            alert("Please select a country");
            ctry.focus();
            return false;
        }
        else
            return true;
    }
    
    function allnumeric_validate(zip) {
        var numReg = /^[0-9]+$/;
        if (zip.value.match(numReg)) {
            return true;
        }
        else {
            alert("ZIP Code should only contain only numbers");
            zip.focus();
            return false;
        }
    }
    
    function emailformat_validate(email) {
        var emailReg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-][email protected][a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
        if(email.value.match(emailReg))
            return true;
        else {
            alert("Please enter in a correct email address format");
            email.focus();
            return false;
        }
    }
    
    function sex_validate(sex) {
        var formValid = false;
        var x = 0;
        while (!formValid && x < document.getElementById("sex").length) {
            if (document.getElementById("sex")[x].checked) 
                formValid = true;
            x++;        
        }

        if (!formValid){
            alert("Please select male or female");
            sex.focus();
            return false;
        }
        else {
            alert("Form successfully submitted, thank you for registering!");
            window.location.reload();
            return true;
        }
    }

Answer

Did you check the error on Console via doing Inspect Element? I copied the same code as you mentioned in Question and getting this error in Console.

Uncaught TypeError: userID is undefined

In your formValidation.js, please update the

var userID = document.registration.userid;

With correct userID as follow.

var userID = document.registration.userID;