A11y Form Validator Dependency-light validation for semantic HTML forms

Start here

Basic

Semantic contact form with inline errors, a summary, grouped choices, and character count guidance.

Back to demo gallery
Preferred reply method

Developer notes

This demo combines semantic HTML constraints with the default preset and character count addon. It uses the readable ./dist/index.js build; use the direct browser demo when you want to inspect ./dist/index.min.js.

Semantic markup

<form data-a11y-form-validator novalidate>
  <input name="email" type="email" required />
  <textarea
    name="message"
    required
    minlength="10"
    maxlength="180"
    data-character-count
  ></textarea>
</form>

Default setup

const preset = createDefaultPreset();
createFormValidator(form, {
  ...preset,
  addons: [...preset.addons, createCharacterCountAddon()]
});