0
양식 유효성 검사기에서 작업 중이며 입력 필드가 null 인 경우 각 div 주위의 테두리 색을 변경하고 싶습니다.테두리의 색이 변경되지 않는 이유는 무엇입니까
전나무 div "fname"의 스타일을 지정할 때만 작동합니다. 그러나 스타일 섹션에서 div로 변경하면 기본 스타일이 모든 요소에 적용되므로 양식이 입력 필드가 null 인 경우에도 데이터를 전송합니다. 양식을 제출하지 못하게하고 각 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_ 직접 스타일 속성을 조작 마십시오 - 대신 클래스 (철'error'), 및 사용을 설정하는 것이 클래스를 사용하여 스타일 시트를 통해 원하는대로 요소의 서식을 지정합니다. – CBroe