Create HTML Form with JavaScript Validation

We are going to create an HTML Form with JavaScript Validation and Thank You Page. We will guide you through the process of creating a functional and secure form with client-side validation, ensuring that user input is accurate and secure. Additionally, we'll show you how to create a Thank You page that appears after users submit the form, providing a positive user experience. With just a few lines of code, you'll be able to create a professional-looking and functional form that enhances the user experience on your website.

Add FontAwesome CDN in your head tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />

Create a contact.html page and use the html below there. This is how your HTML Form code looks like:

<form action="/example/thank-you-page.html">
	<div class="form-group fullname">
		<label for="fullname">Full Name</label>
		<input type="text" id="fullname" placeholder="Enter your full name" />
	</div>
	<div class="form-group email">
		<label for="email">Email Address</label>
		<input type="text" id="email" placeholder="Enter your email address" />
	</div>
	<div class="form-group password">
		<label for="password">Password</label>
		<input type="password" id="password" placeholder="Enter your password" />
		<i id="pass-toggle-btn" class="fa-solid fa-eye"></i>
	</div>
	<div class="form-group date">
		<label for="date">Birth Date</label>
		<input type="date" id="date" placeholder="Select your date" />
	</div>
	<div class="form-group gender">
		<label for="gender">Gender</label>
		<select id="gender">
			<option value="" selected disabled>Select your gender</option>
			<option value="Male">Male</option>
			<option value="Female">Female</option>
		</select>
	</div>
	<div class="form-group submit-btn">
		<input type="submit" value="Submit" />
	</div>
</form>

Create a Simple thank-you-page.html Page:

<h3>Thank you for filling out the form correctly.</h3>

This is your CSS Code for the Form above:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

form {
  padding: 25px;
  background: #fff;
  width: 100%;
  border-radius: 7px;
}

form h2 {
  font-size: 27px;
  text-align: center;
  margin: 0px 0 30px;
}

form .form-group {
  margin-bottom: 15px;
  position: relative;
}

form label {
  display: block;
  font-size: 15px;
  margin-bottom: 7px;
}

form input,
form select {
  height: 45px;
  padding: 10px;
  width: 100%;
  font-size: 15px;
  outline: none;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #bfbfbf;
}

form input:focus,
form select:focus {
  border-color: #9a9a9a;
}

form input.error,
form select.error {
  border-color: #f91919;
  background: #f9f0f1;
}

form small {
  font-size: 14px;
  margin-top: 5px;
  display: block;
  color: #f91919;
}

form .password i {
  position: absolute;
  right: 0px;
  height: 45px;
  top: 28px;
  font-size: 13px;
  line-height: 45px;
  width: 45px;
  cursor: pointer;
  color: #939393;
  text-align: center;
}
.submit-btn {
  margin-top: 30px;
}

.submit-btn input {
  color: white;
  border: none;
  height: auto;
  font-size: 16px;
  padding: 13px 0;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  background: #064adb;
  transition: 0.2s ease;
}

.submit-btn input:hover {
  background: #000000;
}

Create an script.js file and Paste this there:

// Selecting form and input elements
const form = document.querySelector("form");
const passwordInput = document.getElementById("password");
const passToggleBtn = document.getElementById("pass-toggle-btn");

// Function to display error messages
const showError = (field, errorText) => {
  field.classList.add("error");
  const errorElement = document.createElement("small");
  errorElement.classList.add("error-text");
  errorElement.innerText = errorText;
  field.closest(".form-group").appendChild(errorElement);
}

// Function to handle form submission
const handleFormData = (e) => {
  e.preventDefault();

  // Retrieving input elements
  const fullnameInput = document.getElementById("fullname");
  const emailInput = document.getElementById("email");
  const dateInput = document.getElementById("date");
  const genderInput = document.getElementById("gender");

  // Getting trimmed values from input fields
  const fullname = fullnameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();
  const date = dateInput.value;
  const gender = genderInput.value;

  // Regular expression pattern for email validation
  const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

  // Clearing previous error messages
  document.querySelectorAll(".form-group .error").forEach(field => field.classList.remove("error"));
  document.querySelectorAll(".error-text").forEach(errorText => errorText.remove());

  // Performing validation checks
  if (fullname === "") {
    showError(fullnameInput, "Enter your full name");
  }
  if (!emailPattern.test(email)) {
    showError(emailInput, "Enter a valid email address");
  }
  if (password === "") {
    showError(passwordInput, "Enter your password");
  }
  if (date === "") {
    showError(dateInput, "Select your date of birth");
  }
  if (gender === "") {
    showError(genderInput, "Select your gender");
  }

  // Checking for any remaining errors before form submission
  const errorInputs = document.querySelectorAll(".form-group .error");
  if (errorInputs.length > 0) return;

  // Submitting the form
  form.submit();
}

// Toggling password visibility
passToggleBtn.addEventListener('click', () => {
  passToggleBtn.className = passwordInput.type === "password" ? "fa-solid fa-eye-slash" : "fa-solid fa-eye";
  passwordInput.type = passwordInput.type === "password" ? "text" : "password";
});

// Handling form submission event
form.addEventListener("submit", handleFormData);

Don't forget to link script.js file to your contact.html page using script tag.

You have successfully learned creating HTML Form using JavaScript Validation with Thank You Page. If you have any doubt. Leave the comments below. Thank you!