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 --><scriptsrc="https://cdn.jsdelivr.net/npm/@phpdevsr/js-validation/dist/js-validation.min.js"></script><!-- Specific version --><scriptsrc="https://cdn.jsdelivr.net/npm/@phpdevsr/js-validation@1.0.0/dist/js-validation.min.js"></script><!-- ES module --><scripttype="module">importjsValidationfrom'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)

importjsValidationfrom'@phpdevsr/js-validation';constvalidator=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 validfetch('/api/signup',{method: 'POST',body: newFormData(form)});});

Selective import (choose only the rules you need)

// Import core without any rulesimportjsValidationfrom'@phpdevsr/js-validation/core';// Then import only the specific rules you needimport'@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, maxsizeconstvalidator=jsValidation('#contact',{rules: {name: {required: true},email: {required: true,email: true}}}).submit((form)=>{fetch('/api/contact',{method: 'POST',body: newFormData(form)});});

Usage (UMD / browser script tag)

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

Custom rule

importjsValidationfrom'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.