-1
항목이 없는지 확인해야하는 양식이 있습니다. 지금 양식은 양식 필드의 색상을 빨간색으로 변경하지만 레이블을 빨간색으로 변경해야합니다. 레이블은 양식 요소가 아니기 때문에 현재의 방법으로 레이블을 변경하기가 어렵습니다. 구현할 수있는 모든 제안 사항이 있습니까?자바 스크립트로 HTML 레이블 색상 변경
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Test</title>
<script type="text/javascript">
function validate(){
var errors = new Array();
for(var x = 0; x < document.forms[0].elements.length; x++){
if(document.forms[0].elements[x].type == "text"){
if(document.forms[0].elements[x].value == ""){
errors.push("The " + document.forms[0].elements[x].name + " field cannot be blank.\n");
document.forms[0].elements[x].className = "in_error";
}
}
if(document.forms[0].elements[x].type == "select-one"){
if(document.forms[0].elements[x].selectedIndex == 0){
errors.push("The " + document.forms[0].elements[x].name + " field cannot be blank.\n");
document.forms[0].elements[x].className = "in_error";
}
}
if(document.forms[0].elements[x].type == "password"){
if(document.forms[0].elements[x].value == ""){
errors.push("The " + document.forms[0].elements[x].name + " field cannot be blank.\n");
document.forms[0].elements[x].className = "in_error";
}
}
}
if(errors.length == 0){
return true;
}else{
clear_errors(errors);
show_errors(errors);
return false;
}
}
function clear_errors(errors){
var div = document.getElementById("errors");
while(div.hasChildNodes()){
div.removeChild(div.firstChild);
}
}
function show_errors(errors){
var div = document.getElementById("errors");
for(var x = 0; x < errors.length; x++){
var error = document.createTextNode(errors[x]);
var p = document.createElement("p");
p.appendChild(error);
div.appendChild(p)
}
}
window.onload = function(){
document.forms[0].onsubmit = validate;
}
</script>
<style type="text/css">
#errors{
color: #F00;
}
.in_error{
background-color: #F00;
}
</style>
</head>
<body>
<div id="errors"></div>
<form action="http://ingenio.us.com/examples/echo" method="post">
<div class="mainContainer" style="width:650px; margin: 0 auto; text-align:center;">
<div class="contactInfo" style="text-align:center; width:650px;">
<fieldset>
<legend style="text-align:left;">Contact Info</legend>
<label id="firstNameLabel" for="firstName">First Name: </label><input name="First Name" id="firstName" type="text" size="15" maxlength="15" />
<label id="lastNameLabel" for="lastName">Last Name: </label><input name="Last Name" id="lastName" type="text" size="15" maxlength="15" />
<label id="middleInitialLabel" for="middleInitial">Middle Initial: </label><input name="Middle Initial" id="middleInitial" type="text" size="4" maxlength="1" /><br /><br/>
<label id="streetAddressLabel" for="streetAddress">Street Address: </label><input name="Street Address" id="streetAddress" type="text" size="58" maxlength="55" /> <br /><br />
<label id="cityLabel" for="city">City: </label><input name="City" id="city" type="text" size="30" maxlength="28" />
<label id="stateLabel" for="state">State: </label>
<select name="State" id="state">
<option></option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label name="zipLabel" for="zip">Zip: </label><input name="Zip" id="zip" type="text" size="7" maxlength="5" /><br /><br />
</fieldset>
</div><br /><br />
</div>
<div class="mainContainerTwo" style="width:450px; margin: 0 auto; text-align:center;">
<div class="userInfo" style="text-align:center; width:450px;">
<fieldset>
<legend style="text-align:left;">User Info</legend>
<label name="usernameLabel" for="username">Username: </label><input name="Username" id="username" type="text" size="20" maxlength="15" /><br /><br />
<label name="passwordLabel" for="password">Password: </label><input name="Password" id="password" type="password" size="20" maxlength="15" /><br /><br />
<label name="passwordConfirmLabel" for="passwordConfirm">Confirm Password: </label><input name="Confirm Password" id="passwordConfirm" type="password" size="20" maxlength="15" /><br /><br />
<input type="submit" value="Submit" />
</fieldset>
</div>
</div>
</form>
</body>
</html>
예를 단순화하는 것이 좋습니다. – BNL