htmx Form

Response-aware form that auto-configures the htmx response-targets extension and injects error-handling JavaScript.

<rhx-htmx-form>

Examples

Basic Form with Validation

Submits via htmx POST. On 422 validation failure, errors are swapped into the error target.

<rhx-htmx-form page="/Docs/Components/HtmxForm" page-handler="Contact"
                rhx-error-target="#form-errors">
    <rhx-input name="Name" rhx-label="Name" rhx-required="true" />
    <rhx-input name="Email" rhx-label="Email" type="email" />
    <rhx-button type="submit" rhx-variant="brand">Submit</rhx-button>
</rhx-htmx-form>

Reset on Success

The form resets automatically after a successful submission.

<rhx-htmx-form page="/Docs/Components/HtmxForm" page-handler="Message"
                rhx-reset-on-success="true">
    <rhx-textarea name="Message" rhx-label="Message" />
    <rhx-button type="submit" rhx-variant="brand">Send</rhx-button>
</rhx-htmx-form>

Server-Side Pattern

Pair with the existing HtmxValidationFailure() extension for 422 responses:

public IActionResult OnPostContact()
{
    if (!ModelState.IsValid)
    {
        return this.HtmxValidationFailure("_FormErrors", this);
    }

    return Content("<rhx-callout rhx-variant=\"success\">Saved!</rhx-callout>", "text/html");
}