I was able to get this code to work before I put an alert button, but I need to give the user some sort of notification the form has been submitted (although not actually needing to submit anywhere). The email, phone and name fields are required but with the alert I have right now, it is giving the "submission received" alert even if required fields are empty.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Contact Us</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles/restaurantStyles.css" />
<script type="text/javascript">
const name = textField.checkValidity();
const email = emailField.checkValidity();
const phone = telField.checkValidity();
function submitAlert() {
alert("Thank you for your feedback. Your form has been submitted.");
}
</script>
<style>
form {
margin: 0 auto;
align-content: center;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
width: 35%;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron jumbotron-fluid">
<header>
<h1 class="display-1">Burger Shack</h1>
</header>
<p class="lead"> New location in Rice Village coming April 2020!</p>
</div>
<nav>
<hr />
<p><a class="btn" href="index.html"> <img src="images/homeIcon.png" alt="Home Icon"></a>
<a class="btn" href="menu.html">Menu</a>
<a class="btn" href="contact.html">Contact Us</a>
</nav>
<hr />
<div class="container">
<form name="contactForm" onsubmit="return validateForm()" method="post" class="text-center border border-light">
<div class="form-group row">
<label for "Name" class="col-md-2 col-form-label"><b>Name:</b></label>
<div class="col-md-10">
<input type="text" id="Name" name="Name" class="form-control" required> </div>
</div>
<div class="form-group row">
<label for "Email" class="col-md-2 col-form-label"><b>Email:</b></label>
<div class="col-md-10">
<input type="email" id="Email" name="Email" class="form-control" required> </div>
</div>
<div class="form-group row">
<label for "Phone" class="col-md-2 col-form-label"><b>Phone:</b></label>
<div class="col-md-10">
<input type="tel" id="Phone" name="Phone" class="form-control" minlength=10 maxlength=10 required> </div>
</div>
<div class="form-group row">
<label for "inquiry" class="col-form-label"><b>Reason for Inquiry:</b></label>
<div class="col">
<select name="Reasons" id="inquiry" class="form-control">
<option value="CateringDefault">Catering</option>
<option value="PrivateParty">Private Party</option>
<option value="Feedback">Feedback </option>
<option value="Other">Other</option>
</select></div></div>
<div class="form-group row">
<label for "info" id="info" class="col-form-label"><b>Aditional Information:</b></label>
<div class="col">
<textarea class="form-control" id="txtArea"></textarea></div></div>
<div class="form-group row">
<label for "customer" class="col-form-label">Have you been to the restaurant?</label>
<div class="col">
<div class="form-check form-check-inline">
<input type="radio" id="no" name="answer" value="NO" class="form-check-input" checked />
<label class="form-check-label" for="no">No</label></div>
<div class="form-check form-check-inline">
<input type="radio" id="yes" name="answer" value="YES" class="form-check-input" />
<label class="form-check-label" for="yes">Yes</label>
</div></div>
<div class="form-group row">
<label for"choices" class="col-form-label">Best days to contact you:</label>
<div class="col">
<div class="form-check-inline">
<label class="form-check-label" for="M">M </label>
<input type="checkbox" id="M" name="choices" value="monday" class="form-check-input">
<label class="form-check-label" for="T">T </label>
<input type="checkbox" id="T" name="choices" value="tuesday" class="form-check-input">
<label class="form-check-label" for="W">W </label>
<input type="checkbox" id="W" name="choices" value="wednesday" class="form-check-input">
<label class="form-check-label" for="Th">Th </label>
<input type="checkbox" id="Th" name="choices" value="thursday" class="form-check-input">
<label class="form-check-label" for="F">F</label>
<input type="checkbox" id="F" name="choices" value="friday" class="form-check-input">
</div></div>
</div> </div>
<div class="row">
<button type="submit" id="submitButton" class="btn btn-default" onclick="submitAlert();">Submit</button>
</div>
</form>
</container>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
<footer>
<hr />
<p> 305 Gray Street, Houston, TX, 77004 <br />
713-555-6752</p>
</footer>
</html>