@jacobberglund/enhance-form

A web component that progressively enhances HTML forms with AJAX submission, field-level validation, and targeted DOM updates.

Installation

npm install @jacobberglund/enhance-form

Usage

import "@jacobberglund/enhance-form";

<enhance-form target="#results" fail-target="#error-container">
  <form action="/submit" method="POST">
    <fieldset enhance-form-group>
      <input name="email" enhance-validate />
    </fieldset>
    <button type="submit">Submit</button>
  </form>
</enhance-form>

<div id="results"></div>
<div id="error-container"></div>

Attributes

| Attribute | Description | | ------------- | -------------------------------------------------------- | | target | CSS selector for element to replace on success (200) | | fail-target | CSS selector for element to replace on server errors (5xx). Defaults to target |

Form Attributes

| Attribute | Description | | --------------------- | ------------------------------------------------ | | enhance-form-group | Marks a container (e.g., fieldset) for partial updates during validation | | enhance-validate | Enables blur validation on an input |

Response Headers

The server can use these headers to control behavior:

| Header | Description | | -------------------- | ------------------------------------ | | X-Enhance-Redirect | Triggers a redirect to the specified URL |

Request Headers

These headers are sent with requests to help the server understand the context:

| Header | Description | | ------------------- | ---------------------------------------- | | X-Enhance-Submit | Indicates a full form submission | | X-Enhance-Validate| Indicates a field validation request (value is the field name) |

Features

• 🔄 AJAX Submission - No page reload required
• ✅ Field Validation - Validate on blur with server-side logic
• 🎯 Targeted Updates - Replace specific DOM elements with response
• 🎬 View Transitions - Integrates with View Transitions API when available
• 📱 Progressive Enhancement - Falls back gracefully without JS