0
Я работаю над валидатором формы, и я хочу, чтобы он менял цвет границы вокруг каждого div, когда поле ввода равно null.Почему это не меняет цвет границы
Это работает, когда я указываю стиль для firs 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_ манипулировать свойства стиля напрямую - вместо этого, установить класс (к 'error'), и использовать его класс для форматирования элементов по желанию через таблицу стилей. – CBroe