kilvalidate 1.0.70 → 2.0.0

package/README.md

@@ -78,15 +78,37 @@ Example: data-kilvish-file="pdf_1_4" restricts the selection to between 1 and 4
 
 Example: // limits to 1–4 files
 
-data-kilvish-password="8_20" for min and max pass
-Usage: To use these validation attributes, simply add the appropriate data-kilvish-* attribute to the tag in your HTML form. The validation will be applied automatically based on the specified rules.
 
-Example:
 
-Phone Number (7-20 digits):
-Username (letters and numbers):
 
-Password (letters, numbers, and special chars):
+## Password
+
+### Length & composition
+- `data-kilvish-password="MIN_MAX"` – requires:
+  - at least one lowercase, one uppercase, one digit, one special character
+  - **no sequential runs** like `1234` or `abcd`
+- Example: `data-kilvish-password="8_20"` ⇒ min 8, max 20.
+
+### Eye icon (show/hide)
+An eye icon is auto-injected at the end of every password field and stays inside the input (works with/without `.input-group`).
+
+**Attributes**
+- `data-kileye-show` — behavior mode:
+  - `hold` *(default if omitted)*: press & hold to show; release/blur to hide
+  - `toggle`: click to show/hide
+  - `fix`: start visible; click to hide/show (no holding needed)
+- `data-kileye-initial` — initial visibility: `on` | `off` *(default `off`; `fix` forces visible)*
+- `data-kileye-color` — icon color (e.g., `#005555`)
+- `data-kileye-false` — disable auto eye for this field
+
+> The validator reserves right padding so text never sits under the icon, and the password meter + rules always render **below** the field.
+
+
+
+
+
+
+
 
 data-kilvish-amount // for setting amount or Price related validation
 Case 1: data-kilvish-amount="USD" Input: 2 → Auto-formats to 2.00 with cursor at 2|.00. Input: 25. → Allows further typing for decimal values, e.g., 25.5 or 25.55. Input: 25.555 → Automatically truncates to 25.55.
@@ -245,3 +267,299 @@ Author: Vasu Birla kilvishbirla@gmail.com
 
 You can include this script in your project via CDN:
 <script src="https://cdn.jsdelivr.net/npm/kilvalidate@1.0.62/kilvish.min.js"></script>
