Veli Form Validation (v1.0.0)

A lightweight, zero-dependency form validation library that uses HTML attributes for validation rules.

Developed by GD3V

---

What is Veli?

Veli is a modern JavaScript form validation library that lets you define validation rules directly in HTML attributes. No complex configuration, no dependencies—just HTML attributes like data-veli-rules and you're done.

<input
  type="text"
  id="fName"
  data-veli-rules='{"name":"fName", "type":"text", "minWord": "2"}'
/>

---

Key Features

✅ Zero Dependencies — Pure JavaScript, no external libraries
✅ HTML-First — Define rules in HTML attributes
✅ 6 Field Types — text, password, email, tel, number, checkbox
✅ 3 Design Systems — classic, floating-label, ifta-label
✅ Real-Time Validation — Instant feedback as users type
✅ Multi-Language — Built-in English & French support
✅ TypeScript Ready — Full type definitions included
✅ Accessible — ARIA compliant, screen reader support
✅ Framework Agnostic — Works with vanilla JS, React, Vue, Angular, etc.
✅ Lightweight — ~15KB minified, ~5KB gzipped

---

Quick Start

1. Install

## node environment
npm install @gd3v/veli

2. Import

<!-- node environment -->
import "@gd3v/veli";
<!-- CDN -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@gd3v/veli@latest/dist/veli.js"></script>
<!-- 
  If you dowloaded the library with the download button on our website,
  extract the zip file and
  add the following script right before your </body> 
-->
<script type="module" src="path-to-your-extracted-folder/veli.js"></script>

3. Create a Form

<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>

That's it! Validation is automatic.

Note: All forms that are to be validated should have an id

---

Supported Field Types

Type	Purpose	Key Options
text	General text input	minChar, maxChar, pattern
password	Secure password input	securityLevel, confirmWith
email	Email validation	provider (gmail, outlook, yahoo, any)
tel	Phone number	country (see supported countries)
number	Numeric input	minValue, maxValue
checkbox	Checkboxes & agreements	required

Full Field Types Reference

---

Design Systems

Choose the visual style that fits your app:

Classic

Traditional form layout. Labels above inputs, clear and scannable.

Floating Label

Modern SPA style. Labels animate above inputs on focus. Space-efficient.

IFTA Label

Maximum accessibility. Fieldset-based with legend labels. Screen reader friendly.

Design Systems Guide

---

Real-World Examples

• Contact forms
• User registration
• Login pages
• Product orders
• Survey forms
• React/Vue components

Live Editor

---

Validation Response

The library dispatches an event onCompleteValidation. We listern to this event to get the validation response.

<script type="module">
  document
    .getElementById("your form id")
    .addEventListener("onCompleteValidation", (e) => {
      const result = validationResponse["your form id"];
      console.log(result);
    });
</script>

---

Full Documentation

• Getting Started — Installation & setup
• Field Types — All validation options
• Design Systems — UI themes
• Examples — Real code samples
• API Reference — Complete API docs

---

Browser Support

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

---

Questions? Check the API Reference or see Examples for common patterns.