Using different variables with the same javascript function

I am trying to create a generic Javascript function that I can use to verify different field values and output the error message alongside the correct field. I would like to create an efficient, reusable function, but I am new to Javascript and am unsure how to proceed.

Advise on how to change my validation function to validate both firstname and lastname would be appreciated.

My code so far:

function validateForm() {
    var x = document.forms["myForm"]["firstname"].value;
    var reg_azs = /^[^a-zA-Z\-']+$/;
    var reg_oal = "!#$%^&*()+=[]\\\';,{}|\":<>?123456790";

    if (x == null || x == "") {
        document.getElementById("fn").innerHTML = "This fuild is required.";
        return false;
    } else if (reg_azs.test(firstname.value)) {
        document.getElementById("fn").innerHTML = "Only alphabetic letters.";
        return false;
    } else {
        for (var i = 0; i < x.length; i++) {
            if (reg_oal.indexOf(x.charAt(i)) != -1) {
                document.getElementById("fn").innerHTML = "Only alphabetic letters.";
                return false;
            }
        }
    } else {
        document.getElementById("fn").innerHTML = "correct";
        return true;
    }
}

My Form:

<form name="myForm" action="connection.php" method="post">
    <label for='firstname'>First Name:</label>
    <input type="text" id="firstname" name="firstname" onchange="return validateForm()" />
    <err1 id="fn"></err1>
    <br>  

    <label for='lastname'>Last Name:</label>
    <input type="text" id="lastname" name="lastname" onchange="return validateForm()" />
    <err1 id="ln"></err1>
    <br>
</form>