form-validator-js
GitHub ↗

v1.1.0 · MIT · zero deps

Validation rules in HTML.
No JavaScript schema.

Declarative data-* attribute rules for server-rendered apps, HTMX/Alpine, and no-build static sites.

See it work ↓ Read the docs

One demo

The form below is wired with the library. Try submitting empty, then with `ab`. The JS imports it from npm, the rules live in `data-validation`.

Live form
      index.html
      <form id="home-demo-form" novalidate>
  <div>
    <label for="home-login">Login</label>
    <input id="home-login" name="login" type="text" data-validation="required;minLength(3)" />
    <ul class="error-list"></ul>
  </div>
  <div>
    <label for="home-password">Password</label>
    <input id="home-password" name="password" type="password" data-validation="required;minLength(8)" />
    <ul class="error-list"></ul>
  </div>
  <button type="submit">Sign in</button>
</form>
      home.demo.ts
      import { FormValidator } from '@form-validator-js/core';
import { required, minLength } from '@form-validator-js/validators';

const form = document.querySelector<HTMLFormElement>('#home-demo-form');
if (form) {
  new FormValidator({
    form,
    validatorDeclarations: {
      required:  { ...required,  errorMessage: 'Required' },
      minLength: { ...minLength, errorMessage: 'Too short' },
    },
    onErrorMessageListChanged(target, errors) {
      if (target === form) return;
      const list = (target as HTMLElement).parentElement?.querySelector('.error-list');
      if (!list) return;
      list.innerHTML = errors.map((m) => `<li>${m}</li>`).join('');
    },
  });
}

      When this fits, when it doesn't

      This is the Parsley.js / jQuery Validate style: rules go in HTML, JS just wires up the engine. Good for:

      If you're on a component framework with state-managed forms (React, Vue, Svelte, Solid), reach for react-hook-form + zod, @tanstack/form + valibot, or similar. Schema-first validation with full TypeScript inference is a better fit there.