Skip to main content

Examples & Code Samples

Real-world examples using Veli v1.0.0.

Example 1: Simple Contact Form​

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <form id="contactForm" data-veli-design="classic" data-veli-lang="en">
      <h1>Contact Us</h1>

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

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

      <div class="veli-field-wrapper">
        <label>Phone</label>
        <input
          type="tel"
          name="phone"
          data-veli-rules='{"type":"tel","name":"phone","country":"cameroon"}'
        />
        <span class="veli-error"></span>
      </div>

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

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

Example 2: Registration Form​

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <form
      id="registerForm"
      data-veli-design="floating-label"
      data-veli-lang="en"
    >
      <h1>Create Account</h1>

      <div class="veli-field-wrapper">
        <input
          type="text"
          name="username"
          placeholder=" "
          data-veli-rules='{"type":"text","name":"username","minChar":"3","maxChar":"20"}'
        />
        <label>Username</label>
        <span class="veli-error"></span>
      </div>

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

      <div class="veli-field-wrapper">
        <input
          type="password"
          name="password"
          placeholder=" "
          data-veli-rules='{"type":"password","name":"password","securityLevel":"s4"}'
        />
        <label>Password</label>
        <span class="veli-error"></span>
      </div>

      <div class="veli-field-wrapper">
        <input
          type="password"
          name="confirmPassword"
          placeholder=" "
          data-veli-rules='{"type":"password","name":"confirmPassword","confirmWith":"password"}'
        />
        <label>Confirm Password</label>
        <span class="veli-error"></span>
      </div>

      <div class="veli-field-wrapper">
        <input
          type="checkbox"
          name="terms"
          data-veli-rules='{"type":"checkbox","name":"terms","required":"true"}'
        />
        <label>I agree to the terms</label>
        <span class="veli-error"></span>
      </div>

      <button type="submit">Sign Up</button>
    </form>

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

Example 3: Order Form​

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <form id="orderForm" data-veli-design="ifta-label" data-veli-lang="en">
      <h1>Order Form</h1>

      <fieldset class="veli-field-wrapper">
        <legend>Full Name</legend>
        <input
          type="text"
          name="fullname"
          data-veli-rules='{"type":"text","name":"fullname","minChar":"2"}'
        />
        <span class="veli-error"></span>
      </fieldset>

      <fieldset class="veli-field-wrapper">
        <legend>Email Address</legend>
        <input
          type="email"
          name="email"
          data-veli-rules='{"type":"email","name":"email"}'
        />
        <span class="veli-error"></span>
      </fieldset>

      <fieldset class="veli-field-wrapper">
        <legend>Quantity</legend>
        <input
          type="number"
          name="quantity"
          data-veli-rules='{"type":"number","name":"quantity","minValue":"1","maxValue":"100"}'
        />
        <span class="veli-error"></span>
      </fieldset>

      <button type="submit">Place Order</button>
    </form>

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

Example 4: Validation in JavaScript​

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

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

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const res = validationResponse["your form id"];

  if (result.status) {
    console.log("Form is valid!");
    console.log("Values:", result.values);
    // Send to server
  } else {
    console.log("Form has errors:", result.errors);
  }
});

Example 5: Configure Colors​

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

VeliConfig({
  colors: {
    error: "#dc3545",
    success: "#28a745",
    warning: "#ffc107",
    info: "#17a2b8",
  },
});

Best Practices​

  1. Always include error spans - Keep <span class="veli-error"></span> in your HTML
  2. Use data attributes - Keep validation rules in HTML for maintainability
  3. Set language early - Define data-veli-lang on your form
  4. Choose right design - Classic for traditional, floating-label for modern, IFTA for accessibility
  5. Validate on submit - Don't rely only on real-time validation
  6. Handle errors gracefully - Show user-friendly messages
  7. Test accessibility - Use screen readers with IFTA design system