FormLayer

Why FormLayer?

Progressive Enhancement

Works with any server-rendered HTML form. Your forms work without JavaScript — FormLayer adds validation, plugins, and AJAX submit on top.

Framework-Free

No React, Vue, or Angular dependency. Pure TypeScript that enhances standard <form> elements with data-* attributes.

Declarative Validation

Define validation rules in HTML via data-validate JSON. 12 built-in validators, async validator support, and easy custom validators.

TYPO3 Ready

First-class TYPO3 EXT:form integration with AJAX submit, multistep forms, client-side variants, and lifecycle hooks.

Quick Example

<form id="contact">
  <div data-form-field="name" data-validate='[{"type":"NotEmpty","options":{"message":"Name is required"}}]'>
    <label for="name">Name</label>
    <input id="name" type="text" />
    <div id="name-errors" class="invalid-feedback"></div>
  </div>

  <div data-form-field="email" data-validate='[{"type":"NotEmpty"},{"type":"EmailAddress","options":{"message":"Enter a valid email"}}]'>
    <label for="email">Email</label>
    <input id="email" type="email" />
    <div id="email-errors" class="invalid-feedback"></div>
  </div>

  <button type="submit">Send</button>
</form>

import { formRegistry } from 'formlayer';
import { registerDefaultValidators } from 'formlayer';

registerDefaultValidators();
formRegistry.init({
  submitFn: async (ctx) => {
    const response = await fetch(ctx.formEl.action, {
      method: 'POST',
      body: ctx.formData,
    });
    ctx.finish('Thank you!');
  },
});