I'm having some difficulties creating a basic contact form.
I'm following the guidelines outlined in and the initial step involves using JavaScript to highlight the input box with a red border when invalid input is entered.
Unfortunately, the code I'm using below doesn't seem to be working as expected.
const inputs = document.querySelectorAll("input, select, textarea");
inputs.forEach(input => {
input.addEventListener(
"invalid",
event => {
input.classList.add("error");
},
false
);
});/*Email Validation*/
input.invalid {
border-color: red;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<h1 class="text-center font-bold mt-5 pt-2 mb-3">
<em>Contact us</em>
</h1>
<!-- contact-->
<section id="contact" style="background-color: #fff;" class="text-page">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="heading">Contact</h2>
<div class="row">
<div class="col-md-6">
<form id="contact-form" method="post" action="#" class="contact-form">
<div class="controls">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name">Your firstname *</label>
<input type="text" name="name" placeholder="Enter your firstname" required="required" class="form-control">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="surname">Your lastname *</label>
<input type="text" name="surname" placeholder="Enter your lastname" required="required" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label for="surname">Your email *</label>
<input type="email" name="email" placeholder="Enter your email" required="required" class="form-control">
</div>
<div class="form-group">
<label for="surname">Your message for us *</label>
<textarea rows="4" name="message" placeholder="Enter your message" required="required" class="form-control"></textarea>
</div>
<div class="text-center">
<input type="submit" name="name" value="Send message" class="btn btn-primary btn-block">
</div>
</div>
</form>
</div>
<div class="col-md-6">
<p class="social"><a href="#" title="" class="facebook"><i class="fa fa-facebook"></i></a><a href="#" title="" class="twitter"><i class="fa fa-twitter"></i></a><a href="#" title="" class="gplus"><i class="fa fa-google-plus"></i></a><a href="#" title="" class="instagram"><i class="fa fa-instagram"></i></a><a href="#" title="" class="email"><i class="fa fa-envelope"></i></a></p>
</div>
</div>
</div>
</div>
</div>
</section>