Form Validation (novice at Javascript)

I’m building a multi page quote application and when an <input> is filled out incorrectly the .js will inject a message via a <span> under the <input>.
That code appears to be working fine.

My issue is when multiple <inputs> are incorrectly filled out then corrected except one, the corrected <inputs> dont remove the injected message.

Could i have help with my code.
or maybe there is a better way to achieve this.

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-01-24/1579904367-72907-form.png]

Javascript

[code]var firstname, surname, email;

function _(x) {
return document.getElementById(x);
}
function processPhase1 () {
firstname = _(‘firstname’).value;
surname = _(‘surname’).value;
email = _(’email’).value;

if ((firstname == ”) || (!isNaN(firstname)) || (firstname.length <3)) {
_(‘firstnameError’).innerHTML = “please provide a first name for the inquiry”;
return false;
}
if ((surname == ”) || (!isNaN(surname)) || (surname.length <3)) {
_(‘surnameError’).innerHTML = “please provide a surname for the inquiry”;
return false;
}
if ((email.indexOf(‘@’) <= 0) || (email == ”)) {
_(’emailError’).innerHTML = “please provide an email for the inquiry”;
return false;
} [/code]

HTML

[code]<input id=”firstname” type=”text” placeholder=”First Name*” class=”name” name=”firstname”>
<span id=”firstnameError”></span>[/code]

Edited by site staff: Inserted code tags “[code]your code here[/code]“

Also in #HTML _↴