+
+
+# KilValidate (Kil Validation)
+A lightweight, drop‑in **form validation** CDN for web apps. Validates text, number, email, phone, files, amounts, dates, grouped dates, and **passwords with strength meter + eye icon**—all via **data‑attributes**. No initialization required.
+
+> **CDN (latest)**  
+> ```html
+> <script src="https://cdn.jsdelivr.net/npm/kilvalidate@1.0.62/kilvish.min.js"></script>
+> ```
+
+---
+
+## Table of Contents
+- [Why KilValidate](#why-kilvalidate)
+- [Quick Start](#quick-start)
+- [Global Behavior](#global-behavior)
+- [Validation Attributes](#validation-attributes)
+  - [Numbers](#numbers)
+  - [Alphanumeric / Characters](#alphanumeric--characters)
+  - [Files](#files)
+  - [Amounts / Currency](#amounts--currency)
+  - [Dates](#dates)
+  - [Date Group (From/To)](#date-group-fromto)
+  - [Age](#age)
+  - [Password + Eye Icon](#password--eye-icon)
+- [Notes](#notes)
+- [Author](#author)
+
+---
+
+## Why KilValidate
+- **Zero setup**: just add the CDN
+- **Declarative**: use HTML `data-kilvish-*` attributes
+- **UX friendly**: inline error slots, persistent labels/asterisks, no layout jumps
+- **Robust**: works with Bootstrap `.input-group`, Select2, and dynamic DOM
+
+---
+
+## Quick Start
+Add the CDN and then add attributes to your inputs. Raw HTML below will render as live inputs on your website.
+
+### Minimal form
+<form id="demo-minimal" style="max-width:520px;padding:12px;border:1px solid #e5e7eb;border-radius:10px">
+  <label class="form-label" for="username">Username</label>
+  <input class="form-control" id="username" name="username" data-kilvish-char="mix" required placeholder="john_doe123">
+  <br>
+  <label class="form-label" for="contact">Phone</label>
+  <input class="form-control" id="contact" name="contact" type="tel" required placeholder="+1 555 123 4567">
+  <br>
+  <label class="form-label" for="pwd">Password</label>
+  <input class="form-control" id="pwd" name="password" type="password" data-kilvish-password="12_64" data-kileye-show="toggle" data-kileye-color="#005555" required placeholder="Strong password">
+  <br>
+  <button type="submit" class="btn btn-primary">Submit</button>
+</form>
+
+---
+
+## Global Behavior
+- Required fields get a red asterisk automatically.
+- Errors render **under** the correct control (incl. `.input-group` and Select2).
+- Password **strength meter + rule list** render **below** the field.
+- Phone (`type="tel"` or `data-kilvish-tel`) avoids false positives (country code only).
+
+---
+
+## Validation Attributes
+
+### Numbers
+#### Numbers only
+- **Attribute:** `data-kilvish-num="yes"`  
+- Ensures only digits.
+
+<form style="max-width:520px">
+  <label for="numonly">Numbers Only</label>
+  <input id="numonly" class="form-control" data-kilvish-num="yes" required placeholder="123456">
+</form>
+
+#### Numbers with length limits
+- **Attribute:** `data-kilvish-num="_7_20"`  
+- Only digits, length **7–20**.
+
+<form style="max-width:520px">
+  <label for="numlen">Numbers (7–20)</label>
+  <input id="numlen" class="form-control" data-kilvish-num="_7_20" required placeholder="9876543">
+</form>
+
+---
+
+### Alphanumeric / Characters
+#### Mix (letters+numbers)
+- **Attribute:** `data-kilvish-char="mix"`
+
+<form style="max-width:520px">
+  <label for="uname">Username (letters & numbers)</label>
+  <input id="uname" class="form-control" data-kilvish-char="mix" required placeholder="john123">
+</form>
+
+#### Mix with specific specials
+- **Attribute:** `data-kilvish-char="mix_%_$"`
+
+<form style="max-width:520px">
+  <label for="mixspec">Username (allow %, _, $)</label>
+  <input id="mixspec" class="form-control" data-kilvish-char="mix_%_$" required placeholder="john_doe%">
+</form>
+
+#### Address‑friendly (space, dash, comma)
+- **Attribute:** `data-kilvish-char="mix_ ,-_”`
+
+<form style="max-width:520px">
+  <label for="addr">Address</label>
+  <input id="addr" class="form-control" data-kilvish-char="mix_ ,-_" required placeholder="221B Baker Street, London">
+</form>
+
+#### Letters only
+- **Attribute:** `data-kilvish-char="Yes"`
+
+<form style="max-width:520px">
+  <label for="fname">First Name (letters only)</label>
+  <input id="fname" class="form-control" data-kilvish-char="Yes" required placeholder="John">
+</form>
+
+#### Letters + specific specials
+- **Attribute:** `data-kilvish-char="Yes_%_$"`
+
+<form style="max-width:520px">
+  <label for="brand">Brand (letters + %,_,$)</label>
+  <input id="brand" class="form-control" data-kilvish-char="Yes_%_$" required placeholder="ACME_Pro%">
+</form>
+
+---
+
+### Files
+Use `data-kilvish-file` on `<input type="file">`.
+
+- `image` (default): images only  
+- `image_MIN_MAX`: min/max count (e.g., `image_1_3`)  
+- `doc`: PDF, Word, Excel  
+- `doc_MIN_MAX` (e.g., `doc_1_4`)  
+- `pdf`: only PDF  
+- `pdf_MIN_MAX`  
+- `mix`: images + docs  
+- `only_pdf_image`: PDFs + images  
+- `only_doc_image`: DOC‑related + images
+
+<form style="max-width:520px">
+  <label for="fileimg">Images (1–3)</label>
+  <input id="fileimg" class="form-control" type="file" data-kilvish-file="image_1_3" multiple>
+</form>
+
+<form style="max-width:520px">
+  <label for="filedoc">Documents (1–4)</label>
+  <input id="filedoc" class="form-control" type="file" data-kilvish-file="doc_1_4" multiple>
+</form>
+
+---
+
+### Amounts / Currency
+Use `data-kilvish-amount="CUR[_MIN_MAX]"`
+
+- `USD` → formats to 2 decimals (e.g., `2` → `2.00`).  
+- `USD_200_1000` → min/max enforced with inline messages.
+
+<form style="max-width:520px">
+  <label for="amt1">Amount (USD)</label>
+  <input id="amt1" class="form-control" data-kilvish-amount="USD" placeholder="25 or 25.50">
+</form>
+
+<form style="max-width:520px">
+  <label for="amt2">Amount (USD 200–1000)</label>
+  <input id="amt2" class="form-control" data-kilvish-amount="USD_200_1000" placeholder="250">
+</form>
+
+---
+
+### Dates
+Attach `data-kilvish-date` to `<input type="date">` or `<input type="month">`.
+
+- Age window: `_18_60` (between 18 and 60)
+- **Future**: `future`, `today_future`, `30_days_future`, `2_years_future`, `2_years_after`
+- **Past**: `past`, `10_years_past`, `2_years_before`
+- **Ranges**: `Between_2000_2010`, `from_2023`, `till_2025`
+- **Specific**: `not_today`, `weekday`, `weekend`, `first_of_month`, `last_of_month`, `exact_21`
+
+<form style="max-width:520px">
+  <label for="dob">DOB (18–60)</label>
+  <input id="dob" class="form-control" type="date" data-kilvish-date="_18_60" required>
+</form>
+
+<form style="max-width:520px">
+  <label for="future">Future date (next 30 days)</label>
+  <input id="future" class="form-control" type="date" data-kilvish-date="30_days_future">
+</form>
+
+<form style="max-width:520px">
+  <label for="wk">Weekday only</label>
+  <input id="wk" class="form-control" type="date" data-kilvish-date="weekday">
+</form>
+
+> `leap_year` & combined multi‑conditions like `future_weekday` are **reserved** / not implemented yet.
+
+---
+
+### Date Group (From/To)
+Link two fields so **From ≤ To** (or months).
+
+- **Format:** `data-kilvish-dategroup="EMP_1"` and `data-kilvish-dategroup="EMP_2"`  
+- Optional labels: `data-kilvish-date_name="From"` / `"To"`
+
+<form style="max-width:520px">
+  <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
+    <div>
+      <label for="empFrom">Employment From</label>
+      <input id="empFrom" class="form-control" type="month" data-kilvish-dategroup="EMP_1" data-kilvish-date_name="From" required>
+    </div>
+    <div>
+      <label for="empTo">Employment To</label>
+      <input id="empTo" class="form-control" type="month" data-kilvish-dategroup="EMP_2" data-kilvish-date_name="To" required>
+    </div>
+  </div>
+</form>
+
+---
+
+### Age
+Validate a plain age number.
+
+- **Attribute:** `data-kilvish-age="value"` → exact age  
+- **Attribute:** `data-kilvish-age="min_max"` → range
+
+<form style="max-width:520px">
+  <label for="ageExact">Exact age 18</label>
+  <input id="ageExact" class="form-control" name="age" data-kilvish-age="18" placeholder="18">
+</form>
+
+<form style="max-width:520px">
+  <label for="ageRange">Age 18–60</label>
+  <input id="ageRange" class="form-control" name="age" data-kilvish-age="18_60" placeholder="e.g., 25">
+</form>
+
+---
+
+## Password + Eye Icon
+
+### Length & composition
+- `data-kilvish-password="MIN_MAX"` – requires:
+  - at least one lowercase, one uppercase, one digit, one special character
+  - **no sequential runs** like `1234` or `abcd`
+- Example: `data-kilvish-password="8_20"` ⇒ min 8, max 20.
+
+### Eye icon (show/hide)
+An eye icon is auto-injected at the end of every password field and stays inside the input (works with/without `.input-group`).
+
+**Attributes**
+- `data-kileye-show` — behavior:
+  - `hold` *(default if omitted)*: press & hold to show; release/blur to hide
+  - `toggle`: click to show/hide
+  - `fix`: start visible; click to hide/show (no holding needed)
+- `data-kileye-initial` — `on` | `off` *(default `off`; `fix` forces visible)*
+- `data-kileye-color` — icon color (e.g., `#005555`)
+- `data-kileye-false` — disable auto eye for this field
+
+<form style="max-width:520px">
+  <label for="pass1">Password (toggle eye)</label>
+  <input id="pass1" class="form-control" type="password" data-kilvish-password="12_64" data-kileye-show="toggle" data-kileye-color="#005555" placeholder="Strong password">
+</form>
+
+<form style="max-width:520px">
+  <label for="pass2">Password (fixed visible)</label>
+  <input id="pass2" class="form-control" type="password" data-kilvish-password="12_64" data-kileye-show="fix" placeholder="Visible until you click eye">
+</form>
+
+<form style="max-width:520px">
+  <label for="pass3">Confirm Password (hold)</label>
+  <div class="input-group">
+    <span class="input-group-text"><i class="ti ti-key"></i></span>
+    <input id="pass3" class="form-control" type="password" data-kilvish-password="8_20" placeholder="Re-enter password">
+  </div>
+</form>
+
+> The password strength meter and rule list render **below** the field and update in real time.
+
+---
+
+## Notes
+- Works with plain HTML or frameworks (EJS/Blade/etc.).
+- Error slots are **persistent nodes** (no layout shift).  
+- Add `data-ignore-kilvish="Yes"` to opt a field out of realtime checks.
+- Required stars are normalized & auto‑deduped.
+
+---
+
+## Author
+**Vasu Birla (Kilvish)**  
+<kilvishbirla@gmail.com>
+
+

package/README_NEXTJS.md

@@ -0,0 +1,68 @@
+# KilValidate for Next.js (Client Only)
+
+KilValidate is a DOM-based validator. It must run in the browser and is intended for client components. It does not use React state or form libraries internally; it reads and writes the DOM (error nodes, borders, etc.).
+
+## Install
+
+```bash
+npm i kilvalidate
+```
+
+## Quick Start (App Router)
+
+```js
+'use client';
+import React from 'react';
+import { useKilvalidate } from 'kilvalidate/kilnextvalidation-react';
+
+export default function Page() {
+  useKilvalidate();
+
+  return (
+    <form id="signup">
+      <input name="firstname" required />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+## Quick Start (Pages Router)
+
+```js
+import React, { useRef } from 'react';
+import { useKilvalidate } from 'kilvalidate/kilnextvalidation-react';
+
+export default function Page() {
+  const formRef = useRef(null);
+  useKilvalidate({ form: formRef });
+
+  return (
+    <form id="signup" ref={formRef}>
+      <input name="firstname" required />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+## React Form Libraries
+
+KilValidate can be used alongside form libraries, but it will not update React state. You can run it inside your submit handler to block submit:
+
+```js
+import kilvalidate from 'kilvalidate';
+
+function onSubmit(e) {
+  if (!kilvalidate.validateForm('#signup', e)) return;
+  // proceed with your submit
+}
+```
+
+If you need fully state-driven validation (errors as JS objects), the validator would need to be refactored to return structured error data instead of writing to the DOM. I can add that as a separate module if you want.
+
+## Notes
+
+- Use only in client components.
+- It injects CSS and writes error elements directly to the DOM.
+- You can opt out per field with `data-ignore-kilvish`.

package/kilnextvalidation-react.js

@@ -0,0 +1,42 @@
+'use client';
+
+const React = require('react');
+const { useEffect } = React;
+const kilvalidateModule = require('./kilnextvalidation.js');
+
+function getKilvalidate() {
+  return kilvalidateModule && kilvalidateModule.default ? kilvalidateModule.default : kilvalidateModule;
+}
+
+function resolveFormTarget(target) {
+  if (!target) return null;
+  if (target.current) return target.current;
+  return target;
+}
+
+function useKilvalidate(options = {}) {
+  const { form, auto = true } = options;
+
+  useEffect(() => {
+    if (!auto) return;
+    if (typeof window === 'undefined') return;
+    const api = getKilvalidate();
+    if (!api) return;
+
+    const formTarget = resolveFormTarget(form);
+    if (formTarget) {
+      api.addRealTimeValidation(formTarget);
+      api.attachInputEvents();
+      api.addAsteriskToRequiredFields();
+      api.addValidateFormToSubmitButtons();
+      api.initPasswordStrengthMeter();
+    } else {
+      api.init();
+    }
+  }, [form, auto]);
+}
+
+module.exports = {
+  useKilvalidate,
+  getKilvalidate
+};