Skip to main content

Getting Started with Veli

Installation​

Via npm​

npm install @gd3v/veli

Direct Import (UMD Bundle)​

<script type="module" src="https://cdn.jsdelivr.net/npm/@gd3v/veli@latest/dist/veli.js"></script>

ES Modules​

import "@gd3v/veli";

Basic Form Structure​

Veli requires a specific HTML structure. Each field must be wrapped in a .veli-field-wrapper container:

<form id="myForm" data-veli-design="classic" data-veli-lang="en">
  <div class="veli-field-wrapper">
    <label>Email</label>
    <input
      type="text"
      id="fName"
      data-veli-rules='{"name":"fName", "type":"text", "minWord": "2"}'
    />
    <span class="veli-error"></span>
  </div>
</form>

Key Components​

  1. <form data-veli-design="..."> — Form container with design system
  2. .veli-field-wrapper — Container for each field
  3. <input data-veli-rules='...'> — Input with JSON validation rules
  4. <span class="veli-error"></span> — Where error messages appear

Choose a Design System​

Option 1: Classic Design​

<form data-veli-design="classic">
  <!-- fields -->
</form>

Option 2: Floating Label Design​

<form data-veli-design="floating-label">
  <!-- fields with label AFTER input -->
</form>

Option 3: IFTA Label Design​

<form data-veli-design="ifta-label">
  <!-- fields using fieldset/legend -->
</form>

Initialize Validation​

Method 1: Auto-Initialize (Browser)​

<script src="/path-to-your-extracted-folder/veli.js"></script>
<!-- Automatically initializes all forms cant contain id on page load -->

Method 2: Manual Initialization (JavaScript)​

import {Veli} from "@gd3v/veli";

const form = document.getElementById("myForm");
const validator = new Veli(form, "en"); // 'en' or 'fr'

// Validate on submit
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const result = validationResponse["your form id"];
  console.log(result); // { status: true/false, values: {...}}
});

Complete Minimal Example​

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <form id="contactForm" data-veli-design="classic" data-veli-lang="en">
      <h1>Contact Form</h1>

      <!-- Text Field -->
      <div class="veli-field-wrapper">
        <label>Name</label>
        <input
          type="text"
          name="name"
          data-veli-rules='{"type":"text","name":"name","minChar":"2"}'
        />
        <span class="veli-error"></span>
      </div>

      <!-- Email Field -->
      <div class="veli-field-wrapper">
        <label>Email</label>
        <input
          type="email"
          name="email"
          data-veli-rules='{"type":"email","name":"email"}'
        />
        <span class="veli-error"></span>
      </div>

      <!-- Checkbox -->
      <div class="veli-field-wrapper">
        <label>
          <input type="checkbox" name="subscribe" />
          Subscribe to newsletter
        </label>
      </div>

      <button type="submit">Submit</button>
    </form>

    <script src="path-to-your-extracted-folder/veli.js"></script>
  </body>
</html>

Configure Colors​

import {VeliConfig} from "@gd3v/veli";

// Call once at app startup
VeliConfig({
  colors: {
    error: "#dc3545", // Red
    success: "#28a745", // Green
    warning: "#ffc107", // Orange
    info: "#17a2b8", // Blue
  },
});

Common Validation Rules​

Text Field​

{
  "type": "text",
  "name": "username",
  "minChar": "3",
  "maxChar": "20"
}

Password Field​

{
  "type": "password",
  "name": "password",
  "securityLevel": "s4"
}

Email Field​

{
  "type": "email",
  "name": "email",
  "provider": "any"
}

Phone Field​

{
  "type": "tel",
  "name": "phone",
  "country": "cameroon"
}

Number Field​

{
  "type": "number",
  "name": "age",
  "minValue": "18",
  "maxValue": "120"
}

Checkbox Field​

{
  "type": "checkbox",
  "name": "terms",
  "required": "true"
}

Next Steps​