Javascript 表单验证。使用 onfocus 聚焦输入字段时如何消除错误

Question

*我有点难以解释，但这是我的尝试...(仅供引用，我是菜鸟所以请放轻松)

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

我需要的是当用户关注一个框(使用 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;


}

validation.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;

}

Answer 1

document.getElementsByTagName('input').onfocus=function(){
    this.value='';
    this.style.border='';
    this.style.backgroundColor ='';
}