PHPackages hollodk/beastvalidator - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Validation & Sanitization](/categories/validation) 4. / 5. hollodk/beastvalidator ActiveLibrary[Validation & Sanitization](/categories/validation) hollodk/beastvalidator ====================== A DOM-powered JS form validator with tooltips, inline messages, and beautiful UX v1.2.0(10mo ago)019MITJavaScriptCI passing Since Jun 18Pushed 10mo agoCompare [ Source](https://github.com/hollodk/beast-validator)[ Packagist](https://packagist.org/packages/hollodk/beastvalidator)[ RSS](/packages/hollodk-beastvalidator/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (19)Used By (0) 🐾 BeastValidator ================ [](#-beastvalidator) [![npm](https://camo.githubusercontent.com/be54a29a38082e5e6f84f995900f45daa47a2b6df8315c4cdd5e806a09b797ac/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f626561737476616c696461746f72)](https://camo.githubusercontent.com/be54a29a38082e5e6f84f995900f45daa47a2b6df8315c4cdd5e806a09b797ac/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f626561737476616c696461746f72)[![minified size](https://camo.githubusercontent.com/7a8e2f9d6f8bedc2e4c69baabb15a23167e3f90e150cf87868052575af9fb39d/68747470733a2f2f696d672e736869656c64732e696f2f62756e646c6570686f6269612f6d696e2f626561737476616c696461746f72)](https://camo.githubusercontent.com/7a8e2f9d6f8bedc2e4c69baabb15a23167e3f90e150cf87868052575af9fb39d/68747470733a2f2f696d672e736869656c64732e696f2f62756e646c6570686f6269612f6d696e2f626561737476616c696461746f72)[![gzip size](https://camo.githubusercontent.com/6a8cd192bdb269cbce48bf21094dc32dd7b92a56105b8d509620b875aeb2f81d/68747470733a2f2f696d672e736869656c64732e696f2f62756e646c6570686f6269612f6d696e7a69702f626561737476616c696461746f72)](https://camo.githubusercontent.com/6a8cd192bdb269cbce48bf21094dc32dd7b92a56105b8d509620b875aeb2f81d/68747470733a2f2f696d672e736869656c64732e696f2f62756e646c6570686f6269612f6d696e7a69702f626561737476616c696461746f72)[![license](https://camo.githubusercontent.com/79140bc519576b027585d50f3ba0382951b613d34417c767e2f2d78accd9af3e/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f626561737476616c696461746f72)](https://camo.githubusercontent.com/79140bc519576b027585d50f3ba0382951b613d34417c767e2f2d78accd9af3e/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f626561737476616c696461746f72)[![GitHub last commit](https://camo.githubusercontent.com/f3e0fee3178419c5923f2893d400416752462505e8f21f0f7b34c069e3149684/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6173742d636f6d6d69742f686f6c6c6f646b2f62656173742d76616c696461746f72)](https://camo.githubusercontent.com/f3e0fee3178419c5923f2893d400416752462505e8f21f0f7b34c069e3149684/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6173742d636f6d6d69742f686f6c6c6f646b2f62656173742d76616c696461746f72) > A flexible, no-dependency JavaScript form validator built for modern forms with great UX. > > πŸ”— **[Live Demo](https://hollodk.github.io/beast-validator/)**πŸ“ **[GitHub Repository](https://github.com/hollodk/beast-validator)** BeastValidator is built for developers who want clean, dependency-free form validation with a great user experience. Unlike bulky frameworks or config-heavy libraries, BeastValidator works directly with native HTML5 attributes and gives you full control β€” perfect for landing pages, modals, or dynamic UIs. --- ✨ Features ---------- [](#-features) - βœ… Validates required inputs, selects, checkboxes, radios - πŸ“§ Built-in email format validation - πŸ”€ Pattern matching via `pattern` - πŸ“ Min/max numeric range support via `data-min` / `data-max` - πŸ’‘ Min/Max length validation via `minlength` and `maxlength` - πŸŽ‚ Age range validation via `data-min-age` and `data-max-age` - 🀝 Match another field with `data-match` - πŸ” Password strength enforcement via `data-password-strength="weak|medium|strong"` - πŸ” Real-time validation (`input`/`change`) - 🫨 Shake animation for invalid fields - ⬇️ Scrolls to and focuses first invalid field - πŸ“‘ Optional API submission via `submitTo` - 🧩 `onFail`, `onSuccess`, `onInit` callbacks - 🧩 onSuccess(json) gives you a clean JSON object of all form values based on name="" - πŸ’¬ Tooltip support in multiple positions - 🌍 Multilingual error messages (EN, DA, DE, Pirate) - ⏳ Delayed validation with `data-sleep` - πŸ§ͺ Async field validation - 🧩 Step wizard support (`initSteps`, `data-step`, `nextStep`, `prevStep`) - ⌨️ Enter key triggers step validation and navigation automatically - πŸ”„ data-next buttons automatically show "Validating..." and become disabled during step validation or Enter key press - 🧠 Custom validators via `data-validator` - 🧩 Error summary with clickable links - πŸ”„ Reset method to clear all dirty states and visuals - βš™οΈ Auto-submit toggle - 🧱 Theme support: `beast`, `bootstrap`, `none` - πŸ“¦ Zero dependencies --- 🚦 Quick Start (in 3 steps) -------------------------- [](#-quick-start-in-3-steps) 1. **Add your form** ``` Submit ``` 2. **Initialize BeastValidator** ``` new BeastValidator('myForm', { onSuccess: (json) => console.log(json) }); ``` 3. **Enjoy automatic validation!** --- πŸš€ Installation -------------- [](#-installation) ### βœ… CDN [](#-cdn) ``` ``` ### πŸ“¦ NPM [](#-npm) ``` npm install beastvalidator ``` ``` import BeastValidator from 'beastvalidator'; ``` πŸ”— [NPM Package](https://www.npmjs.com/package/beastvalidator) ### 🐘 Composer (PHP Projects) [](#-composer-php-projects) ``` composer require hollodk/beastvalidator ``` πŸ”— [Packagist Package](https://packagist.org/packages/hollodk/beastvalidator) ### 🧾 Manual Download [](#-manual-download) ``` git clone https://github.com/hollodk/beast-validator.git ``` ``` ``` ### πŸ“¦ Module Mapping (for bundlers and CDNs) [](#-module-mapping-for-bundlers-and-cdns) If you're using a bundler, `import BeastValidator from 'beastvalidator'` will automatically resolve to the correct ESM build thanks to these fields in `package.json`: ``` { "main": "dist/validate.umd.js", "module": "dist/validate.esm.js", "unpkg": "dist/validate.min.js", "jsdelivr": "dist/validate.min.js" } ``` --- πŸ§ͺ Example Usage --------------- [](#-example-usage) ### βœ… HTML Form [](#-html-form) ``` Submit ``` ### βœ… JavaScript Initialization [](#-javascript-initialization) ``` new BeastValidator('myForm', { tooltips: 'top-center', autoSubmit: false, debug: true, initSteps: false, onFail: (fields) => console.warn('Invalid fields:', fields), onSuccess: (data) => alert('Form successful'), }); ``` --- 🧭 Step Wizard ------------- [](#-step-wizard) Enable multi-step flow with `initSteps: true`. Sections are shown via `data-step`. Add `[data-next]` and `[data-prev]` buttons to control flow. Enable with `initSteps: true`. Wrap form sections with `data-step="1"`, `data-step="2"`, etc. Use: ### HTML [](#html) ``` Step 1 Next Step 2 Back Submit Step 3 / Thank you ``` ### JavaScript [](#javascript) ``` validator.nextStep(); validator.prevStep(); ``` --- πŸ“‘ API Submission (Optional) --------------------------- [](#-api-submission-optional) You can use `submitTo` to automatically post the validated form data to an API endpoint, without writing your own fetch logic. ``` new BeastValidator('myForm', { submitTo: { url: 'https://api.example.com/form', method: 'POST', headers: { 'Content-Type': 'application/json' }, onResponse(response) { console.log('[onResponse]', response); alert('πŸŽ‰ Submission successful!'); // You can redirect or update the UI here }, onError(error) { console.warn('[onError]', error); alert('❌ Something went wrong. Please try again.'); // You can re-enable a button or show server-side messages }, }, }); ``` --- βš™οΈ Options ---------- [](#️-options) OptionTypeDefaultDescription`errorContainerClass`string`'beast-error-msg'`Class name for inline errors`tooltipClass`string`'beast-tooltip'`Class name for tooltips`focusFirst`bool`true`Scroll/focus first invalid field`validateOnChange`bool`true`Validate on `input` and `change` events`tooltips`string`'none'`Tooltip position (`top-left`, `top-right`, `top-center`)`helperText`bool`true`Show inline error below fields`shakeInput`bool`true`Shake animation for invalid fields`waitForDom`bool`true`Delay init until DOM is ready`setNoValidate`bool`true`Disable native browser validation`autoSubmit`bool`true`Auto submit form if valid`initSteps`bool`false`Enable step/wizard mode`debug`bool`false`Enable console logging`language`string`'en'`Language key from `messages``theme`string`'beast'``beast`, `bootstrap`, or `none``errorSummaryTarget`string`null`CSS selector for error summary`onInit`func`null`Callback after init`onFail`func`null`Callback with invalid fields`onSuccess`func`null`Callback on valid form`submitTo`object`null`Automatically submit to an API endpoint { url, method, headers, debug }--- πŸ“Œ Supported `data-*` Attributes ------------------------------- [](#-supported-data--attributes) AttributeExampleDescription`data-min``2`Min checkboxes or min value`data-max``6`Max numeric value`data-min-age``18`Minimum age in years`data-max-age``100`Maximum age in years`data-password-strength``strong`Enforce password complexity (`weak`, `medium`, `strong`)`data-sleep``1.5`Delay in seconds`data-match``password`Match field name`data-validator``checkUsername`Custom validator name`data-error-message``Field required`Override default message`data-error-container``#myErrorBox`Place error message in custom containerπŸ“Œ Supported Attributes ---------------------- [](#-supported-attributes) AttributeExampleDescription`pattern``[A-Z]{2}`Custom regex format`minlength``6`Min charaters in form`maxlength``2`Max characters in form--- 🎨 Styling --------- [](#-styling) Add your own styles or override defaults: ``` .beast-tooltip { background: #f44336; color: #fff; padding: 5px 10px; border-radius: 4px; } .beast-error-msg { color: red; font-size: 0.85em; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .shake { animation: shake 0.3s ease-in-out; } ``` --- πŸ“š Public API ------------ [](#-public-api) ``` const validator = new BeastValidator('form'); // Validate the whole form validator.validate(); // Validate a single field validator.validateField(document.querySelector('[name="email"]')); // Control step wizard validator.nextStep(); validator.prevStep(); // Reset form validator.reset(); // Extend language support setMessages(lang, messages) ``` ### ✨ Custom Field Validator Example [](#-custom-field-validator-example) ``` ``` ``` validator.addValidator('checkUsername', async (field) => { const value = field.value.trim(); if (value === 'admin') return 'Username taken'; return true; }); ``` --- 🌐 Custom Language Messages -------------------------- [](#-custom-language-messages) ``` validator.setMessages('fr', { required: 'Ce champ est requis', email: 'Adresse e-mail invalide' }); validator.setLanguage('fr'); ``` --- 🧩 Build Variants Overview ------------------------- [](#-build-variants-overview) FileFormatUse Case`dist/validate.esm.js`ESMβœ… Modern bundlers like Vite, Webpack, Rollup, etc.`dist/validate.umd.js`UMDβœ… For inclusion via `` in a browser (dev mode)`dist/validate.min.js`UMD (minified)βœ… Production-ready browser version or CDN like jsDelivr--- 🧠 When to Use Which ------------------- [](#-when-to-use-which) ### 1. πŸ›  Vite/Webpack/Rollup (Modern JavaScript Apps) [](#1--vitewebpackrollup-modern-javascript-apps) Use: `dist/validate.esm.js` Why: This is an ES module (ESM) file optimized for modern JavaScript tooling. It supports tree-shaking and integrates cleanly into apps built with frameworks like React, Vue, Svelte, or Alpine. ``` import BeastValidator from './dist/validate.esm.js'; const validator = new BeastValidator('formId', { ... }); ``` - βœ… Works out-of-the-box with Vite, Webpack, Rollup, etc. - βœ… Enables better build optimization (tree-shaking, minification) - βœ… Recommended for app development ### 2. 🌐 Browser via <script> (Vanilla Sites or CMS like WordPress) [](#2--browser-via-script-vanilla-sites-or-cms-like-wordpress) Use: `dist/validate.min.js` Why: This is a minified UMD build that exposes BeastValidator globally via window.BeastValidator. Ideal if you're using BeastValidator directly in a browser without any build step. ``` const validator = new BeastValidator('myForm', { debug: true }); ``` - βœ… No build step needed - βœ… Ready for use in HTML pages, WordPress, Laravel Blade, etc. - βœ… Optimized for production (small size, fast load) - βœ… Compatible with CDN usage (jsDelivr, unpkg) ### 3. πŸ€“ For Debugging in Browser Without Build Tools [](#3--for-debugging-in-browser-without-build-tools) Use: `dist/validate.umd.js` Why: This is the non-minified UMD build, useful for debugging or exploring how BeastValidator works in browser developer tools. ``` const validator = new BeastValidator('myForm', { debug: true }); ``` - βœ… Easier to read and debug in the browser - 🚫 Not optimized for production (larger file size) --- ❓ FAQ ----- [](#-faq) ### How do I validate only part of the form? [](#how-do-i-validate-only-part-of-the-form) Use `validateField()` or `validateCurrentStep()`. ### Can I skip auto-submission? [](#can-i-skip-auto-submission) Yes! Set `autoSubmit: false` and handle submission in `onSuccess()`. ### Does it work in React/Vue? [](#does-it-work-in-reactvue) Yes, if you attach BeastValidator to a raw DOM node using `ref`. ### Can I use it in modals or dynamic content? [](#can-i-use-it-in-modals-or-dynamic-content) Yes. Make sure to call `new BeastValidator()` **after** the form appears in the DOM. ### Can I use BeastValidator without defining validation in JavaScript? [](#can-i-use-beastvalidator-without-defining-validation-in-javascript) Yes! One of BeastValidator’s core strengths is that it leverages native HTML5 attributes like required, pattern, minlength, maxlength, type=email, and custom data-\* attributes for validation logic. You don’t need to define a separate JS config. ### Can I delay validation (e.g., to simulate an async check)? [](#can-i-delay-validation-eg-to-simulate-an-async-check) Yes. Use the data-sleep="1" attribute to pause validation for X seconds before checking the value. Useful for async debouncing. ### How can I debug what’s happening? [](#how-can-i-debug-whats-happening) Set debug: true to get verbose console logging of all key lifecycle events: ``` new BeastValidator('myForm', { debug: true }); ``` --- βœ… Roadmap --------- [](#-roadmap) - Custom tooltips - Step-by-step wizard - Pattern and length validation - Custom error containers and messages - Multilingual support - Shake animation - Error summary rendering - Build files in dist - Build minified version - Age filter - Password strength validator - TypeScript types - Accessibility improvements --- 🀝 Contributing -------------- [](#-contributing) We love contributions! 1. Fork the repo 2. Create a new branch 3. Write clean vanilla JS 4. Submit a PR πŸš€ ``` git clone https://github.com/hollodk/beast-validator.git ``` --- 🌍 Browser Support ----------------- [](#-browser-support) - βœ… Chrome, Firefox, Safari, Edge, Opera --- πŸ“„ License --------- [](#-license) MIT β€” Free for personal & commercial use --- πŸ‘¨β€πŸ’» Author ---------- [](#‍-author) Made with πŸ’› by [@hollodk](https://github.com/hollodk)πŸ”— [Demo](https://hollodk.github.io/beast-validator/)πŸ“ [Repository](https://github.com/hollodk/beast-validator) ### Health Score 29 β€” LowBetter than 59% of packages Maintenance53 Moderate activity, may be stable Popularity6 Limited adoption so far Community6 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits β€” single point of failure How is this calculated?**Maintenance (25%)** β€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** β€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** β€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** β€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 18 Last Release 329d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/ee90a31416b7f47e230b18698abf807c0fbf8b14198d062023372b488136d241?d=identicon)[hollo](/maintainers/hollo) --- Top Contributors [![hollodk](https://avatars.githubusercontent.com/u/651271?v=4)](https://github.com/hollodk "hollodk (83 commits)") ### Embed Badge ![Health badge](/badges/hollodk-beastvalidator/health.svg) ``` [![Health](https://phpackages.com/badges/hollodk-beastvalidator/health.svg)](https://phpackages.com/packages/hollodk-beastvalidator) ``` ### Alternatives [webmozart/assert Assertions to validate method input/output with nice error messages. 7.6k894.0M1.2k](/packages/webmozart-assert)[bensampo/laravel-enum Simple, extensible and powerful enumeration implementation for Laravel. 2.0k15.9M104](/packages/bensampo-laravel-enum)[swaggest/json-schema High definition PHP structures with JSON-schema based validation 48612.5M73](/packages/swaggest-json-schema)[stevebauman/purify An HTML Purifier / Sanitizer for Laravel 5325.6M19](/packages/stevebauman-purify)[ashallendesign/laravel-config-validator A package for validating your Laravel app's config. 217905.3k5](/packages/ashallendesign-laravel-config-validator)[crazybooot/base64-validation Laravel validators for base64 encoded files 1341.9M8](/packages/crazybooot-base64-validation) PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)