Field Types & Attributes

Veli v1.0.0 supports 6 field types with comprehensive validation options. Each field type is defined via the data-veli-rules attribute.

---

1. Text Field

Validates text input with character and word count constraints.

Attributes:

• type (required): "text"
• name (required): unique field identifier
• minChar: minimum characters
• maxChar: maximum characters
• minWord: minimum words
• maxWord: maximum words
• case: "upper", "lower", or "both"
• specialChar: require special characters (boolean)
• pattern: custom regex pattern

Example:

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

---

2. Password Field

Validates passwords with security level constraints.

Attributes:

• type (required): "password"
• name (required): unique field identifier
• securityLevel: "s1", "s2", "s3", or "s4"
  • s1: Very weak - no requirements
  • s2: Weak - minimum length
  • s3: Good - uppercase + numbers + length
  • s4: Strong - uppercase + lowercase + numbers + special chars
• confirmWith: name of password confirmation field
• minLen: minimum length
• maxLen: maximum length
• minNumCount: minimum digits required
• minLowercaseAlphabetCount: minimum lowercase letters
• minUppercaseAlphabetCount: minimum uppercase letters
• minSpecialCharCount: minimum special characters
• maxCharRepeat: max consecutive repeating characters
• sequentialPatternCount: max sequential chars (e.g., "abc")
• pattern: custom regex pattern

Example:

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

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

---

3. Email Field

Validates email addresses with provider-specific checks.

Attributes:

• type (required): "email"
• name (required): unique field identifier
• provider: "any", "gmail", "outlook", or "yahoo"

Example:

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

---

4. Phone Field (Tel)

Validates international phone numbers.

Attributes:

• type (required): "tel"
• name (required): unique field identifier
• country: Country name (see supported countries list below)

Supported Countries:

• any
• cameroon
• ghana
• nigeria
• southafrica
• uganda
• zimbabwe
• kenya
• tanzania
• egypt
• algeria
• morocco
• ivorycoast
• ethiopia
• angola
• senegal
• zambia
• malawi
• rwanda
• botswana
• namibia

Example:

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

---

5. Number Field

Validates numeric input with comprehensive constraints and number classification.

Attributes:

• type (required): "number"
• name (required): unique field identifier
• min: minimum value allowed
• max: maximum value allowed
• range: allowed range in format "min,max" (e.g., "1,100")
• multipleOf: number must be a multiple of this value (e.g., "5" means 5, 10, 15, etc.)
• factorOf: input number must be a factor of this value (e.g., "12" means input can be 1, 2, 3, 4, 6, 12)
• numType: number type validation - "integer", "decimal", or "real"
• numClass: number classification - "even", "odd", or "prime"
• fancyNum: special number types - "perfectsquare" (e.g., 1, 4, 9, 16, 25)
• pattern: custom regex pattern

Number Type Examples:

• integer: Only whole numbers (1, 5, 100, -5, etc.)
• decimal: Only decimal numbers (1.5, 3.14, -2.5, etc.) - no whole numbers
• real: Any number including integers and decimals

Number Class Examples:

• even: Numbers divisible by 2 (2, 4, 6, 8, etc.)
• odd: Numbers not divisible by 2 (1, 3, 5, 7, etc.)
• prime: Prime numbers (2, 3, 5, 7, 11, 13, etc.)

Examples:

<!-- Simple min/max -->
<div class="veli-field-wrapper">
  <label>Age</label>
  <input
    type="number"
    name="age"
    data-veli-rules='{"type":"number","name":"age","min":"18","max":"120"}'
    placeholder="Enter your age"
  />
  <span class="veli-error"></span>
</div>

<!-- Range validation -->
<div class="veli-field-wrapper">
  <label>Test Score</label>
  <input
    type="number"
    name="score"
    data-veli-rules='{"type":"number","name":"score","range":"0,100"}'
    placeholder="Score between 0-100"
  />
  <span class="veli-error"></span>
</div>

<!-- Multiple of value -->
<div class="veli-field-wrapper">
  <label>Quantity (must be multiple of 5)</label>
  <input
    type="number"
    name="quantity"
    data-veli-rules='{"type":"number","name":"quantity","multipleOf":"5"}'
    placeholder="5, 10, 15, etc."
  />
  <span class="veli-error"></span>
