Section 21: Built-in Validation and Constraints

Learning Objectives

• Understand browser-based form validation.
• Use required, minlength, maxlength, min, max and step.
• Understand email, URL and pattern validation.
• Learn novalidate and the limitations of client-side validation.

1. What Is Form Validation?

Validation checks whether entered information meets specified rules before submission. HTML provides built-in constraints that browsers can evaluate without custom JavaScript.

2. The required Attribute

<form action="/register" method="post">
  <label for="username">Username</label>
  <input id="username" name="username" required>
  <button type="submit">Register</button>
</form>

If the required field is empty, the browser normally blocks submission and displays a validation message.

3. Text Length Constraints

<label for="username">Username</label>
<input
  id="username"
  name="username"
  type="text"
  minlength="3"
  maxlength="20"
  required>

minlength and maxlength set limits on the length of entered text. They do not enforce application-specific rules such as preventing duplicate usernames.

4. Numeric and Date Constraints

<label for="age">Age</label>
<input id="age" name="age" type="number" min="18" max="100" required>

<label for="appointment">Appointment Date</label>
<input id="appointment" name="appointment" type="date"
  min="2026-01-01" max="2027-12-31" required>

For supported controls, min and max constrain the permitted range. The server should also validate dates and numeric values according to the application's actual business rules.

5. The step Attribute

<label for="quantity">Quantity</label>
<input id="quantity" name="quantity" type="number"
  min="1" max="20" step="1" required>

<label for="price">Price</label>
<input id="price" name="price" type="number"
  min="0" step="0.01" required>

step specifies allowed increments for supported controls. The default step depends on the input type. Use an appropriate step for the data being collected.

6. Email and URL Validation

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

<label for="website">Website</label>
<input id="website" name="website" type="url">

These types provide basic browser validation, but they do not prove that an email inbox exists or that a website is reachable.

7. Pattern Validation

The pattern attribute defines a regular expression for supported text-like input types. The entered value must match the required pattern for validation to pass.

<label for="code">Product Code (3 uppercase letters)</label>
<input id="code" name="code" type="text"
  pattern="[A-Z]{3}"
  title="Enter exactly three uppercase letters"
  required>

The pattern is matched against the entire value. Do not use a pattern as a replacement for server-side validation. For phone numbers, avoid overly restrictive patterns because valid formats vary by country.

8. The novalidate Attribute

<form action="/search" method="get" novalidate>
  <label for="query">Search</label>
  <input id="query" name="q" required>
  <button type="submit">Search</button>
</form>

novalidate disables the browser's automatic constraint validation when the form is submitted. It should be used only when the application deliberately handles validation another way.

9. Server-Side Validation Is Essential

Client-side checks improve usability but can be bypassed by browser developer tools, scripts or direct HTTP requests. A secure application must validate incoming data on the server.

• Check required fields and data types.
• Enforce length and range limits.
• Verify allowed options against server-side rules.
• Validate permissions and business rules.
• Use appropriate output escaping and database protections.

10. Complete Example

<form action="/signup" method="post">
  <label for="full-name">Full Name</label>
  <input id="full-name" name="full_name" type="text"
    minlength="2" maxlength="80" required>

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

  <label for="age">Age</label>
  <input id="age" name="age" type="number"
    min="18" max="100" required>

  <label for="password">Password</label>
  <input id="password" name="password" type="password"
    minlength="12" required>

  <button type="submit">Create Account</button>
</form>

This example demonstrates HTML constraints only. A real application should use secure password handling, server-side validation, and appropriate account security controls.

Common Mistakes

• Assuming HTML validation prevents malicious requests.
• Using type="number" for data that is an identifier, such as a phone number.
• Using a pattern that rejects valid international input.
• Believing that type="email" verifies the existence of an email address.
• Using novalidate without providing an alternative validation process.

Practice Exercises

1. Create a required username field with a minimum length of 3 and maximum of 20.
2. Create an age field that accepts values from 18 through 60.
3. Create a price field that allows decimal increments of 0.01.
4. Create a product-code field requiring exactly three uppercase letters.
5. Explain why server-side validation is necessary even when required is present.

Revision Quiz

1. Which attribute makes a field mandatory?
2. Which attributes define minimum and maximum text lengths?
3. Which attribute defines permitted increments for supported controls?
4. Does type="email" verify that an inbox exists?
5. What does novalidate do?
6. Can client-side validation be bypassed?

Answer Key and Explanations

1. required — It prevents ordinary submission when the control fails the required constraint.
2. minlength and maxlength — They constrain text length.
3. step — It defines permitted increments.
4. No. It checks basic email syntax, not mailbox existence.
5. Disables automatic form constraint validation on submission — Use it only when another validation approach is intended.
6. Yes. Requests can be sent without relying on the browser's form interface, so the server must validate them.