Download the PHP package hollodk/beastvalidator without Composer
On this page you can find all versions of the php package hollodk/beastvalidator. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download hollodk/beastvalidator
More information about hollodk/beastvalidator
Files in hollodk/beastvalidator
Package beastvalidator
Short Description A DOM-powered JS form validator with tooltips, inline messages, and beautiful UX
License MIT
Informations about the package beastvalidator
πΎ BeastValidator
A flexible, no-dependency JavaScript form validator built for modern forms with great UX.
π Live Demo π GitHub Repository
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
- β 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
minlengthandmaxlength - π Age range validation via
data-min-ageanddata-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,onInitcallbacks - π§© 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)
-
Add your form
-
Initialize BeastValidator
- Enjoy automatic validation!
π Installation
β CDN
π¦ NPM
π NPM Package
π Composer (PHP Projects)
π Packagist Package
π§Ύ Manual Download
π¦ 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:
π§ͺ Example Usage
β HTML Form
β JavaScript Initialization
π§ 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
JavaScript
π‘ API Submission (Optional)
You can use submitTo to automatically post the validated form data to an API endpoint, without writing your own fetch logic.
βοΈ Options
| Option | Type | Default | Description |
|---|---|---|---|
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
| Attribute | Example | Description |
|---|---|---|
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
| Attribute | Example | Description |
|---|---|---|
pattern |
[A-Z]{2} |
Custom regex format |
minlength |
6 |
Min charaters in form |
maxlength |
2 |
Max characters in form |
π¨ Styling
Add your own styles or override defaults:
π Public API
β¨ Custom Field Validator Example
π Custom Language Messages
π§© Build Variants Overview
| File | Format | Use Case |
|---|---|---|
dist/validate.esm.js |
ESM | β Modern bundlers like Vite, Webpack, Rollup, etc. |
dist/validate.umd.js |
UMD | β
For inclusion via <script> in a browser (dev mode) |
dist/validate.min.js |
UMD (minified) | β Production-ready browser version or CDN like jsDelivr |
π§ When to Use Which
1. π Vite/Webpack/Rollup (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.
- β 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)
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.
- β 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
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.
- β Easier to read and debug in the browser
- π« Not optimized for production (larger file size)
β FAQ
How do I validate only part of the form?
Use validateField() or validateCurrentStep().
Can I skip auto-submission?
Yes! Set autoSubmit: false and handle submission in onSuccess().
Does it work in React/Vue?
Yes, if you attach BeastValidator to a raw DOM node using ref.
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?
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)?
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?
Set debug: true to get verbose console logging of all key lifecycle events:
β Roadmap
- [x] Custom tooltips
- [x] Step-by-step wizard
- [x] Pattern and length validation
- [x] Custom error containers and messages
- [x] Multilingual support
- [x] Shake animation
- [x] Error summary rendering
- [x] Build files in dist
- [x] Build minified version
- [x] Age filter
- [x] Password strength validator
- [ ] TypeScript types
- [ ] Accessibility improvements
π€ Contributing
We love contributions!
- Fork the repo
- Create a new branch
- Write clean vanilla JS
- Submit a PR π
π Browser Support
- β Chrome, Firefox, Safari, Edge, Opera
π License
MIT β Free for personal & commercial use
π¨βπ» Author
Made with π by @hollodk π Demo π Repository