</div>

<!-- Integer only -->
<div class="veli-field-wrapper">
  <label>Number of Items</label>
  <input
    type="number"
    name="items"
    data-veli-rules='{"type":"number","name":"items","numType":"integer"}'
    placeholder="Enter a whole number"
  />
  <span class="veli-error"></span>
</div>

<!-- Even number -->
<div class="veli-field-wrapper">
  <label>Even Number</label>
  <input
    type="number"
    name="evenNum"
    data-veli-rules='{"type":"number","name":"evenNum","numClass":"even"}'
    placeholder="2, 4, 6, 8, etc."
  />
  <span class="veli-error"></span>
</div>

<!-- Prime number -->
<div class="veli-field-wrapper">
  <label>Prime Number</label>
  <input
    type="number"
    name="primeNum"
    data-veli-rules='{"type":"number","name":"primeNum","numClass":"prime"}'
    placeholder="2, 3, 5, 7, 11, etc."
  />
  <span class="veli-error"></span>
</div>

<!-- Perfect square -->
<div class="veli-field-wrapper">
  <label>Perfect Square</label>
  <input
    type="number"
    name="square"
    data-veli-rules='{"type":"number","name":"square","fancyNum":"perfectsquare"}'
    placeholder="1, 4, 9, 16, 25, etc."
  />
  <span class="veli-error"></span>
</div>

<!-- Factor of value -->
<div class="veli-field-wrapper">
  <label>Factor of 12</label>
  <input
    type="number"
    name="factor"
    data-veli-rules='{"type":"number","name":"factor","factorOf":"12"}'
    placeholder="1, 2, 3, 4, 6, or 12"
  />
  <span class="veli-error"></span>
</div>

<!-- Multiple validations -->
<div class="veli-field-wrapper">
  <label>Integer between 10 and 50</label>
  <input
    type="number"
    name="limitedInt"
    data-veli-rules='{"type":"number","name":"limitedInt","range":"10,50","numType":"integer"}'
    placeholder="10 to 50"
  />
  <span class="veli-error"></span>
</div>

---

6. Checkbox Field

Validates checkbox inputs for agreements, terms, conditional field linking, and grouping multiple checkboxes with custom value handling.

Attributes:

• type (required): "checkbox"
• name (required): unique field identifier
• required: checkbox must be checked (boolean)
• checkedValue(required): value when checkbox is checked
• unCheckedValue(required): value when checkbox is unchecked
• linkTo (optional): format "fieldName,relationship" - Link checkbox to another field with specific behavior
• groupName (required when creating a group)
• groupMembers (optional): comma-separated list of checkbox names to group together
• maxSelect (optional): maximum number of checkboxes that can be selected in a group
• defaultSelect (optional): comma-separated list of checkbox names that are pre-selected and locked

LinkTo Relationships

The linkTo attribute supports the following relationships:

• enableToggle: Enables/disables the target field based on checkbox state (checked = enabled, unchecked = disabled)
• reset: Resets the target field to its original value when checkbox is toggled
• clear: Clears the target field value when checkbox is toggled
• passwordShowToggle: Toggles the target password field visibility (checked = show as text, unchecked = hide as password)

Example - Basic:

<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 and conditions </label>
  <span class="veli-error"></span>
</div>

Example - With Custom Values:

<div class="veli-field-wrapper">
  <input
    type="checkbox"
    name="newsletter"
    data-veli-rules='{"type":"checkbox","name":"newsletter","checkedValue":"subscribed","unCheckedValue":"unsubscribed"}'
  />
  <label> Subscribe to newsletter </label>
  <span class="veli-error"></span>
</div>

Example - With Field Linking (Password Show/Hide):

<!-- Show password toggle -->
<div class="veli-field-wrapper">
  <input
    type="checkbox"
    name="showPassword"
    data-veli-rules='{"type":"checkbox","name":"showPassword","linkTo":"password,passwordShowToggle"}'
  />
  <label> Show password </label>
</div>

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

Example - With Field Linking (Enable/Disable):

