BeastValidator Demo

🚀 Basic Validation

Start with a simple form using required fields and built-in validation.

🧭 Multi-Step Form

Progress through a multi-step form with per-step validation.

🔍 Advanced Form

This form shows advanced capabilities like async validators, match fields, custom messages, and group validation.

Username (async check)

Password (6–12 chars)

Confirm Password

Custom error message

Country code

Sleep (async)

Price (10–1000)

Date of birth

Favorite Color

Preferred Contact Method *

Email

Phone

Choose at least 2 options *

Option A

Option B

Option C

I agree to terms

🧠 Custom Validator Demo

Register and test your own custom logic. This field checks if the input contains the word beast.

📋 Error Summary Box

See all validation issues listed clearly in one place. Great for accessibility and quick debugging.

📡 API Submission Demo

This form uses submitTo to send data directly to a remote API endpoint.

🌍 Language & Theme Playground

Switch language and styling in real time to see how BeastValidator adapts.

🌐 Language

🎨 Theme

📦 Installation & Usage

BeastValidator is available via NPM, Composer, or CDN. Choose the method that fits your stack.

🔧 NPM

npm install beastvalidator

🐘 Composer

composer require hollodk/beastvalidator

🌐 CDN

<script src="https://cdn.jsdelivr.net/npm/beastvalidator@latest/dist/validate.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/beastvalidator@latest/dist/style.min.css">

🧠 Basic Usage

<form id="myForm">
  <input type="text" name="email" required>
</form>

<script>
  const validator = new BeastValidator('#myForm', {
    debug: true,
    autoSubmit: false,
    onSuccess: (json) => alert("Form is valid!"),
  });
</script>

📚 Resources

✨ Features

BeastValidator is built to be flexible, lightweight, and modern. Here's what it can do:

✅ Inline error messages or tooltips
🧭 Step-by-step form navigation with validation gates
🧠 Custom validator support (sync or async)
🌐 Multilingual support with dynamic language switching
🎨 Theme support (Beast, Bootstrap, custom)
📋 Error summary rendering with focus scroll
🌀 Visual effects like input shaking
💬 Helper texts below inputs
📊 Per-step validation with data-step logic
🛠️ Extendable with addValidator() and registerTheme()
⚡ Zero dependencies and works in plain HTML or SPA setups

💡 Code Examples

Quick examples to get started with different features of BeastValidator.

✅ Basic Setup

<form id="myForm">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
</form>

<script>
  const validator = new BeastValidator('#myForm', {
    onSuccess: (json) => alert('Form is valid!'),
  });
</script>

🧠 Custom Validator

<input name="username" data-validator="checkUser">

<script>
  validator.addValidator("checkUser", async (field) => {
    await new Promise(r => setTimeout(r, 300));
    return field.value === "admin" ? "Username not allowed" : true;
  });
</script>

📋 Error Summary

<div id="summary"></div>

const validator = new BeastValidator('#form', {
  errorSummaryTarget: '#summary',
});

🌍 Switch Language

validator.setLanguage('de'); // Change to German

🧭 Step Navigation

<div class="step-section" data-step="1">...</div>
<button data-next>Next</button>

new BeastValidator('#stepForm', {
  initSteps: true,
  onStepChange: step => console.log('Step:', step)
});

❓ Frequently Asked Questions

BeastValidator works in all modern browsers (Chrome, Firefox, Safari, Edge). IE is not officially supported.

Absolutely. BeastValidator works with any DOM-based form, so it's fully compatible with React, Vue, Alpine.js, or Stimulus when forms are rendered normally in the DOM.

BeastValidator supports themes via the theme option. You can use built-in themes (like bootstrap) or define your own using registerTheme().

Yes! Use addValidator() to register async functions and call APIs in real-time. BeastValidator supports async validation by default.

Use the built-in validator.reset() method to remove all errors, tooltips, and reset step tracking if used.

👨‍💻 About the Author

Built with 💚 by Michael Holm.
Maintained under Clubmaster GmbH in Switzerland.