Do you want to validate the HTML form in JavaScript before submitting? In today’s blog post you will learn the simplest process of validating a form in JavaScript.
If you build a form using HTML and use the required attribute for validation, the user won’t be able to submit the form if it is empty or contains invalid information.
AD
However, this will trigger the browser’s default error message, which has a simple, generic appearance and lacks customization.
But if you want to display a custom error message, you need to use JavaScript.
With the help of JavaScript, you can validate the form, display custom error messages, and style them using CSS as per your requirement.
Below, I have described the steps and provided the necessary code to validate a form using JavaScript before the user submits it.
1. Create an HTML Form
AD
Before implementing any JavaScript logic, you first need to create the HTML form. In this example, I have created a simple form with a name field, an email field, and a submit button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Form</title>
</head>
<body>
<div class="form-container">
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<span id="nameError"></span>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<span id="emailError"></span>
<br>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Make sure to add <span> tags below the input fields with an id, so we can use them later to display error messages.
To enhance its appearance, I have also added CSS styling to the form.
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
font-family: Arial, sans-serif;
}
.form-container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
label {
display: block;
text-align: left;
margin-bottom: 5px;
font-weight: bold;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #218838;
}
</style>
Now, the form looks visually appealing in the browser.
2. Add Script Tag and Select Elements
Currently, the HTML form displays the default browser error messages, but now I will add JavaScript code to handle the validation.
Before the closing </body> tag, add a <script> tag so we can apply JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<!--CSS goes here-->
</head>
<body>
<!--Form goes here-->
<script>
</script>
</body>
</html>
AD
After adding the <script> tag, it’s time to select all the input fields in the HTML form using JavaScript.
First, add an EventListener to the form with the event type set to submit.
Next, declare a variable named “isValid” and set it to true. This will help us track whether the form details are valid.
Select the input fields in JavaScript and set the value of the error <span> tags to an empty string.
document.getElementById("myForm").addEventListener("submit", function(event) {
let isValid = true;
// Input feild values
let name = document.getElementById("name").value.trim();
let email = document.getElementById("email").value.trim();
// Reset errors
document.getElementById("nameError").innerText = "";
document.getElementById("emailError").innerText = "";
});3. Show Error Message
Now, we will implement functionality to display an error message if the user leaves a field empty or enters invalid details.
First, I check if the name input field is empty. If it is, I set the innerText of the corresponding <span> to display the message “Name is required.”
I’m applying the same validation to the email field. To ensure the user enters a valid email, I’ll use a regex pattern. If the email format is incorrect, a new error message will be displayed.
You can also see that I’ve changed the value of “inValid” variable to false that I can use later to stop the form from submitting.
// Name validation
if (name === "") {
document.getElementById("nameError").innerText = "Name is required.";
isValid = false;
}
// Email validation
if (email === "") {
document.getElementById("emailError").innerText = "Email is required.";
isValid = false;
} else if (!/\S+@\S+\.\S+/.test(email)) { // Simple email regex
document.getElementById("emailError").innerText = "Invalid email format.";
isValid = false;
}4. Add JavaScript Validate Logic
Finally, I will add a condition to prevent the form from being submitted if the details are not valid. To achieve this, I will use the value of the isValid variable.
If the “isValid” value is false, I will use the event object’s preventDefault() method to stop the form from submitting when the details are not valid.
But if the details entered by the user are valid, the form will be submitted successfully.
// If form is invalid, prevent submission
if (!isValid) {
event.preventDefault();
}
You can view the complete code and preview it on CodePen.
I hope this blog post helps you understand how to validate a form in JavaScript before submitting. If you have any questions, feel free to mention them in the comment box.