*我有点难以解释，但这是我的尝试...(仅供引用，我是菜鸟所以请放轻松)
目前，当您提交表单时，任何留黑的字段都会收到一条错误消息。该字段也会变成红色，并带有红色边框，向用户表明他们忘记将数据放入框中。标签也从黑色变为红色。
我需要的是当用户关注一个框(使用 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;
}
最佳答案
document.getElementsByTagName('input').onfocus=function(){
this.value='';
this.style.border='';
this.style.backgroundColor ='';
}
关于Javascript 表单验证。使用 onfocus 聚焦输入字段时如何消除错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19853613/