<!-- Checkbox to enable delivery address input -->
<div class="veli-field-wrapper">
  <input
    type="checkbox"
    name="shippingAddress"
    data-veli-rules='{"type":"checkbox","name":"shippingAddress","linkTo":"addressField,enableToggle"}'
  />
  <label> Enter different shipping address </label>
</div>

<!-- Address field (initially disabled) -->
<div class="veli-field-wrapper">
  <label>Shipping Address</label>
  <input
    type="text"
    name="addressField"
    disabled
    data-veli-rules='{"type":"text","name":"addressField","minChar":"5"}'
  />
  <span class="veli-error"></span>
</div>

Example - Multiple Checkboxes (Grouped):

<!-- Checkbox group: Select 1-3 interests (with 'reading' pre-selected) -->
<fieldset>
  <legend>Select your interests (max 3):</legend>

  <div class="veli-field-wrapper">
    <input
      type="checkbox"
      name="reading"
      data-veli-rules='{"type":"checkbox","name":"reading", "groupName":"interest", "groupMembers":"reading,sports,music,art","maxSelect":"3","defaultSelect":"reading",  "checkedValue":"reading", "unCheckedValue":"off"}'
    />
    <label> Reading </label>
  </div>

  <div class="veli-field-wrapper">
    <input
      type="checkbox"
      name="sports"
      data-veli-rules='{"type":"checkbox","name":"sports",  "checkedValue":"sports", "unCheckedValue":"off"}'
    />
    <label> Sports </label>
  </div>

  <div class="veli-field-wrapper">
    <input
      type="checkbox"
      name="music"
      data-veli-rules='{"type":"checkbox","name":"music",  "checkedValue":"music", "unCheckedValue":"off"}'
    />
    <label> Music </label>
  </div>

  <div class="veli-field-wrapper">
    <input
      type="checkbox"
      name="art"
      data-veli-rules='{"type":"checkbox","name":"art",  "checkedValue":"art", "unCheckedValue":"off"}'
    />
    <label> Art </label>
  </div>
</fieldset>

Checkbox Value Handling:

• When checked: sends checkedValue
• When unchecked: sends unCheckedValue
• Useful for conditional forms and show/hide functionality
• Group validation respects maxSelect and defaultSelect constraints

---

Common Attributes

All field types support:

• type (required): Field type identifier
• name (required): Unique field name

---

Custom Error Messages

By default, Veli provides built-in error messages in English and French. You can override any error message by appending your custom message to a rule value using the @@ separator.

Format: "attribute":"value@@CustomErrorMessage"

Example - Single Override:

{
  "type": "text",
  "name": "username",
  "minChar": "3@@Username must be at least 3 characters",
  "maxChar": "20@@Username cannot exceed 20 characters"
}

HTML Example:

<div class="veli-field-wrapper">
  <label>Full Name</label>
  <input
    type="text"
    name="fullname"
    data-veli-rules='{"type":"text","name":"fullname","minChar":"2@@Please enter at least 2 characters","maxChar":"50@@Name too long"}'
    placeholder="Enter your full name"
  />
  <span class="veli-error"></span>
</div>

Password Example with Custom Messages:

<div class="veli-field-wrapper">
  <label>Password</label>
  <input
    type="password"
    name="password"
    data-veli-rules='{"type":"password","name":"password","minLen":"8@@Password must be at least 8 characters","securityLevel":"s4@@Password must contain uppercase, lowercase, numbers, and special characters"}'
    placeholder="Enter password"
  />
  <span class="veli-error"></span>
</div>

Email Example:

<div class="veli-field-wrapper">
  <label>Email</label>
  <input
    type="email"
    name="email"
    data-veli-rules='{"type":"email","name":"email","provider":"gmail@@Please use a Gmail address"}'
    placeholder="your@gmail.com"
  />
  <span class="veli-error"></span>
</div>

Multiple Rules with Custom Messages:

{
  "type": "tel",
  "name": "phone",
  "country": "cameroon@@Please enter a valid Cameroon phone number",
  "required": "true@@Phone number is required"
}

---

Error Handling

When validation fails, error messages automatically appear in the <span class="veli-error"></span> element. Messages are localized based on the language setting.

• Built-in messages are provided in English ('en') and French ('fr')
• Custom messages override built-in messages when specified using the @@ separator
• Error display is automatic when validation fails