我的所有其他字段都按照我的预期进行了验证，但是当我添加 JS 来验证选择选项时，我的页面会在我点击提交后重新加载。我尝试了多种方法来验证选择的选项，但未能找到解决方案。我必须根据项目要求使用纯 JS 来验证整个表单，并且我在不包含任何用户输入的跨度中的每个字段下方显示一条错误消息。我将在下面发布我的 JS，如果需要我可以发布我的 HTML。我在选择的区域代码之间添加了一些额外的空格，希望有助于提高可读性。
document.addEventListener("DOMContentLoaded", function (event) {
alert("This page is best viewed with JavaScript enabled");
});
function validate() {
// NEW: move this way up here so all validations can affect its value:
var formValid = true;
// function to check if a name has been entered
var name = document.getElementById('name').value;
if (name == null || name.trim() == "") {
document.getElementById('nameerror').innerHTML = "Please enter your full name";
formValid = false;
} else {
document.getElementById('nameerror').innerHTML = "";
}
// function to check if an email has been entered
var email = document.getElementById('email').value;
if (email == null || email.trim() == "") {
document.getElementById('emailerror').innerHTML = "Please enter your email address";
formValid = false;
} else {
document.getElementById('emailerror').innerHTML = "";
}
// function to check if a telephone number has been provided
var phone = document.getElementById('phone').value;
if (phone == null || phone.trim() == "") {
document.getElementById('phoneerror').innerHTML = "Please enter your telephone number";
formValid = false;
} else {
document.getElementById('phoneerror').innerHTML = "";
}
//validate the select options
var select = document.getElementById('select').value;
if (select == '') {
document.getElementById('selecterror').innerHTML = "Please make a selection";
formValid = false;
} else {
document.getElementById('selecterror').innerHTML = "";
}
//function to validate the textarea field
var name = document.getElementById('textarea').value;
if (name == null || name.trim() == "") {
document.getElementById('textareaerror').innerHTML = "Please enter additional info";
formValid = false;
} else {
document.getElementById('textareaerror').innerHTML = "";
}
// function to validate if any radio button has been selected
var radios = document.getElementsByName('radio');
var radiosValid = false;
var i = 0;
while (!radiosValid && i < radios.length) {
if (radios[i].checked) radiosValid = true;
i++;
}
if (!radiosValid) {
document.getElementById('radioerror').innerHTML = "(Please check one)";
formValid = false;
} else {
document.getElementById('radioerror').innerHTML = "";
}
// function to confirm if any checkbox has been checked
var checkboxes = document.getElementsByName('checkbox');
var checkboxesValid = false;
var j = 0;
while (!checkboxesValid && j < checkboxes.length) {
if (checkboxes[j].checked) checkboxesValid = true;
j++;
}
if (!checkboxesValid) {
document.getElementById('checkboxerror').innerHTML = "(Please select at least one)";
formValid = false;
} else {
document.getElementById('checkboxerror').innerHTML = "";
}
// now that all validations have run, return the conclusion
alert("The form has been submitted!");
return formValid;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Contact Us</title>
<style>
.contact-header {
font-family: cursive;
text-align: center;
font-size: 50px;
color: darkred;
}
form {
font-weight: bold;
text-align: center;
}
.contact {
font-weight: normal;
}
.checkbox input {
margin: 0 10px 0;
}
textarea {
width: 20%;
height: 5rem;
}
.sendRequest {
text-align: center;
}
</style>
<!--link to bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--link for icons-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!--link to external stylesheet-->
<link href="restaurantStyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<header>
<div class="jumbotron name-font">
<h1 class="display-4">Dan's Cakes</h1>
<hr class="my-4">
<p class="lead">BIG NEWS!! Dan's Cakes will be opening a new restaurant VERY soon!!!!</p>
</div>
</header>
<hr />
<nav>
<!--home icon link-->
<a href="index.html" class="btn badge-pill"><i class="fas fa-home"></i></a>
<a href="menu.html" class="btn badge-pill">Menu</a>
<a href="contact.html" class="btn badge-pill">Contact Us</a>
</nav>
<hr />
<h2 class="contact-header">Contact Us</h2>
<hr />
<!--form for contact info-->
<form name="contactForm" method="post" id="contactForm" novalidate onsubmit="return validate()">
<div class="form-group col-form-label">
<label for="name">Name: </label>
<input type="text" class="form-control" id="name" placeholder="Please enter your full name.." required>
<span id="nameerror" class="hint"></span>
</div>
<div class="form-group">
<label for="email">Email: </label>
<i class="fas fa-envelope prefix"></i>
<input type="email" class="form-control" id="email" placeholder="Please enter your email address.." aria-describedby="email" required>
<span id="emailerror" class="hint"></span>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="phone">Phone: </label>
<i class="fas fa-phone-square"></i>
<input type="tel" class="form-control" id="phone" required>
<span id="phoneerror" class="hint"></span>
</div>
<!--select menu-->
<label for="reason-select">Reason For Inquiry:</label>
<select id="select " name="reason" class="custom-select" required>
<option value="">--Please Choose an Option--</option>
<option value="catering">Catering</option>
<option value="private">Private Party</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
<span id="selecterror" class="hint"></span>
<br />
<br />
<!--text area for additional info-->
<div class="form-group">
<label for="info">Additional Information: </label>
<textarea class="form-control" id="textarea" rows="5"></textarea>
<span id="textareaerror" class="hint"></span>
</div>
<!--radio buttons for visiting restaurant-->
<label for="radio">Have you been to the restaurant?</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radio" id="no-radio" value="no">
<label class="form-check-label" for="no-radio">
No
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="radio" id="yes-radio" value="yes">
<label class="form-check-label" for="yes-radio">
Yes
</label>
<span id="radioerror" class="hint"></span>
</div>
<br />
<!--checkboxes for contacting-->
<label for="checkboxes">Best days to contact you:</label>
<div id="checkboxlist">
<div class="form-check form-check-inline">
<input class="form-check-input" name="checkbox" type="checkbox" id="monday" value="monday">
<label class="form-check-label" for="monday">M</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="checkbox" type="checkbox" id="tuesday" value="tuesday">
<label class="form-check-label" for="tuesday">T</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="checkbox" type="checkbox" id="wednesday" value="wednesday">
<label class="form-check-label" for="wednesday">W</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="checkbox" type="checkbox" id="thursday" value="thursday">
<label class="form-check-label" for="thursday">Th</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="checkbox" type="checkbox" id="friday" value="friday">
<label class="form-check-label" for="friday">F</label>
</div>
<span id="checkboxerror" class="hint"></span>
</div>
<!--send request button-->
<div class="sendRequest" id="contact-submit">
<input type="submit" value="Send Request">
</div>
</form>
<br />
<br />
<footer>
<p>1123 Silk Way, Anchorage, AK, 99501</p>
<p>907-998-0122</p>
</footer>
</div>
<script>
document.contactForm.name.onfocus = function () {
document.getElementById('namehint').innerHTML = "(Enter full name)";
}
</script>
<!--scripts for jquery, popper, and bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!--javascript link to external sheet-->
<script src="validate.js"></script>
<!--<script>
document.contactForm.name.onfocus = function () {
document.getElementById('namehint').innerHTML = "(Enter full name)";
}
</script>
-->
</body>
</html>最佳答案
使用提交按钮时，默认情况下会刷新或将您定向到定义表单 html 标记时 action 属性中指定的位置。如果您的目标是停止此刷新，则需要在按钮上放置一个 onClick 属性，该属性包含要执行的功能(如果您知道在 DOM 元素上放置事件监听器的任何其他方法，您可以也采取该路线(我只是以此作为示例)，然后您将传递一个变量(例如 event)以将事件操作保存到参数中。然后在函数中使用event.preventDefault();，这会停止刷新。在该命令之后，您可以执行您需要执行的任何其他验证，然后触发刷新或新的窗口位置，以您的目标为准。
关于javascript - 我的选择区域验证强制我的页面自动重新加载而不是运行验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54173087/