Email Validation in JavaScript

For normal web forms, start with <input type="email">. The browser checks whether the value has an email-address shape and works with required when the field must not be empty.

<input type="email" id="email" name="email" required>

JavaScript can read the browser’s validity result, display custom feedback, or apply an additional business rule. A client-side check still cannot prove that the mailbox exists or that the user owns it.

Use type="email" First Top ↑

<form id="emailForm">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Check</button>
</form>

This is generally a better starting point than maintaining a large email regular expression in every form. It also leaves the browser in charge of its built-in constraint-validation behavior.

Check the Browser Validity Result with JavaScript Top ↑

const email = document.getElementById("email");
if (email.checkValidity()) {
  console.log("Email field passes browser validation");
} else {
  email.reportValidity();
}

For custom text feedback, read email.validity.valid or use checkValidity() after the user interacts with the field.

Regular-Expression Validation Top ↑

The original page demonstrated a regular expression and described the local part before @ and the domain part after it. A regex can be useful when a project has a narrowly defined format rule, but email syntax has many valid edge cases. Keep any custom pattern deliberately simple and aligned with the application’s actual requirement.

const simpleEmailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const value = email.value.trim();
const looksLikeEmail = simpleEmailPattern.test(value);

The pattern above is intentionally a practical shape check, not a complete implementation of every valid email-address form.

Why Checking Only for @ and a Dot Is Weak Top ↑

The older example used indexOf() to check for the presence of @ and .. That teaches string searching, but it is not sufficient email validation: many invalid strings contain both characters, and the relative positions matter.

const value = email.value.trim();
const hasAt = value.indexOf("@") > 0;
const hasDot = value.indexOf(".") > 0;
// Useful as a string-search example, not enough for real email validation.

Validate Again on the Server Top ↑

Client-side validation improves feedback but can be bypassed. Recheck required fields and application rules on the server before accepting or storing the address.

← JavaScript validation

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: