Trivule

Trivule is a powerful, user-friendly JavaScript library designed to simplify form validation for developers. It is a ready-to-integrate solution for modern frameworks with a streamlined, focused API that reduces complexity by ~30-40% while maintaining all essential validation features.

Documentation: Refer to the comprehensive documentation or the 5-minute tutorial to get started quickly.

✨ What's New: Simplified & Streamlined

Major v2.0 Refactor: Trivule has been completely streamlined for better performance and maintainability.

---

🚀 Installation

Install Trivule via npm:

npm install trivule

---

✨ Key Features

• HTML/CSS-Based Validation: Perfect for quickly setting up validations using just HTML and CSS.
• Time Efficiency: Minimize scripting time. Set up once, and let Trivule handle the rest.
• Intuitive Syntax: User-friendly attributes make implementing validation rules straightforward.
• Conditional Validation: Easily handle complex scenarios.
• Localization Support: Built-in support for multiple languages.
• Extensible: Add or customize rules as your application requirements grow.

---

💡 Quick Start

1. HTML-Based Validation

Effortlessly validate inputs by defining rules directly in your HTML.

<!-- Define rules -->
<input name="email" type="text" @v:rules="required|email|maxlength:60" />

<!-- Display feedback -->
<p @v:feedback="email" class="invalid-feedback"></p>

---

🛠 Usage & Configuration

Global Initialization

Initialize Trivule globally with custom configuration to apply settings across your entire application.

const trivule = Trivule.init({
  locale: 'fr',
  invalidClass: 'is-invalid',
  validClass: 'is-valid',
  triggerEvents: ['input', 'blur', 'submit'],
});

Form Validation Setup

• Automatic Validation: Add @v:form to automatically validate a form.
• Ignore Form: Forms without the attribute (or configured prefix) are ignored by default in v2.0 (configurable).

<!-- Automatically validated -->
<form @v:form>
  <input name="email" @v:rules="required|email" />
  <div @v:feedback="email"></div>
</form>

<!-- Ignored -->
<form>
  <input name="search" type="text" />
</form>

Event-Based Validation

Control when validation triggers. Default is ['submit'].

Priority Order:

1. Input's @v:event (Highest)
2. Form's @v:event
3. Global Config
4. Default (submit)

<form @v:form @v:event="blur">
  <!-- Uses form default: blur -->
  <input name="email" @v:rules="required|email" />

  <!-- Overrides with input specific events -->
  <input name="name" @v:rules="required" @v:event="input|blur" />
</form>

Custom Styling

Apply classes dynamically based on validation state.

<input
  type="text"
  name="age"
  @v:invalid-class="error"
  @v:valid-class="success"
/>

Custom Error Messages

Override default messages per field.

<input
  type="text"
  name="email"
  @v:rules="required|email"
  @v:msg.required="Email is required"
  @v:msg.email="Please provide a valid email"
/>

Extending Rules

Add your own validation logic using TrRule.

TrRule.add('notSudo', (input) => {
  return {
    value: input,
    passes: input !== 'sudo',
  };
});

---

💻 Development & Contribution

If you would like to contribute to the development of Trivule or customize the library, here's what you need:

Prerequisites

• Node.js >= 20
• npm installed
• TypeScript

Setup

1. Clone the repository:

   git clone https://github.com/trivule/trivule.git

2. Install dependencies:

   npm install

3. Start development server:

   npm run dev

4. Build the project:

   npm run build

Directory Structure

• src/core: Core logic.
• src/rules: Validation rules.
• src/locale: Internationalization files.
• src/messages: Message generation.

Contributing

We welcome contributions! Please refer to our contribution guidelines and code of conduct.

---

🤝 Community & Support

• Discord: Join Server
• X (Twitter): @trivule
• Security: Contact jsbenincommunity@gmail.com for security issues.

📄 License

Trivule is released under the MIT License. Maintained by the JS Benin Community and developed by Claude Fassinou and contributors.