HTML Form Validation

HTML form validation helps ensure that users enter the required information in the correct format before submitting a form. It is commonly used in registration forms, login pages, contact forms, checkout pages, and online applications. HTML provides built-in validation features that can reduce input errors and improve the user experience.

What Is HTML Form Validation?

HTML form validation is the process of checking user input against specified rules before a form is submitted. These rules can require a field, limit the number of characters, define acceptable numeric ranges, or check the basic format of an email address.

For example, a registration form can require an email address and password before allowing normal form submission.

To understand the basics, explore HTML Forms and HTML Form Elements.

HTML Form Validation Example

The following example uses built-in HTML validation attributes.

<form action="/register" method="post">
  <label for="username">Username:</label>
  <input
    type="text"
    id="username"
    name="username"
    minlength="3"
    maxlength="20"
    required
  >

  <br><br>

  <label for="email">Email:</label>
  <input
    type="email"
    id="email"
    name="email"
    required
  >

  <br><br>

  <button type="submit">Register</button>
</form>

In this example:

• required prevents submission when a field is empty.
• minlength="3" requires at least three characters in the username.
• maxlength="20" limits the username to 20 characters.
• type="email" checks the basic format of the email address.
• type="submit" submits the form after applicable validation succeeds.

The /register URL is an example endpoint. A real application needs a server to receive and process the form data.

Common HTML Validation Attributes

HTML offers several attributes that help validate user input.

• required makes a field mandatory.
• minlength defines the minimum number of characters.
• maxlength defines the maximum number of characters.
• min sets the minimum numeric or date value.
• max sets the maximum numeric or date value.
• step defines permitted numeric increments.
• pattern specifies a regular expression that the value must match for supported input types.
• type="email" checks the basic email address format.

For example, a number field can restrict a user to an age between 18 and 60.

<label for="age">Age:</label>

<input
  type="number"
  id="age"
  name="age"
  min="18"
  max="60"
  required
>

Learn more about HTML Form Attributes and the HTML Required Attribute.

Validating Input with the Pattern Attribute

The pattern attribute lets you specify a regular expression for supported input types, such as text, email, and password fields.

<label for="username">Username:</label>

<input
  type="text"
  id="username"
  name="username"
  pattern="[A-Za-z]{3,12}"
  title="Enter 3 to 12 letters."
  required
>

This pattern allows usernames containing between 3 and 12 English letters, without spaces or numbers. The title attribute provides a hint that may be shown with the browser’s validation message.

For more details, read HTML Pattern Attribute.

Using JavaScript for Custom Validation

JavaScript can provide custom validation messages or additional checks when users interact with a form.

<form id="myForm">
  <label for="password">Password:</label>
  <input type="password" id="password" required>

  <button type="submit">Submit</button>
  <p id="message"></p>
</form>

<script>
  const form = document.getElementById("myForm");
  const password = document.getElementById("password");
  const message = document.getElementById("message");

  form.addEventListener("submit", function (event) {
    if (password.value.length < 8) {
      event.preventDefault();
      message.textContent = "Password must contain at least 8 characters.";
    } else {
      message.textContent = "";
    }
  });
</script>

This example prevents submission when the password contains fewer than eight characters. In a real application, password rules must also be checked on the server.

Client-Side vs Server-Side Validation

Client-side validation happens in the user’s browser. It provides quick feedback and helps users correct mistakes before submitting a form.

Server-side validation happens after data reaches the server. It is essential because browser validation can be bypassed by scripts, modified requests, or other tools.

For security and data integrity, always validate submitted data on the server, even when HTML validation is already enabled.

Frequently Asked Questions

Does HTML form validation require JavaScript?

No. HTML provides built-in validation through attributes such as required, min, max, and pattern.

Can users bypass HTML validation?

Yes. Client-side validation is not a security boundary, so the server must validate incoming data independently.

Does an email input verify that an email address exists?

No. It checks basic formatting, not whether the email account exists or belongs to the user.

Can I display a custom validation message?

Yes. JavaScript can use the Constraint Validation API, including methods such as setCustomValidity(), to provide custom validation messages.