Javascript Form Validation.如何使用 OnFocus 在输入字段上时消除错误

>*我有点难以解释，但这是我的尝试......（仅供参考，我是菜鸟，所以请放轻松）

目前，当您提交表单时，任何留黑的字段都会收到错误消息。该字段还会变为红色，并带有红色边框，向用户显示他们忘记将数据放入框中。标签也从黑色变成红色。

我需要的是当用户专注于一个框（使用 onfocus）时，代码会将字段标签的颜色更改回常规黑色，并删除字段周围的红色框，指示用户已更正错误。

索引.htm：

<form name="myForm">
        <legend>Customer Information</legend>
    <fieldset id="custInfo">
        <article id="errorFName"></article>
        <article id="errorLName"></article>
        <article id="errorAddress"></article>
        <article id="errorCity"></article>
        <article id="errorState"></article>
        <article id="errorZip"></article>
        <article id="errorUsername"></article>
        <article id="errorPassword"></article>
        <article id="errorAgreement"></article>
        <article id="passwordMatchMessage"></article>

        <label id="firstNameLabel" for="firstName">First Name:</label>
        <input type="text" name="firstName" id="firstName" />

        <label type="text" for="middleInitial">Middle Initial:</label>
        <input name="middleInitial" id="middleInitial" size="2" />
        <label id="lastNameLabel" for="lastName">Last Name:</label>
        <input type="text" name="lastName" id="lastName" 
               placeholder="Last Name"/>

        <label id="streetAddressLabel" for="streetAddress">Street Address:</label>
        <input name="streetAddress" id="streetAddress" />

        <label id="cityLabel" for="city">City:</label>
        <input type="text" name="city" id="city" placeholder="Tulsa"/>

        <label id="stateLabel" for="state">State:</label>
        <input type="text" name="state" id="state" placeholder="OK"/>

        <label id="zipLabel" for="zip">Zip Code:</label>
        <input name="zip" id="zip" 
               placeholder="xxxxx (-xxxx)"/>

        <label id="usernameLabel" for="username">Username:</label>
        <input name="username" id="username" 
               placeholder="username"/>

        <label id="passwordLabel" for="password">Password:</label>
        <input type="password" name="password" id="password" 
               placeholder="password"/>

        <label id="confirmPasswordLabel" for="confirmPassword">Password Confirmation:</label>
        <input type="password" name="confirmPassword" id="confirmPassword" onkeyup="passwordMatch(); return false;"/>

        <label id="userAgreement">
        <input type="checkbox" name="userAgreement" id="userAgreement" />
        By clicking the checkbox, you agree to our Terms and that you have read our <a href="#">Data Use Policy</a>, including our <a href="#">Cookie Use</a>.
        </label>  
        <p>
            <button id="submitButton" onclick="return validateForm();">Submit</button>
            <button id="resetButton">Reset</button>
        </p>
    </fieldset>

    </form>

风格.css：

/* Styles for Fieldset*/
body {
background: #E8E8E8 ;
}
form {
width: 500px;
margin: 50px;
}
fieldset#custInfo {
background-color: #99ccff;
border: 2px solid #0066ff;
}
legend {
background-color: #0066ff;
color: white;
padding: 10px 0px;
text-indent: 10px;
width: 100%;
}

/*Styles for labels*/
label{
clear: left;
display: block;
float: left;
font-size: 0.9em;
margin: 13px 4% 7px 5px;
width: 150px;
}
label#userAgreement {
margin: auto;
width: 100%;
font-size: 0.8em;
}
/*Styles for input*/
input {
display: block;
float: left;
font-size: 0.9em;
height: 25px;
margin: 7px 0px;
width: 250px;
}
input#userAgreement {
width: 15px;
margin: auto 5px;
}
/*style for Buttons*/

button {
display: block;
float: left;
height: 40px;
width: 200px;
margin: 0px 11px;
}

article {
display: block;
font-size: 0.9em;
color: red;
margin: 7px 10px;

}

验证.js（我为混乱的代码道歉，我是菜鸟）

function validateForm() {
var firstName = document.getElementById('firstName');
var firstNameLabel = document.getElementById('firstNameLabel')
var lastName = document.getElementById('lastName')
var lastNameLabel = document.getElementById('lastNameLabel')
if( firstName.value == "" )
{
        firstName.style.border = "1px solid red";
        firstName.style.backgroundColor = "#FFCCCC";
        firstNameLabel.style.color = "red";
        errorFName.innerHTML = 'First Name cannot be left blank!';
}

if( document.getElementById('lastName').value == "" )
{
        lastName.style.border = "1px solid red";
        lastName.style.backgroundColor = "#FFCCCC";
        lastNameLabel.style.color = "red";
        errorLName.innerHTML = 'Last Name cannot be left blank!';
}
if( document.getElementById('streetAddress').value == "" )
{
        document.getElementById('streetAddress').style.border = "1px solid red";
        document.getElementById('streetAddress').style.backgroundColor = "#FFCCCC";
        document.getElementById('streetAddressLabel').style.color = "red";
        errorAddress.innerHTML = 'Address cannot be left blank!';
}
if( document.getElementById('city').value == "" )
{
        document.getElementById('city').style.border = "1px solid red";
        document.getElementById('city').style.backgroundColor = "#FFCCCC";
        document.getElementById('cityLabel').style.color = "red";
        errorCity.innerHTML = 'City cannot be left blank!';
}
if( document.getElementById('state').value == "" )
{
        document.getElementById('state').style.border = "1px solid red";
        document.getElementById('state').style.backgroundColor = "#FFCCCC";
        document.getElementById('stateLabel').style.color = "red";
        errorState.innerHTML = 'State cannot be left blank!';
}
if( document.getElementById('zip').value == "" )
{
        document.getElementById('zip').style.border = "1px solid red";
        document.getElementById('zip').style.backgroundColor = "#FFCCCC";
        document.getElementById('zipLabel').style.color = "red";
        errorZip.innerHTML = 'Zip Code cannot be left blank!';
}
if( document.getElementById('username').value == "" )
{
        document.getElementById('username').style.border = "1px solid red";
        document.getElementById('username').style.backgroundColor = "#FFCCCC";
        document.getElementById('usernameLabel').style.color = "red";
        errorUsername.innerHTML = 'Username cannot be left blank!';
}
if( document.getElementById('password').value == "" )
{
        document.getElementById('password').style.border = "1px solid red";
        document.getElementById('password').style.backgroundColor = "#FFCCCC";
        document.getElementById('passwordLabel').style.color = "red";
        errorPassword.innerHTML = 'The Password cannot be left blank!';
}
if( document.myForm.confirmPassword.value == "") 
{
        document.getElementById('confirmPassword').style.border = "1px solid red";
        document.getElementById('confirmPassword').style.backgroundColor = "#FFCCCC";
        document.getElementById('confirmPasswordLabel').style.color = "red";
}
if( document.myForm.userAgreement.checked == false)
{
    document.getElementById('userAgreement').style.color = "red";
    errorAgreement.innerHTML = 'You must agree to our User Agreement by checking the Box!'
}

return false;
}        

function passwordMatch() {
var password = document.getElementById('password');
var confirmPassword = document.getElementById('confirmPassword');
var message = document.getElementById('passwordMatchMessage');

if(password.value == confirmPassword.value){
    myForm.confirmPassword.style.backgroundColor = "#66CC66";
    message.innerHTML = 'Passwords Match!';
}
else {
    myForm.confirmPassword.style.backgroundColor = "#FFCCCC";
    message.innerHTML = 'Passwords Do Not Match!';
}
return false;
}