Built-in HTML5 Validation Mechanics

Technical Deep Dive & Specifications

2.1 The WHATWG Form Submission Algorithm

According to the WHATWG HTML Standard (§ 4.10.21.3 "Form submission algorithm"), when a user triggers form submission (via <button type="submit">, <input type="submit">, or pressing Enter in a single-line input), the browser performs the following sequence:

+----------------------------------------------------------------------------------------------------+
|                             WHATWG FORM SUBMISSION VALIDATION ALGORITHM                            |
+----------------------------------------------------------------------------------------------------+

                                      User triggers Submission
                                                 │
                                                 ▼
                             Does <form> have 'novalidate' OR did
                             submitter have 'formnovalidate'?
                                                 │
                                ┌────────────────┴────────────────┐
                               YES                               NO
                                │                                 │
                                ▼                                 ▼
                     [Skip All Validation]            Find all submittable elements
                                │                     where willValidate == true
                                │                                 │
                                │                                 ▼
                                │                     Iterate over candidates in DOM tree order.
                                │                     Does element satisfy all constraints?
                                │                                 │
                                │                ┌────────────────┴────────────────┐
                                │               ALL VALID                       ANY INVALID
                                │                │                                 │
                                │                │                                 ▼
                                │                │                    Fire 'invalid' DOM event on
                                │                │                    the first failing element
                                │                │                    (bubbles: false, cancelable: true)
                                │                │                                 │
                                │                │                    Was 'invalid' event default prevented?
                                │                │                                 │
                                │                │                ┌────────────────┴────────────────┐
                                │                │               YES                               NO
                                │                │                │                                 │
                                │                │                ▼                                 ▼
                                │                │         Suppress bubble.                Focus first invalid input.
                                │                │         Halt submission.                Display native OS tooltip.
                                │                │                                         Halt submission.
                                │                │
                                ▼                ▼
                      Fire 'submit' DOM event on <form>
                      (bubbles: true, cancelable: true)
                                       │
                      If not prevented, encode payload
                      and dispatch HTTP Request across network

2.2 The willValidate Property

Not every element inside a form participates in validation. An element is a candidate for constraint validation (element.willValidate === true) only if it satisfies all of the following:

1. It is a submittable element: <input>, <select>, <textarea>, or <button>.
2. It is NOT disabled.
3. It is NOT readonly (for most constraints like pattern and required).
4. It is NOT inside a <datalist> or <template>.
5. It is NOT of type="hidden", type="reset", or type="button".

const input = document.querySelector('#user-email');
console.log(input.willValidate); // true or false

2.3 The Non-Bubbling invalid Event

A critical nuance of native validation is that the invalid event does not bubble.

• event.bubbles = false
• event.cancelable = true

If you listen for invalid on the parent <form> using normal event bubbling (form.addEventListener('invalid', ...)), your handler will never trigger. You must either:

1. Attach listeners directly to each individual <input>.
2. Use Event Capture ({ capture: true }) on the parent form.

// WRONG: Will never fire because 'invalid' does not bubble!
form.addEventListener('invalid', (e) => {
  console.log('Invalid field:', e.target);
});

// CORRECT: Uses capture phase to intercept descending events
form.addEventListener('invalid', (e) => {
  console.log('Intercepted invalid element:', e.target.name);
  e.preventDefault(); // Suppresses native browser tooltip!
}, true); // <--- capture = true

2.4 Browser-Native Tooltips vs Custom UI

💻 Interactive Code Playground

Starter Code

The following example demonstrates built-in validation mechanics, submission blocking, the invalid capture event, and the difference between standard submit, novalidate, and formnovalidate.

Line-by-Line Code Breakdown

• Line 70 (<input type="text" id="headline" required />): Attaches the native required constraint. If the input is empty upon clicking submit, the browser cancels submission immediately.
• Line 80 (<input type="email" id="authorEmail" required />): Attaches two constraints simultaneously: required and type="email". The browser will verify both non-emptiness and basic RFC email grammar.
• Line 87 (<button type="submit" class="btn-primary">): Normal submit button. Triggers the full validation algorithm.
• Lines 90-92 (<button type="submit" formnovalidate class="btn-secondary">): Contains formnovalidate. When clicked, the browser completely ignores all required, email, and pattern rules, dispatching the submit event immediately.
• Lines 114-118 (form.addEventListener('invalid', ..., true)): Attaches an event listener in the capture phase (true). Because invalid events do not bubble, capture is mandatory to catch invalid child inputs on the parent form.
• Lines 121-125 (event.submitter): Modern DOM standard property representing the exact button element that triggered the submission.

Expected Browser Render Output

+---------------------------------------------------------------+
| Article Publishing Portal                                     |
| Test native submission blocking vs draft bypass.              |
|                                                               |
| Article Headline *                                            |
| [                                                           ] |
|                                                               |
| Author Contact Email *                                        |
| [                                                           ] |
|                                                               |
| [ 🚀 Publish Article (Validated)                            ] |
| [ 💾 Save Draft (Bypass)  ] [ Clear Fields                  ] |
|                                                               |
| [DOM LOG] Engine ready. Click 'Publish Article' with empty... |
| [15:10:02] ⛔ INVALID EVENT: Field "headline" failed.        |
|            Error message: "Please fill out this field."       |
+---------------------------------------------------------------+