js-validation

Lightweight, zero-dependency vanilla JavaScript form validation library inspired by jquery-validation.

Features

• No dependency (pure JS)
• Modular rules – each rule lives in its own file under src/rules/
• Built-in rules: required, email, minlength, maxlength, pattern, equalTo, notEqualTo, numeric, url, date, dateISO, maxfiles, maxsize, etc
• Extensible with custom rules via addMethod
• Build with Vite – outputs js-validation.js and js-validation.min.js
• Test with Vitest

Installation

NPM

npm install @phpdevsr/js-validation

CDN (jsDelivr)

<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/@phpdevsr/js-validation/dist/js-validation.min.js"></script>

<!-- Specific version -->
<script src="https://cdn.jsdelivr.net/npm/@phpdevsr/[email protected]/dist/js-validation.min.js"></script>

<!-- ES module -->
<script type="module">
  import jsValidation from 'https://cdn.jsdelivr.net/npm/@phpdevsr/js-validation/dist/js-validation.esm.min.js';
</script>

Build

npm run build

Produces in dist/:

• js-validation.js – UMD (unminified)
• js-validation.min.js – UMD (minified)
• js-validation.esm.js – ES module (unminified)
• js-validation.esm.min.js – ES module (minified)

Test

npm test

Usage (ES module)

Default import (all rules included)

import jsValidation from '@phpdevsr/js-validation';

const validator = jsValidation('#signup', {
  rules: {
    email: { required: true, email: true },
    password: { required: true, minlength: 6 },
    confirmPassword: { required: true, equalTo: '#password' }
  },
  messages: {
    confirmPassword: { equalTo: 'Passwords must match.' }
  }
}).submit((form) => {
  // Only fires when all fields are valid
  fetch('/api/signup', { method: 'POST', body: new FormData(form) });
});

Selective import (choose only the rules you need)

// Import core without any rules
import jsValidation from '@phpdevsr/js-validation/core';

// Then import only the specific rules you need
import '@phpdevsr/js-validation/rules/required';
import '@phpdevsr/js-validation/rules/email';

// Available rules: required, email, minlength, maxlength, pattern, equalTo, notEqualTo, numeric, url, date, dateISO, maxfiles, maxsize

const validator = jsValidation('#contact', {
  rules: {
    name: { required: true },
    email: { required: true, email: true }
  }
}).submit((form) => {
  fetch('/api/contact', { method: 'POST', body: new FormData(form) });
});

Usage (UMD / browser script tag)

<script src="dist/js-validation.min.js"></script>
<script>
  const validator = jsValidation.default('#signup', { /* rules */ });
</script>

Custom rule

import jsValidation from 'js-validation';

jsValidation.addMethod('startsWithA', (value) => value.startsWith('A'), 'Must start with letter A.');

Contributing

We are accepting contributions from the community! It doesn't matter whether you can code, write documentation, or help find bugs, all contributions are welcome.

Please read the CONTRIBUTING.md.

This project has had thousands on contributions from people since its creation. This project would not be what it is without them.

Made with contrib.rocks.