HTML Form Validation Attributes

HTML form validation attributes help you check the form data before it reaches the server.

What Are HTML Form Validation Attributes?

HTML form validation attributes are built-in tags you add to form fields. These tags stop users from submitting forms with missing or wrong values.

Browsers can read these rules and block the form if the data does not follow the rules. You do not need extra code to make this work.

Form validation protects your site from wrong or unsafe data. It also guides users to fill out the form the right way.

Without it, users can leave fields blank or add words where numbers are needed. That can break the form or cause wrong results.

When users try to submit a form with bad input, the browser will block the form. It shows a short message near the input field. The message depends on the error.

Some say, “Please fill out this field” or “Use the correct format.” These tips help users fix the data right away.

Client-side validation happens in the browser before it sends the data and gives users quick feedback. Server-side validation happens after the form reaches the server.

The Common HTML Validation Attributes

The required attribute:

This makes sure users fill in the field before they can submit the form.

<input type="text" name="username" required>

The browser blocks the form if this field is empty.

The minlength and maxlength attributes:

These two set the number of letters users can type.

<input type="text" name="username" minlength="4" maxlength="12">

The input must have at least 4 letters and no more than 12.

The pattern attribute:

You can use this to force a shape or format with a regular expression.

<input type="text" name="zip" pattern="[0-9]{5}">

This input must have five digits. Anything else will stop the form.

The type attribute:

The type attribute tells the browser what kind of data the field takes.

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

This field only accepts email addresses like [email protected].

The step attribute:

This limits the number input to steps like 1, 0.5, or 10.

<input type="number" name="age" step="1">

The user can only type whole numbers like 20 or 21.

The min and max attributes:

These set the lowest and highest numbers the user can type.

<input type="number" name="age" min="18" max="99">

The browser will block values less than 18 or more than 99.

Not all fields can be checked in the browser. Only a few types support form validation. These include the following types:

• text
• number
• email
• date
• password

For example, an email field checks for the “@” symbol. A number field blocks letters or extra dots.

Use the pattern Attribute with Regex

The pattern attribute uses regular expressions to check if the data fits a shape. You have to write it inside double quotes.
Allow only three letters example:

<input type="text" name="code" pattern="[A-Za-z]{3}">

If the input has fewer or more than three letters, the form will not send.

How novalidate Affects Form Validation

The novalidate attribute disables browser checks. You can place it inside the form tag. This lets users submit any data. That helps you to check the data with JavaScript or on the server.

<form novalidate>

The browser skips all input rules if this is used.

Form Validation Example with HTML Only

This form checks a few fields with no scripts.

<form>
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <input type="number" name="age" min="18" max="65" step="1">
  <button type="submit">Send</button>
</form>

This form stops if the name or email is empty. It also blocks ages under 18 or over 65.

Examples

Username With Length Rule:

<input type="text" name="username" minlength="4" maxlength="10" required>

This field forces users to type a name with four to ten letters. The form blocks short or long values.

Password With Pattern Check:

<input type="password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">

This rule checks if the password has one digit and one lowercase letter. Also, it has one uppercase. It also checks for eight letters or more.

Zip Code With Digits Only:

<input type="text" name="zip" pattern="\d{5}" required>

This input only accepts five digits. Letters or extra digits block the form. The browser shows an error if the value does not match.

Age With Min and Max:

<input type="number" name="age" min="20" max="60" step="5">

This input takes values like 20, 25, or 30. The browser blocks other values or anything outside the range.

Wrapping Up

In this article, you learned how HTML form validation attributes check user input. You also saw how browsers show errors, and how patterns and types help limit data. You read about client and server validation.

Here is a quick recap:

• Use required to make sure users fill in the field.
• Use minlength and maxlength attributes. Also, you can use pattern attributes to control input size and shape.
• Use type to set the format, then add min and step to control number rules.
• Use novalidate when you want to skip browser checks.
• Use both browser and server checks for full safety.

FAQs

<input type="text" required minlength="3" />

<input type="text" pattern="[A-Za-z]{3,}" title="Enter at least 3 letters" />

<form action="/submit" method="post" novalidate>
  <input type="email" required />
  <button type="submit">Send</button>
</form>

Similar Reads