HTML Academy · Lesson

required pattern min max and maxlength

Add built-in validation constraints to form inputs.

Lesson 1 of 414 steps

required pattern min max and maxlength is a free HTML Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.

HTML5 Form Validation

HTML5 added built-in form validation — no JavaScript required:

Browsers check constraints before submitting
Native error messages appear automatically
Works with CSS :valid / :invalid pseudo-classes

required

The required attribute prevents submission if the field is empty:

<label for="email">Email (required)</label>
<input type="email" id="email" name="email" required>
<!-- Empty on submit → browser shows "Please fill in this field" -->
<!-- Also: field is :invalid until filled -->

pattern

The pattern attribute validates text against a regular expression:

<label for="username">Username (letters and numbers only)</label>
<input
  type="text"
  id="username"
  name="username"
  pattern="[a-zA-Z0-9]{3,20}"
  title="3-20 letters and numbers"
>
<!-- pattern anchored at both ends automatically -->
<!-- title provides the error message hint -->

Common pattern Examples

Useful regex patterns for form fields:

<!-- Phone: digits, spaces, hyphens -->
<input type="tel" pattern="[0-9 ()+-]{7,20}">

<!-- Postal code: US zip code -->
<input type="text" pattern="[0-9]{5}(-[0-9]{4})?">

<!-- Password: min 8 chars, one uppercase, one digit -->
<input type="password" pattern="(?=.*[A-Z])(?=.*[0-9]).{8,}">

<!-- Twitter handle: -->
<input type="text" pattern="@?[A-Za-z0-9_]{1,15}">

min and max

Constrain numeric, date, and range inputs:

<!-- Number range -->
<input type="number" name="qty" min="1" max="100">

<!-- Date range -->
<input type="date" name="checkin" min="2025-01-01" max="2025-12-31">

<!-- Range slider -->
<input type="range" name="volume" min="0" max="100" step="5">

<!-- Time -->
<input type="time" name="meeting" min="09:00" max="17:00">

maxlength and minlength

Control text input length:

<input type="text" name="username" minlength="3" maxlength="20">
<!-- minlength: minimum number of characters required -->
<!-- maxlength: maximum characters allowed (browser enforces hard stop) -->

<textarea name="bio" minlength="50" maxlength="500"></textarea>
<!-- Same attributes work on textarea -->

step

The step attribute defines valid increments for number and range inputs:

<input type="number" name="price" min="0" step="0.01">
<!-- Accepts decimal prices: 0.00, 0.01, 4.99, etc. -->

<input type="number" name="qty" min="0" step="5">
<!-- Only multiples of 5: 0, 5, 10, 15... -->

<input type="range" min="0" max="100" step="10">
<!-- Snaps to: 0, 10, 20, ..., 100 -->

CSS :valid and :invalid

Style fields based on their validation state:

input:valid {
  border-color: #22c55e;   /* green when valid */
}

input:invalid {
  border-color: #ef4444;   /* red when invalid */
}

/* Avoid showing :invalid on page load (before user interaction): */
input:not(:placeholder-shown):invalid {
  border-color: #ef4444;
}
/* Only show invalid style after user has typed something */

title for Custom Error Messages

The title attribute provides a hint in the browser's validation error:

<input
  type="text"
  pattern="[A-Za-z]{2,3}"
  title="Enter a 2 or 3 letter country code (e.g. US, GB, DEU)"
  name="country-code"
>
<!-- Browser shows the title text alongside the default error message -->

Combining Constraints

Multiple validation attributes work together:

<input
  type="text"
  name="username"
  required
  minlength="3"
  maxlength="20"
  pattern="[a-z][a-z0-9_]*"
  title="Lowercase letters, numbers, underscores. Must start with a letter."
>
<!-- All constraints must pass for the field to be :valid -->

novalidate and Validation Timing

Validation fires on submit by default. To validate on each input event:

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

<script>
const input = document.getElementById('email');
input.addEventListener('blur', () => {
  // Check validity on blur (when user leaves field):
  if (!input.validity.valid) {
    input.reportValidity();
  }
});
</script>

Validation Pseudo-classes Summary

Form validation CSS pseudo-classes:

:valid — constraint validation passed
:invalid — one or more constraints failed
:required — has the required attribute
:optional — does not have required
:in-range — value within min/max
:out-of-range — value outside min/max

Quick Check

Which attribute limits the maximum number of characters in a text input?

Answer it in the interactive lesson

Recap: Validation Attributes

HTML5 validation essentials:

required — field must be filled
pattern — validate against regex
min / max — value bounds for number/date/range
maxlength / minlength — character count bounds
step — valid increments
CSS :valid / :invalid for styling

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

Frequently Asked Questions

Is the “required pattern min max and maxlength” lesson free?

Yes — any 3 lessons of the HTML Academy learning path, including “required pattern min max and maxlength”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.

What will I learn in “required pattern min max and maxlength”?

Add built-in validation constraints to form inputs. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

How long does the “required pattern min max and maxlength” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

required pattern min max and maxlength
The novalidate Attribute
Constraint Validation API Basics
HTML5 vs JavaScript Validation Trade-offs

← Back to HTML Academy