-3
以下は私のコードですが、ラベル名がフィールドが現在行っている動作と一致する場所に移動する必要があります。何も入力しなければ、フィールドは赤い背景に変わります。フォーカスされている場合は、白に戻ります。私は、フィールドの色と一致し、同じ動作に一致するラベルのフォントの色が必要です。ラベル動作の一致入力フィールド
<!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>Lab06 - Form Validation</title>
<script type="text/javascript" charset="utf-8">
function passcheck(){
var pw1 = document.forms[ 0 ].password.value;
var pw2 = document.forms[ 0 ].passcomf.value;
if (pw1 != pw2) {
alert ("You did not enter the same new password twice. Please re-enter your password.");
return false;
}else{
return true;
}
}
function validate() {
var errors = new Array();
for(var i = 0; i < document.forms[ 0 ].elements.length ; i++){
if(document.forms[ 0 ].elements[ i ].type == "text") {
if(document.forms[ 0 ].elements[ i ].value == ""){
errors.push("The " + document.forms[ 0 ].elements[ i ].name + " field cannot be blank.\n");
document.forms[ 0 ].elements[ i ].className = "in_error";
}
}
if(document.forms[ 0 ].elements[ i ].type == "select-one") {
if(document.forms[ 0 ].elements[ i ].selectedIndex == 0) {
errors.push("The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');
document.forms[ 0 ].elements[ i ].className = "in_error";
}
}
if(document.forms[ 0 ].elements[ i ].type == "select-one") {
if(document.forms[ 0 ].elements[ i ].selectedIndex == 2) {
errors.push("The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');
document.forms[ 0 ].elements[ i ].className = "in_error";
}
}
}
if(errors.length == 0) {
return true;
} else {
clear_errors();
show_errors(errors);
return false;
}
}
function clear_errors(){
var div = document.getElementById("errors");
while(div.hasChildNodes()){
div.removeChild(div.firstChild);
}
}
function show_errors (errors) {
var div = document.getElementById("errors");
for(var i = 0; i < errors.length; i++){
var error = document.createTextNode(errors[ i ]);
var p = document.createElement("p");
p.appendChild(error);
div.appendChild(p);
}
}
window.onload = function() {
document.forms[ 0 ].onsubmit = validate;
}
</script>
<style type="text/css" media="screen">
#errors {
color: #F00;
}
.in_error {
background-color: #F00;
}
input:focus {
background-color: #FFF;
}
select:focus {
background-color: #FFF;
}
</style>
</head>
<body>
<h1>Form Validation</h1>
<div id="errors"></div>
<form action="" method="post" onsubmit="return passcheck()">
<p>
<label for="firstname" id="labelfirstname">First name:</label>
<input type="text" name="First name" value="" id="firstname" />
</p>
<p>
<label for="lastname" id="labellastname">Last name:</label>
<input type="text" name="Last name" value="" id="lastname"/>
</p>
<p>
<label for="middlei" id="labelmiddlei">Middle initial:</label>
<input type="text" name="Middle initial" value="" id="middlei"/>
</p>
<p>
<label for="address" id="labeladdress">Street address:</label>
<input type="text" name="Street address" value="" id="address"/>
</p>
<p>
<label for="city" id="labelcity">City:</label>
<input type="text" name="City" value="" id="city"/>
</p>
<p>
<label for="State" id="labelstate">State:</label>
<input type="text" name="State" value="" id="state"/>
</p>
<p>
<label for="zipcode" id="idzipcode">Zipcode:</label>
<input type="text" name="Zipcode" value="" id="zipcode"/>
</p>
<p>
<label for="username" id="labelusername">Username:</label>
<input type="text" name="Username" value="" id="username"/>
</p>
<p>
<label for="password" id="labelpassword">Password:</label>
<input type="text" name="Password" value="" id="password"/>
</p>
<p>
<label for="passcomf" id="labelpasscomf">Password comfirmation:</label>
<input type="text" name="Password comfirmation" value="" id="passcomf"/>
</p>
<p>
<label for="agreement" id="labelagreement">User Agreement</label>
<select name="User Agreement" id="agreement">
<option></option>
<option>Yes, I agree!</option>
<option>No, I do not agree!</option>
</select>
</p>
<p><input type="submit" value="Register →" onclick="return passcheck(); return true;"/></p>
</form>
</body>
</html>