Form Validation in JavaScript

Form validation is the process of checking if user input is correct before submitting a form.

For example:

• Making sure an email is valid

• Ensuring a password is long enough

• Preventing empty fields

• Confirming passwords match

Validation improves user experience and prevents bad data from being sent to the server.

Why Form Validation Is Important

• Prevents empty submissions

• Reduces server errors

• Improves security

• Gives instant feedback to users

There are two types of validation:

• Client-side validation (in the browser using JavaScript)

• Server-side validation (on the backend)

In this article, we focus on JavaScript (client-side validation).

Basic Example: Prevent Empty Fields

HTML

<form id="myForm">
  <input type="text" id="username" placeholder="Enter username">
  <button type="submit">Submit</button>
</form>

JavaScript

document.getElementById("myForm").addEventListener("submit", function(event) {
  let username = document.getElementById("username").value;

  if (username === "") {
    event.preventDefault(); // stop form from submitting
    alert("Username cannot be empty");
  }
});

If the input is empty, the form will not submit

Validating Email Format

You can use a regular expression (RegEx) to check email format.

let email = document.getElementById("email").value;

let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

if (!email.match(emailPattern)) {
  alert("Please enter a valid email address");
}

This ensures the email follows a proper format like:
[e-mail]

Password Length Validation

let password = document.getElementById("password").value;

if (password.length < 6) {
  alert("Password must be at least 6 characters long");
}

You can also check for:

• Uppercase letters

• Numbers

• Special characters

Confirm Password Validation

let password = document.getElementById("password").value;
let confirmPassword = document.getElementById("confirmPassword").value;

if (password !== confirmPassword) {
  alert("Passwords do not match");
}

This ensures users enter the same password twice.

Want to go beyond just reading and actually master frontend development?
Grab my The Frontend Mastery Handbook your complete guide from HTML to CSS to JavaScript, all combined into one practical roadmap.
Stop jumping between tutorials and start building real, professional websites today.

Click here to grab your copy

Final Thoughts

Form validation in JavaScript ensures users provide correct and complete information before submitting forms. It improves user experience and reduces errors.

To master form validation, practice:

• Checking empty fields

• Validating email formats

• Checking password strength

• Matching fields

• Displaying user-friendly error messages

Once you understand these basics, you can build secure and professional web forms.