Validating 2 Form Fields And Setting Focus Not Working

I am trying to throw in some client-side validation to my php web form. My problem is that only one field is actually getting validated. Here is the code:

Form: onSubmit="return checkForm(this);"

script: function checkForm(form) {
var firstname = document.getElementById("wpFirstName").value;
var lastname = document.getElementById("wpLastName").value;

if (firstname == "") {
document.getElementById("firstNameError").style.display="inline";
document.getElementById("wpFirstName").select();
document.getElementById("wpFirstName").focus();
return false;
}else if (lastname == "") {
document.getElementById("lastNameError").style.display="inline";
document.getElementById("wpLastName").select();
document.getElementById("wpLastName").focus();
return false;
}
return true;
}

The if statement evaluating the last name field is the only statement that evaluates to true. It seems the first statment is bypassed. Any ideas? PS. the element with the id lastNameError/firstNameError is in a div tag.