HTML · Quick Reference

Lesson 20 — Form Validation Cheat Sheet

HTML

In one line: These attributes define the rules — the browser enforces them automatically on submit.

Key Ideas

1Validation Attributes. These attributes define the rules — the browser enforces them automatically on submit.

2Live Demo — Try It. Type into the fields below and watch the border change colour as you go — green when valid, red when invalid.

3Custom Error Messages. The browser's built-in error bubbles are functional but plain. You can intercept the validation event with JavaScript and show custom messages using the Constraint Val...

4novalidate & Server Validation. Adding novalidate to the <form> element disables all browser validation — useful when you're writing your own JavaScript validation or using a form library. The ...

Code Examples

<!-- Required + length limits -->
<input type="text" name="username"
       required minlength="3" maxlength="20">

<!-- Email type validates format automatically -->
<input type="email" name="email" required>

<!-- Number ...

/* Only style after the user has interacted — */
/* :placeholder-shown = input is still empty   */
input:valid:not(:placeholder-shown) {
  border-color: #2de8c0;  /* green border */
  background: rgba(45,232,192,.05);
}

input:invalid:not(:placeholde...

<form id="myForm" novalidate>
  <label for="em">Email</label>
  <input type="email" id="em" name="email" required>
  <span id="emErr" class="error"></span>
  <button type="submit">Submit</button>
</for...