HtmlHow-ToBeginner · 4 min read

How to Validate Password in HTML: Simple Guide with Examples

You can validate a password in HTML by using the input element with attributes like type="password", required, minlength, and pattern to enforce rules such as length and character types. The pattern attribute uses a regular expression to check the password format before form submission.

📐

Syntax

The basic syntax for password validation in HTML uses the input element with these attributes:

type="password": hides the typed characters.
required: makes the field mandatory.
minlength="number": sets minimum length.
pattern="regex": defines a regular expression to match the password format.
title="text": shows a message if the pattern does not match.

html

<input type="password" required minlength="8" pattern="[A-Za-z0-9]{8,}" title="Password must be at least 8 characters and contain only letters and numbers">

💻

Example

This example shows a simple form with password validation that requires at least 8 characters including letters and numbers. If the password does not meet the rules, the browser will show a message and prevent submission.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Password Validation Example</title>
</head>
<body>
  <form>
    <label for="pwd">Enter Password:</label><br>
    <input id="pwd" name="password" type="password" required minlength="8" pattern="(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}" title="Must contain at least 8 characters, including letters and numbers"><br><br>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Output

A form with a password field that requires at least 8 characters including letters and numbers. If invalid, the browser shows a message and blocks submission.

⚠️

Common Pitfalls

Common mistakes when validating passwords in HTML include:

Not using pattern correctly, causing unexpected validation behavior.
Forgetting required, allowing empty passwords.
Using too simple or too complex regular expressions that confuse users.
Not providing a helpful title message to explain the rules.

Always test your pattern and messages in different browsers.

html

<!-- Wrong: missing required and pattern -->
<input type="password" minlength="8">

<!-- Right: includes required, pattern, and title -->
<input type="password" required minlength="8" pattern="(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}" title="Must contain at least 8 characters, including letters and numbers">

📊

Quick Reference

Here is a quick summary of useful attributes for password validation in HTML:

Attribute	Purpose	Example
type="password"	Hides input characters
required	Makes field mandatory
minlength	Sets minimum length
pattern	Regular expression for format
title	Message shown on pattern mismatch

✅

Key Takeaways

Use type="password" with required and minlength for basic validation.

Add pattern with a regular expression to enforce complex password rules.

Provide a clear title attribute to explain password requirements to users.

Test your validation in multiple browsers to ensure consistent behavior.

HTML validation is client-side; always validate passwords again on the server.