Formageddon - HTML Form Validation Playground

Getting started

Include the script

<script src="formageddon.js" defer></script>

Add data-validate to your form
```
<form data-validate>
  ...
</form>
```

Link a message element with aria-describedby

<label for="email">
  Email
  <input
    id="email"
    type="email"
    required
    data-required-err="Email is required."
    data-type-err="Enter a valid email address."
    data-success="Looks good!"
    aria-describedby="email-msg"
  />
  <small id="email-msg"></small>
</label>

Optionally auto-manage the submit button

<button type="submit" data-submit>Submit</button>

Installation

Browser drop-in

<script src="formageddon.js" defer></script>

npm

npm install formageddon

Attribute reference

Form and field control

Attribute	On	Purpose
`data-validate`	`<form>`	Enables auto-initialisation on this form
`data-ignore`	any field	Skips validation for this field entirely
`data-submit`	`<button type="submit">`	Auto-disables the button until the form is valid
`data-confirm="#id"`	any field	Value must match the referenced element
`data-success`	any field	Message shown in the message element when the field is valid

Custom error messages

Validity state	Attribute	Default message
`valueMissing`	`data-required-err`	This field is required.
`typeMismatch`	`data-type-err`	The value is not the correct type.
`patternMismatch`	`data-pattern-err`	The value does not match the required pattern.
`tooShort`	`data-minlength-err`	The value is too short.
`tooLong`	`data-maxlength-err`	The value is too long.
`rangeUnderflow`	`data-min-err`	The value is too small.
`rangeOverflow`	`data-max-err`	The value is too large.
`stepMismatch`	`data-step-err`	The value does not match the step interval.
`badInput`	`data-type-err`	The input value is invalid.
File `accept`	`data-accept-err`	Invalid file type.
Confirm mismatch	`data-confirm-err`	Values do not match.

Behaviour

Validation events

Fires on input, change, and blur. Disabled and read-only fields are skipped. Empty optional fields show no state.

Dynamic forms

A MutationObserver watches the document body. Any [data-validate] form added after page load is automatically initialised.

Reset

Resetting a form clears all aria-invalid attributes and message text automatically.

Styling

Formageddon ships no CSS. It sets aria-invalid on fields and .invalid / .valid on message elements.

:is(input, select, textarea)[aria-invalid="true"]  { border-color: #ef4444; }
:is(input, select, textarea)[aria-invalid="false"] { border-color: #22c55e; }

.invalid { color: #ef4444; }
.valid   { color: #22c55e; }

Live Playground