我正在处理表单验证程序,并且希望它在输入字段为空时更改每个div周围边框的颜色。为什么这不会改变边框的颜色
它只适用于指定第一格“fname”的样式。但是,当我将其更改为样式部分中的div时,为了使默认样式适用于所有元素,即使输入字段为空,由于某种原因,表单也会发送数据。如何防止提交表单并在每个div周围显示红色边框?谢谢!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation</title>
<meta name="description" content="DESCRIPTION">
<link rel="stylesheet" href="PATH">
<style>
div {
border:thick solid white;
}
</style>
<script>
function validateForm() {
var fname = document.forms["myForm"]["fname"].value;
var email = document.forms["myForm"]["email"].value;
var message = document.forms["myForm"]["message"].value;
var discussWhat = document.forms["myForm"]["discussWhat"].value;
var pickOne = document.forms["myForm"]["pickOne"].value;
var selectSome = document.forms["myForm"]["selectSome"].value;
if (fname == null || fname == "") {
alert("Name must be filled out");
document.getElementById("fname").style.borderColor = "red";
return false;
} else if (email == null || email == "") {
alert("Email must be filled out");
document.getElementById("email").style.borderColor = "red";
return false;
} else if (message == null || message == "") {
alert("Message must be filled out");
document.getElementById("message").style.borderColor = "red";
return false;
} else if (discussWhat == null) {
alert("Selec what you want to discuss");
document.getElementById("discussWhat").style.borderColor = "red";
return false;
} else if (pickOne == null) {
alert("Pick one option");
document.getElementById("pickOne").style.borderColor = "red";
return false;
} else if (selectSome == null) {
alert("Select some options");
document.getElementById("selectSome").style.borderColor = "red";
return false;
}
}
</script>
<!--[if lt IE 9]>
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<form method="post" name="myForm" action="mailer.php" onsubmit="return validateForm()">
<fieldset>
<div id="v">
<label>Name: </label>
<input type="text" name="fname"><br>
</div>
<div id="email">
<label>E-mail: </label>
<input type="text" name="email" ><br>
</div>
<div id="message">
<label>Message: </label>
<textarea name="message" ></textarea><br>
</div>
<div id="discussWhat">
<label>What would you like to discuss? </label><br>
<select name="discussWhat" >
<option>Technical Support</option>
<option>Billing</option>
<option>Sales</option>
<option>Other</option>
</select><br>
</div>
<div id="pickOne">
<label>Pick one: </label><br>
<input type="radio" name="pickOne" value="option1">Option 1
<input type="radio" name="pickOne" value="option2">Option 2<br>
</div>
<div id="selectSome">
<label>Select all that apply: </label>
<input type = "checkbox" name="selectSome" value="FirstCheckbox"><label>First Checkbox</label>
<input type = "checkbox" name="selectSome" value="SecondCheckbox"><label>Second Checkbox</label>
<input type = "checkbox" name="selectSome" value="ThirdCheckbox"><label>Third Checkbox</label>4
</div>
</fieldset>
<input type="submit" value="Submit">
</form>
</body>
</html>
不要_not_直接操纵样式属性 - 相反,设置一个类(FE'error'),并使用该类来根据需要通过样式表格式化元素。 – CBroe