kilvalidate 1.0.71 → 3.0.0

package/kilnextvalidation.js

@@ -0,0 +1,1736 @@
+/*! kilvalidate | Author: Kilvish (Vasu Birla) | MIT */
+(function (root, factory) {
+  if (typeof module === 'object' && module.exports) {
+    module.exports = factory(root);
+  } else if (typeof define === 'function' && define.amd) {
+    define(function () { return factory(root); });
+  } else if (root) {
+    root.kilvalidate = factory(root);
+  }
+})(typeof window !== 'undefined' ? window : (typeof globalThis !== 'undefined' ? globalThis : undefined), function (window) {
+  if (!window || !window.document) {
+    const noop = () => {};
+    const noopFalse = () => false;
+    return {
+      validateRequiredFields: noopFalse,
+      addRealTimeValidation: noop,
+      validateForm: noopFalse,
+      addAsteriskToRequiredFields: noop,
+      attachInputEvents: noop,
+      addValidateFormToSubmitButtons: noop,
+      validateKilvishInput: noop,
+      addErrorMessage: noop,
+      init: noop,
+      initPasswordStrengthMeter: noop
+    };
+  }
+
+  const document = window.document;
+
+  //==================== Comman Kilvalidation start =====================
+
+
+// Minimal CSS once (prevents layout jump + smooth reveal)
+(function kilErrCSS(){
+  if (document.getElementById('kil-error-style')) return;
+  const style = document.createElement('style');
+  style.id = 'kil-error-style';
+  style.textContent = `
+    .error-message {
+      display:block;
+      min-height:16px;         /* reserves space even when empty */
+      margin-top:4px;
+      font-size:12px;
+      color:#d32f2f;
+      line-height:1.25;
+      opacity:1;
+      transition: opacity .12s ease;
+    }
+    .error-message.is-hidden{ opacity:0; }
+  `;
+  document.head.appendChild(style);
+})();
+
+// Safe key for IDs/data-attrs
+const _escKey = s => String(s || '').replace(/[^a-zA-Z0-9_\-]/g, '_');
+const _cssEscape = s => {
+  if (window.CSS && typeof window.CSS.escape === 'function') return window.CSS.escape(String(s));
+  return String(s).replace(/["\\]/g, '\\$&');
+};
+
+function resolveForm(kil) {
+  if (!kil) return null;
+  if (kil.tagName && String(kil.tagName).toUpperCase() === 'FORM') return kil;
+  if (typeof kil === 'string') {
+    const isSelector = /^[#.\[]/.test(kil) || kil.includes(' ') || kil.includes('[');
+    if (isSelector) return document.querySelector(kil);
+    return document.getElementById(kil) || document.querySelector(kil);
+  }
+  if (kil.querySelector) return kil;
+  return null;
+}
+
+// Find the visual anchor where the message should appear
+function getErrorAnchor(target) {
+  // If an input/select/textarea is passed, work from it; if a container is passed,
+  // use the last field inside as the anchor (fallback to container itself).
+  let field = null;
+
+  if (target && target.tagName && /^(INPUT|SELECT|TEXTAREA)$/.test(target.tagName)) {
+    field = target;
+  } else if (target && target.querySelector) {
+    const fields = target.querySelectorAll('input,select,textarea');
+    field = fields.length ? fields[fields.length - 1] : null;
+  }
+
+  // if we still don't have a field, use the target itself
+  if (!field) return { anchor: target, mode: 'beforeend', key: 'container' };
+
+  // select2: show under the rendered container, not the <select>
+  const sib = field.nextElementSibling;
+  if (field.tagName === 'SELECT' && sib && (sib.classList.contains('select2') || sib.classList.contains('select2-container'))) {
+    return { anchor: sib, mode: 'afterend', key: field.name || field.id || 'select' };
+  }
+
+  // bootstrap input-group: show under the group wrapper
+  if (field.parentElement && field.parentElement.classList.contains('input-group')) {
+    return { anchor: field.parentElement, mode: 'afterend', key: field.name || field.id || 'inputgroup' };
+  }
+
+  // default: directly under the field
+  return { anchor: field, mode: 'afterend', key: field.name || field.id || 'field' };
+}
+
+// Create (once) or reuse a persistent error node right under the anchor
+function getOrCreateErrorNode(form, anchor, mode, key) {
+  const id = `kil_err_${_escKey(key)}`;
+
+  // Try to find existing
+  let node = form.querySelector(`#${id}`);
+  if (!node) {
+    node = document.createElement('div');
+    node.id = id;
+    node.className = 'error-message is-hidden';
+    if (mode === 'beforeend') {
+      anchor.insertAdjacentElement('beforeend', node);
+    } else {
+      anchor.insertAdjacentElement('afterend', node);
+    }
+  }
+  return node;
+}
+
+
+
+
+(function kilReqCSS(){
+  if (document.getElementById('kil-req-style')) return;
+  const style = document.createElement('style');
+  style.id = 'kil-req-style';
+  style.textContent = `
+    .kil-required-star{ color:#d32f2f; margin-left:2px; }
+    .error-message{ display:block; min-height:16px; margin-top:4px; font-size:12px; color:#d32f2f; line-height:1.25; opacity:1; transition:opacity .12s ease; }
+    .error-message.is-hidden{ opacity:0; }
+  `;
+  document.head.appendChild(style);
+})()
+
+// ----- label resolution: prefer "for=[id]" then fallback to name, fieldset > legend, or closest label wrapper -----
+function findLabelFor(input){
+  if (!input) return null;
+  const form = input.form || document;
+  let label = null;
+
+  if (input.id) label = form.querySelector(`label[for="${_cssEscape(input.id)}"]`);
+  if (!label && input.name) label = form.querySelector(`label[for="${_cssEscape(input.name)}"]`); // your legacy pattern
+  if (!label) {
+    // label wrapping input
+    label = input.closest('label');
+  }
+  if (!label) {
+    // fieldset legend (radios/checkbox groups)
+    const fs = input.closest('fieldset');
+    if (fs) label = fs.querySelector('legend');
+  }
+  return label;
+}
+
+// ----- star helpers -----
+function ensureStarVisibleFor(input){
+  const label = findLabelFor(input);
+  if (!label) return;
+
+  let star = label.querySelector('.kil-required-star');
+  if (!star) {
+    star = document.createElement('span');
+    star.className = 'kil-required-star';
+    star.textContent = ' *';
+    label.appendChild(star);
+  }
+  star.style.visibility = 'visible';
+}
+
+function hideStarFor(input){
+  const label = findLabelFor(input);
+  if (!label) return;
+  const star = label.querySelector('.kil-required-star');
+  if (star) star.style.visibility = 'hidden';
+}
+
+
+  // 👉 helper: decide if a TEL (kiltel) field is effectively empty
+  function isKiltelEmpty(telInput) {
+    // try the sibling hidden “contact” (most reliable if your kiltel populates it)
+    const wrap = telInput.closest('.kiltel-phone-wrap') || telInput.parentElement;
+    const hiddenContact = wrap && (wrap.querySelector('input[name="contact"]') || wrap.querySelector('#contact'));
+    if (hiddenContact) {
+      const digits = (hiddenContact.value || '').replace(/\D/g, '');
+      return digits.length < 7; // treat <7 digits as “no real number”
+    }
+
+    // fallback: inspect the tel input itself
+    const raw = (telInput.value || '').trim().replace(/\s|-/g, '');
+    if (!raw) return true;
+    if (/^\+?$/.test(raw)) return true;            // only plus
+    if (/^\+?\d{1,4}$/.test(raw)) return true;     // looks like only country code
+    const totalDigits = raw.replace(/\D/g, '').length;
+    return totalDigits < 7;                         // not enough digits to be a number
+  }
+
+
+function validateRequiredFields(kil) {
+
+    const form = resolveForm(kil);
+    if (!form) {
+        console.warn('Form not found for validation:', kil);
+        return false;
+    }
+
+    const inputs = form.querySelectorAll('input[required], select[required], textarea[required]'); // Get only required inputs
+    const radioGroups = form.querySelectorAll('fieldset.radios');
+
+
+    const radios = form.querySelectorAll('input[type="radio"]');
+
+    // const checkboxes = form.querySelectorAll('input[type="checkbox"][required]'); 
+
+
+    // Validate checkboxes with the same name (at least one should be checked)
+
+    const checkboxGroups = {};
+    const requiredCheckboxes = new Set();
+    form.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+        const name = checkbox.name;
+        if (!checkboxGroups[name]) {
+            checkboxGroups[name] = [];
+        }
+        checkboxGroups[name].push(checkbox);
+
+        if (checkbox.hasAttribute('required')) {
+            requiredCheckboxes.add(name);
+        }
+    });
+
+    const select2 = form.querySelectorAll('.select2');
+
+
+    let isValid = true;
+    let kilerror = 'This Field is Required.'
+
+
+
+    // Remove previous error messages and borders
+        // Old -> form.querySelectorAll('.error-message').forEach(errorMsg => errorMsg.remove());
+
+        // NEW (keep slots, just hide/clear)
+            form.querySelectorAll('.error-message').forEach(node => {
+            node.textContent = '';
+            node.classList.add('is-hidden'); // keep space, fade out
+            });
+    inputs.forEach(input => {
+
+        input.style.border = ''; // Reset borders
+    });
+
+    inputs.forEach(input => {
+
+            const inputGroup = input.closest('.form-group') || input.parentNode;
+
+            const inputGroup1 = input.parentNode; 
+
+        if (input.type == 'date') {
+
+
+            kilerror = "Please Select Date";
+            // Reset error message and border before validating
+            input.style.border = ''; // Reset border
+            const dateValue = input.value.trim();
+
+            if (!dateValue) {
+                isValid = false;
+                input.style.border = '1px solid red'; // Highlight empty date field
+                addErrorMessage(inputGroup, kilerror); // Add error message for empty date
+            } else {
+                // Additional date-specific validation logic can go here
+            }
+
+            // kilerror = "Please Select Date"
+            // input.style.border = '1px solid red';
+
+
+
+        } else if (input.name == 'comments') {
+
+            kilerror = 'Please Enter Comments'
+        } else if (input.type == 'email') {
+
+            kilerror = 'Please Enter Email'
+        } else if (input.type == 'password') {
+
+            kilerror = 'Please Enter Password'
+        } else {
+            kilerror = 'This Field is Required.'
+        }
+
+        const inputname = input.getAttribute('data-kilvish-name');
+        kilerror = `${inputname || 'This'} Field is Required.`;
+
+
+
+            // ---------- REQUIRED CHECK (with kiltel awareness) ----------
+    let isEmpty;
+    if (input.type === 'tel' || input.hasAttribute('data-kilvish-tel')) {
+     
+      isEmpty = isKiltelEmpty(input);
+      if (isEmpty) {
+        kilerror = `${inputname || 'Phone'} is required (enter full number, not just country code).`;
+      }
+    } 
+    // else {
+    //   isEmpty = !(input.value || '').trim();
+    // }
+
+    if (isEmpty) {
+      isValid = false;
+      input.style.border = '1px solid red';
+      // pass the INPUT itself so your addErrorMessage anchors under the field;
+      // it will auto-adjust to .input-group when present.
+      addErrorMessage(input, kilerror);
+      return; // continue next input
+    }
+
+    // ---------- REQUIRED CHECK (with kiltel awareness) ----------     
+
+
+        if (!input.value.trim()) {  // If the required field is empty      
+            isValid = false;
+            input.style.border = '1px solid red'; // Set border to red for empty required fields
+            addErrorMessage(inputGroup, kilerror); // Add error message
+
+            //addErrorMessage(inputGroup, kilerror);
+        }
+    });
+
+
+
+
+    //--------- For Radio button validation ----------
+    if (radios.length > 0) {
+
+
+        const radioGroups = {}; // Store radio button groups
+
+
+        radios.forEach(radio => {
+            const group = radio.name; // Group by name attribute
+            if (!radioGroups[group]) {
+                //  radioGroups[group] = { isSelected: false, groupElement: radio.closest('.form-check') || radio.closest('.radios') || radio.closest('.col-md-6') };
+                radioGroups[group] = {
+                    isSelected: false,
+                    groupElement: radio.closest('.form-group') || radio.closest('.mb-3') ||
+                        radio.closest('.form-check') ||
+                        radio.closest('.radios') ||
+                        radio.closest('.col-md-6')
+                };
+            }
+
+            if (radio.checked) {
+                radioGroups[group].isSelected = true;
+            }
+        });
+
+        // Check if each radio group has at least one selection
+        Object.entries(radioGroups).forEach(([group, data]) => {
+            if (!data.isSelected) {
+                isValid = false;
+                const message = "Please select one option.";
+
+                // Check if data.groupElement is valid
+                if (!data.groupElement) {
+                    console.error("Invalid group element for radio group:", group);
+                    return;  // Skip this iteration if the parent is not found
+                }
+
+                // Proceed to add error message if the parent exists
+                addErrorMessage(data.groupElement, message);
+            }
+        });
+
+
+
+
+    }
+
+
+
+
+
+
+    //-------- for radio buttons checks only 
+
+    //-------- For Multiple checkboxes without puttin require 
+
+
+    Object.keys(checkboxGroups).forEach(name => {
+        const checkboxes = checkboxGroups[name];
+
+            // Skip validation if any checkbox in the group has data-ignore-kilvish attribute
+                const shouldIgnoreGroup = checkboxes.some(checkbox => checkbox.hasAttribute('data-ignore-kilvish'));
+                if (shouldIgnoreGroup) return;
+
+        const isChecked = checkboxes.some(checkbox => checkbox.checked);
+
+        if (!isChecked) {
+            isValid = false;
+            const message = requiredCheckboxes.has(name)
+                ? "Please check this box to proceed"
+                : "Please select at least one option.";
+
+            // const parentElement = checkboxes[0].closest('.mb-3') || form.querySelector(`input[name="${name}"]`)?.closest('.mb-3') || form;
+
+            // Use the closest('.form-check') for checkboxes to match previous behavior
+
+            // Find the closest parent container that holds the checkbox
+            const parentElement = checkboxes[0].closest('.form-group') || checkboxes[0].closest('.form-check') || checkboxes[0].closest('.checkbox-container') || checkboxes[0].closest('.some-other-container');
+            addErrorMessage(parentElement, message);
+
+            // addErrorMessage(checkboxes[0].closest('.form-check'), message);
+        }
+    });
+
+
+
+
+    // Validate checkboxes in select2 dropdown or similar groups
+    //    select2.forEach(dropdown => {
+    //      const checkboxesInDropdown = dropdown.querySelectorAll('input[type="checkbox"]:checked');
+    //      const isValidCheckboxSelected = checkboxesInDropdown.length > 0;
+
+    //      if (!isValidCheckboxSelected) {
+    //          isValid = false;
+    //          addErrorMessage(dropdown.closest('.form-group'), "Please select at least one option");
+    //      }
+    //  });
+
+
+    //============   select2  checkboxes ========================
+
+    return isValid;
+}
+
+
+
+function addRealTimeValidation(kil) {
+    const form = resolveForm(kil);
+    if (!form) return;
+    const inputs = form.querySelectorAll('input[required], select[required], textarea[required]');
+
+    const updateAsterisk = (input, add = true) => {
+        if (add) ensureStarVisibleFor(input);
+        else hideStarFor(input);
+    };
+
+
+    function removeError(input) {
+  const form = input.form || input.closest('form');
+  if (!form) return;
+
+  // resolve the same anchor key
+  const sib = input.nextElementSibling;
+  let anchor = input, mode = 'afterend', key = input.name || input.id || 'field';
+  if (input.tagName === 'SELECT' && sib && (sib.classList.contains('select2') || sib.classList.contains('select2-container'))) {
+    anchor = sib; mode = 'afterend'; key = input.name || input.id || 'select';
+  } else if (input.parentElement && input.parentElement.classList.contains('input-group')) {
+    anchor = input.parentElement; mode = 'afterend'; key = input.name || input.id || 'inputgroup';
+  }
+
+  const node = form.querySelector(`#kil_err_${String(key).replace(/[^a-zA-Z0-9_\-]/g,'_')}`);
+  if (node) {
+    node.textContent = '';
+    node.classList.add('is-hidden');
+  }
+  input.style.border = '';
+
+  // Hide star when valid (toggle look). If you prefer to always keep stars, comment this line.
+  hideStarFor(input);
+}
+
+
+
+
+    // Handle standard required input/textarea/select fields
+    inputs.forEach(input => {
+        if (input.dataset.kilRealtimeBound === '1') return;
+        const validate = () => {
+            if (input.value.trim()) {
+                removeError(input);
+                updateAsterisk(input, false);
+            } else {
+                updateAsterisk(input, true);
+            }
+        };
+
+        input.addEventListener('input', validate);
+        input.addEventListener('change', validate);
+        input.dataset.kilRealtimeBound = '1';
+    });
+
+    // Handle radio groups
+    const radios = form.querySelectorAll('input[type="radio"]');
+    const radioNames = [...new Set(Array.from(radios).map(r => r.name))];
+
+    radioNames.forEach(name => {
+        const group = form.querySelectorAll(`input[type="radio"][name="${name}"]`);
+        group.forEach(radio => {
+            if (radio.dataset.kilRadioBound === '1') return;
+            radio.addEventListener('change', () => {
+                const isChecked = Array.from(group).some(r => r.checked);
+                if (isChecked) {
+                    removeError(radio);
+                }
+            });
+            radio.dataset.kilRadioBound = '1';
+        });
+    });
+
+    // Handle checkbox groups
+    const checkboxes = form.querySelectorAll('input[type="checkbox"]');
+    const checkboxNames = [...new Set(Array.from(checkboxes).map(c => c.name))];
+
+    checkboxNames.forEach(name => {
+        const group = form.querySelectorAll(`input[type="checkbox"][name="${name}"]`);
+        group.forEach(checkbox => {
+            if (checkbox.dataset.kilCheckboxBound === '1') return;
+            checkbox.addEventListener('change', () => {
+                const isChecked = Array.from(group).some(c => c.checked);
+                if (isChecked) {
+                    removeError(checkbox);
+                }
+            });
+            checkbox.dataset.kilCheckboxBound = '1';
+        });
+    });
+}
+
+
+
+
+// Combined validation function
+function validateForm(kil, evt) {
+    const ok = validateRequiredFields(kil);
+    if (!ok) {
+        const e = evt || window.event;
+        if (e && e.preventDefault) e.preventDefault();
+    }
+    return ok;
+}
+
+
+
+
+function normalizeRequiredStars(scope=document) {
+  scope.querySelectorAll('label, legend').forEach(label => {
+    // remove legacy inline red-star spans or bare * text nodes
+    label.querySelectorAll('span').forEach(s => {
+      if (!s.classList.contains('kil-required-star') && s.textContent.trim() === '*') s.remove();
+    });
+    // de-dupe our own stars
+    const stars = label.querySelectorAll('.kil-required-star');
+    for (let i = 1; i < stars.length; i++) stars[i].remove();
+  });
+}
+
+// Function to add red asterisk (*) to required fields
+function addAsteriskToRequiredFields_working() {
+    const inputs = document.querySelectorAll('input, select, textarea'); // Select all input, select, and textarea elements
+    inputs.forEach(input => {
+        if (input.required) { // Check if the field is required
+
+
+            let label;
+            // Try to find label by 'for' attribute first (common case)
+            label = document.querySelector(`label[for='${input.name}']`);
+
+            // If not found, try to find the legend element (fieldset case)
+            if (!label) {
+                const fieldset = input.closest('fieldset');
+                if (fieldset) {
+                    label = fieldset.querySelector('legend');
+                }
+            }
+
+            if (label && !label.innerHTML.includes('*')) {
+                // Append asterisk only if not already there
+                label.innerHTML += ' <span style="color:red;">*</span>';
+            }
+        }
+    });
+}
+
+
+// single-source: always use ensureStarVisibleFor()
+function addAsteriskToRequiredFields() {
+  document.querySelectorAll('input[required], select[required], textarea[required]')
+    .forEach(ensureStarVisibleFor);
+}
+
+function attachInputEvents() {
+    const inputs = document.querySelectorAll('input, select, textarea'); // Select all input, select, and textarea elements
+    inputs.forEach(input => {
+        if (input.dataset.kilInputBound === '1') return;
+        if (!input.hasAttribute('data-ignore-kilvish')) { // Skip inputs with the custom attribute
+            input.addEventListener('keyup', validateKilvishInput);
+            input.addEventListener('change', validateKilvishInput);
+            input.dataset.kilInputBound = '1';
+        }
+    });
+}
+
+
+
+// Function to automatically add validateForm to form submit buttons
+function addValidateFormToSubmitButtons() {
+    const forms = document.querySelectorAll('form'); // Get all forms on the page
+    forms.forEach(form => {
+        const formId = form.id;
+        if (form.dataset.kilFormSubmitBound !== '1') {
+            form.addEventListener('submit', (e) => validateForm(form, e));
+            form.dataset.kilFormSubmitBound = '1';
+        }
+        const target = formId ? `#${formId}` : form;
+        const submitButtons = form.querySelectorAll('button[type="submit"], input[type="submit"]');
+        submitButtons.forEach(button => {
+            if (button.dataset.kilSubmitBound === '1') return;
+            button.addEventListener('click', (e) => validateForm(target, e));
+            button.dataset.kilSubmitBound = '1';
+        });
+    });
+}
+
+let _kilEyeObserver = null;
+
+function startEyeObserver() {
+  if (_kilEyeObserver || !window.MutationObserver) return;
+  _kilEyeObserver = new MutationObserver(muts => {
+    for (const m of muts) {
+      m.addedNodes && m.addedNodes.forEach(node => {
+        if (!(node instanceof HTMLElement)) return;
+        if (node.matches && node.matches('input[type="password"]')) ensureEyeForPassword(node);
+        node.querySelectorAll && node.querySelectorAll('input[type="password"]').forEach(ensureEyeForPassword);
+      });
+    }
+  });
+  _kilEyeObserver.observe(document.documentElement, { childList:true, subtree:true });
+}
+
+function initKilvalidate() {
+    normalizeRequiredStars();
+    addAsteriskToRequiredFields();
+
+    const forms = document.querySelectorAll('form'); // Get all forms on the page
+    forms.forEach(form => {
+        const formId = form.id;
+        if (formId) {
+            addRealTimeValidation(formId);
+        } else {
+            addRealTimeValidation(form);
+        }
+    });
+
+    // Attach events to all input fields
+    attachInputEvents();
+
+    // Add validation to submit buttons
+    addValidateFormToSubmitButtons();
+
+    // Password helpers
+    initPasswordStrengthMeter();
+    document.querySelectorAll('input[type="password"]').forEach(ensureEyeForPassword);
+    startEyeObserver();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initKilvalidate);
+} else {
+  initKilvalidate();
+}
+
+
+
+function validateKilvishInput(event) {
+  const inputField = event.target;
+  if (inputField.hasAttribute('data-ignore-kilvish')) return;
+
+  // --- local helper: clear this field's error slot without relying on wrapper classes
+  function clearFieldError(field) {
+    const form = field.form || field.closest('form');
+    if (!form) return;
+    const sib = field.nextElementSibling;
+    let key = field.name || field.id || 'field';
+    if (field.tagName === 'SELECT' && sib && (sib.classList.contains('select2') || sib.classList.contains('select2-container'))) {
+      key = field.name || field.id || 'select';
+    } else if (field.parentElement && field.parentElement.classList.contains('input-group')) {
+      key = field.name || field.id || 'inputgroup';
+    }
+    const node = form.querySelector(`#kil_err_${String(key).replace(/[^a-zA-Z0-9_\-]/g,'_')}`);
+    if (node) { node.textContent = ''; node.classList.add('is-hidden'); }
+    field.style.border = '';
+  }
+
+  // --- General valid character sets
+  let validCharacters = /^[a-zA-Z\s]*$/; // only char, no special char no numbers
+
+  // Define allowed image/file types
+  const validFilesTypes = {
+    image: ['image/jpeg','image/png','image/bmp','image/tiff','image/webp','image/svg+xml'],
+    doc: ['application/pdf','application/msword','application/vnd.openxmlformats-officedocument.wordprocessingml.document','application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+    pdf: ['application/pdf'],
+    mix: ['image/jpeg','image/png','image/bmp','image/tiff','image/webp','image/svg+xml','application/pdf','application/msword','application/vnd.openxmlformats-officedocument.wordprocessingml.document','application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+    only_pdf_image: ['application/pdf','image/jpeg','image/png','image/bmp','image/tiff','image/webp','image/svg+xml'],
+    only_doc_image: ['application/pdf','application/msword','application/vnd.openxmlformats-officedocument.wordprocessingml.document','application/vnd.ms-excel','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','image/jpeg','image/png','image/bmp','image/tiff','image/webp','image/svg+xml']
+  };
+
+  const fileTypeDisplayNames = {
+    image: 'Image',
+    doc: 'Document',
+    pdf: 'PDF',
+    mix: 'Image & Document',
+    only_pdf_image: 'PDF & Image',
+    only_doc_image: 'Document & Image'
+  };
+
+  // --- class-agnostic cleanup (no container lookups)
+  clearFieldError(inputField);
+
+  // --- Custom validations by field/name/type
+  if (inputField.name === 'description' || inputField.name === 'address') {
+    validCharacters = /^[a-zA-Z0-9@,._\s-'"*]*$/;
+    if (inputField.value.length > 400) {
+      addErrorMessage(inputField, 'Input exceeds the maximum length of 400 characters!');
+      inputField.style.border = '1px solid red';
+      inputField.value = inputField.value.substring(0, 400);
+      return;
+    }
+
+  } else if (inputField.name === 'firstname' || inputField.name === 'lastname' || inputField.name === 'appointment_by') {
+    validCharacters = /^[a-zA-Z\s-]*$/; // allow hyphen
+    const allowedChars = /^[a-zA-Z0-9._@-\s]+$/;
+    const inputValue = inputField.value;
+    if (allowedChars.test(inputValue)) {
+      if (inputValue.length > 20 || inputValue.length < 2) {
+        addErrorMessage(inputField, 'This Field Must Be Between 2 And 20 Characters.');
+        inputField.style.border = '1px solid red';
+        if (event.type === 'change') inputField.value = '';
+        return;
+      }
+    }
+    inputField.style.border = '';
+
+  } else if (inputField.name === 'otp') {
+    validCharacters = /^\d{6}$/;
+    const numericOnlyPattern = /^\d+$/;
+    const inputValue = inputField.value;
+    if (numericOnlyPattern.test(inputValue) && inputValue.length !== 6) {
+      addErrorMessage(inputField, 'OTP must be exactly 6 digits');
+      inputField.style.border = '1px solid red';
+      if (event.type === 'change') inputField.value = '';
+      return;
+    }
+    inputField.style.border = '';
+
+  } else if (inputField.name === 'number_of_items') {
+    validCharacters = /^\d{0,6}(\.\d{0,2})?$/;
+    const numericOnlyPattern = /^\d+$/;
+    const inputValue = inputField.value;
+    if (numericOnlyPattern.test(inputValue) && inputValue.length > 3) {
+      addErrorMessage(inputField, 'Pacakge Number Cannot Be  Exceed 3 Digits');
+      inputField.style.border = '2px solid red';
+      if (event.type === 'change') inputField.value = '';
+      return;
+    }
+    inputField.style.border = '';
+
+  } else if (inputField.name === 'contact' || inputField.id === 'agent_contact' || inputField.name === 'fullcontact' ) {
+    validCharacters = /^[\d\-\s]{0,20}$/;
+
+  } else if (inputField.type === 'number') {
+    validCharacters = /^\d{0,20}$/;
+    const numericOnlyPattern = /^\d+$/;
+    const inputValue = inputField.value;
+    if (numericOnlyPattern.test(inputValue) && (inputValue.length > 20 || inputValue.length < 1)) {
+      addErrorMessage(inputField, 'This Must Be Between 1 And 20 Digits.');
+      inputField.style.border = '2px solid red';
+      if (event.type === 'change') inputField.value = '';
+      return;
+    }
+    inputField.style.border = '';
+
+  } else if (inputField.type === 'tel') {
+    let inputValue = inputField.value.trim().replace(/\s+/g, '');
+    inputField.value = inputValue;
+    const phonePattern = /^\+?\d{7,15}$/;
+    validCharacters = /^\+?\d{7,15}$/;
+    if (!phonePattern.test(inputValue)) {
+      addErrorMessage(inputField, 'Enter a valid phone number (7–15 digits, optional +).');
+      inputField.style.border = '2px solid red';
+      if (event.type === 'change') inputField.value = '';
+      return;
+    }
+    inputField.style.border = '';
+
+  } else if (inputField.name === 'kildate') {
+    validCharacters = /^(?:\d{4}[-\/]\d{2}[-\/]\d{2})$/;
+    const inputValue = inputField.value.trim();
+    const inputDate = new Date(inputValue.replace(/[-\/]/g, '/'));
+    const today = new Date(); today.setHours(0,0,0,0);
+    const dateRange = inputField.getAttribute('data-kilvish-date');
+    if (dateRange) {
+      const [minAge, maxAge] = dateRange.replace('_','').split('_').map(Number);
+      const minDate = new Date(today), maxDate = new Date(today);
+      minDate.setFullYear(today.getFullYear() - minAge);
+      maxDate.setFullYear(today.getFullYear() - maxAge);
+      if (inputDate > minDate || inputDate < maxDate) {
+        addErrorMessage(inputField, `Birthday cannot be less than ${minAge} years ago or more than ${maxAge} years in the future.`);
+        inputField.style.border = '2px solid red';
+        if (event.type === 'change') inputField.value = '';
+        return;
+      }
+    } else {
+      if (inputDate < today) {
+        addErrorMessage(inputField, 'The date cannot be in the past.');
+        inputField.style.border = '2px solid red';
+        if (event.type === 'change') inputField.value = '';
+        return;
+      }
+    }
+    inputField.style.border = '';
+
+  } else if (inputField.type === 'date' || inputField.type === 'month') {
+    validCharacters = /^(?:\d{4}[-\/]\d{2}[-\/]\d{2})$/;
+    const inputValue = inputField.value.trim();
+    const inputDate = (inputField.type === 'month')
+      ? new Date(inputValue + '-01')
+      : new Date(inputValue.replace(/[-\/]/g, '/'));
+    const today = new Date(); today.setHours(0,0,0,0);
+    const dateRange = inputField.getAttribute('data-kilvish-date');
+
+    if (dateRange) {
+      if (/^_(\d+)_(\d+)$/.test(dateRange)) {
+        const [minAge, maxAge] = dateRange.replace('_','').split('_').map(Number);
+        const minDate = new Date(today), maxDate = new Date(today);
+        minDate.setFullYear(today.getFullYear() - minAge);
+        maxDate.setFullYear(today.getFullYear() - maxAge);
+        if (inputDate > minDate || inputDate < maxDate) {
+          addErrorMessage(inputField, `Age must be between ${minAge} and ${maxAge} years.`);
+          inputField.style.border = '2px solid red';
+          if (event.type === 'change') inputField.value = '';
+          return;
+        }
+      } else if (/^_(\d+)$/.test(dateRange)) {
+        const exactAge = Number(dateRange.replace('_',''));
+        const exactDate = new Date(today); exactDate.setFullYear(today.getFullYear() - exactAge);
+        if (inputDate.getTime() !== exactDate.getTime()) {
+          addErrorMessage(inputField, `You must be exactly ${exactAge} years old.`);
+          inputField.style.border = '2px solid red';
+          if (event.type === 'change') inputField.value = '';
+          return;
+        }
+      } else if (/future/.test(dateRange)) {
+        if (dateRange === 'future' && inputDate <= today) {
+          addErrorMessage(inputField, 'The selected date must be in the future.');
+          inputField.style.border = '2px solid red';
+          if (event.type === 'change') inputField.value = '';
+          return;
+        } else if (dateRange === 'today_future' && inputDate < today) {
+          addErrorMessage(inputField, 'The selected date cannot be in the past.');
+          inputField.style.border = '2px solid red';
+          if (event.type === 'change') inputField.value = '';
+          return;
+        } else if (/(\d+)_days_future/.test(dateRange)) {
+          const days = Number(dateRange.match(/(\d+)_days_future/)[1]);
+          const maxFutureDate = new Date(today); maxFutureDate.setDate(today.getDate() + days);
+          if (inputDate > maxFutureDate || inputDate < today) {
+            addErrorMessage(inputField, `The selected date must be within the next ${days} days.`);
+            inputField.style.border = '2px solid red';
+            if (event.type === 'change') inputField.value = '';
+            return;
+          }
+        } else if (/^(\d+)_years_future$/.test(dateRange)) {
+          const yearsFuture = Number(dateRange.match(/^(\d+)_years_future$/)[1]);
+          const maxFutureDate = new Date(today); maxFutureDate.setFullYear(today.getFullYear() + yearsFuture);
+          if (inputDate < today || inputDate > maxFutureDate) {
+            addErrorMessage(inputField, `The date must be within the next ${yearsFuture} years.`);
+            inputField.style.border = '2px solid red';
+            if (event.type === 'change') inputField.value = '';
+            return;
+          }
+        } else if (/^(\d+)_years_after$/.test(dateRange)) {
+          const yearsAfter = Number(dateRange.match(/^(\d+)_years_after$/)[1]);
+          const afterDate = new Date(today); afterDate.setFullYear(today.getFullYear() + yearsAfter);
+          if (inputDate.getTime() !== afterDate.getTime()) {
+            addErrorMessage(inputField, `The date must be exactly ${yearsAfter} years after today.`);
+            inputField.style.border = '2px solid red';
+            if (event.type === 'change') inputField.value = '';
+            return;
+          }
+        }
+      } else if (/past/.test(dateRange)) {
+        if (dateRange === 'past' && inputDate >= today) {
+          addErrorMessage(inputField, 'The selected date must be in the past.');
+          inputField.style.border = '2px solid red';
+          if (event.type === 'change') inputField.value = '';
+          return;
+        } else if (/^(\d+)_years_past$/.test(dateRange)) {
+          const yearsPast = Number(dateRange.match(/^(\d+)_years_past$/)[1]);
+          const maxPastDate = new Date(today); maxPastDate.setFullYear(today.getFullYear() - yearsPast);
+          if (inputDate > today || inputDate < maxPastDate) {
+            addErrorMessage(inputField, `The date must be within the past ${yearsPast} years.`);
+            inputField.style.border = '2px solid red';
+            if (event.type === 'change') inputField.value = '';
+            return;
+          }
+        }
+      } else if (/^(\d+)_years_before$/.test(dateRange)) {
+        const yearsBefore = Number(dateRange.match(/^(\d+)_years_before$/)[1]);
+        const beforeDate = new Date(today); beforeDate.setFullYear(today.getFullYear() - yearsBefore);
+        if (inputDate >= beforeDate) {
+          addErrorMessage(inputField, `The date must be before ${yearsBefore} years ago.`);
+          inputField.style.border = '2px solid red';
+          if (event.type === 'change') inputField.value = '';
+          return;
+        }
+      } else if (/^(\d+)_years_after$/.test(dateRange)) {
+        const yearsAfter = Number(dateRange.match(/^(\d+)_years_after$/)[1]);
+        const afterDate = new Date(today); afterDate.setFullYear(today.getFullYear() + yearsAfter);
+        if (inputDate <= afterDate) {
+          addErrorMessage(inputField, `The date must be after ${yearsAfter} years from today.`);
+          inputField.style.border = '2px solid red';
+          if (event.type === 'change') inputField.value = '';
+          return;
+        }
+      } else if (/Between_(\d+)_(\d+)/.test(dateRange)) {
+        const [startYear, endYear] = dateRange.match(/Between_(\d+)_(\d+)/).slice(1,3).map(Number);
+        const minRangeDate = new Date(startYear,0,1);
+        const maxRangeDate = new Date(endYear,11,31);
+        if (inputDate < minRangeDate || inputDate > maxRangeDate) {
+          addErrorMessage(inputField, `The date must be between ${startYear} and ${endYear}.`);
+          inputField.style.border = '2px solid red';
+          if (event.type === 'change') inputField.value = '';
+          return;
+        }
+      } else if (/from_(\d+)/.test(dateRange)) {
+        const fromYear = Number(dateRange.match(/from_(\d+)/)[1]);
+        const fromDate = new Date(fromYear,0,1);
+        if (inputDate < fromDate) {
+          addErrorMessage(inputField, `The date must be from the year ${fromYear} onwards.`);
+          inputField.style.border = '2px solid red';
+          if (event.type === 'change') inputField.value = '';
+          return;
+        }
+      } else if (/till_(\d+)/.test(dateRange)) {
+        const tillYear = Number(dateRange.match(/till_(\d+)/)[1]);
+        const tillDate = new Date(tillYear,11,31);
+        if (inputDate > tillDate) {
+          addErrorMessage(inputField, `The date must be till the year ${tillYear}.`);
+          inputField.style.border = '2px solid red';
+          if (event.type === 'change') inputField.value = '';
+          return;
+        }
+      } else if (dateRange === 'not_today' && inputDate.getTime() === today.getTime()) {
+        addErrorMessage(inputField, "Today's date is not allowed.");
+        inputField.style.border = '2px solid red';
+        if (event.type === 'change') inputField.value = '';
+        return;
+      } else if (dateRange === 'weekday' && (inputDate.getDay() === 0 || inputDate.getDay() === 6)) {
+        addErrorMessage(inputField, 'Only weekdays (Monday to Friday) are allowed.');
+        inputField.style.border = '2px solid red';
+        if (event.type === 'change') inputField.value = '';
+        return;
+      } else if (dateRange === 'weekend' && (inputDate.getDay() >= 1 && inputDate.getDay() <= 5)) {
+        addErrorMessage(inputField, 'Only weekends (Saturday and Sunday) are allowed.');
+        inputField.style.border = '2px solid red';
+        if (event.type === 'change') inputField.value = '';
+        return;
+      } else if (dateRange === 'first_of_month' && inputDate.getDate() !== 1) {
+        addErrorMessage(inputField, 'The date must be the first day of the month.');
+        inputField.style.border = '2px solid red';
+        if (event.type === 'change') inputField.value = '';
+        return;
+      } else if (/^exact_(\d+)$/.test(dateRange)) {
+        const exactAge = Number(dateRange.match(/^exact_(\d+)$/)[1]);
+        const exactDate = new Date(today); exactDate.setFullYear(today.getFullYear() - exactAge);
+        if (inputDate.getTime() !== exactDate.getTime()) {
+          addErrorMessage(inputField, `You must be exactly ${exactAge} years old.`);
+          inputField.style.border = '2px solid red';
+          if (event.type === 'change') inputField.value = '';
+          return;
+        }
+      } else if (dateRange === 'last_of_month') {
+        const lastDay = new Date(inputDate.getFullYear(), inputDate.getMonth()+1, 0).getDate();
+        if (inputDate.getDate() !== lastDay) {
+          addErrorMessage(inputField, 'The date must be the last day of the month.');
+          inputField.style.border = '2px solid red';
+          if (event.type === 'change') inputField.value = '';
+          return;
+        }
+      }
+    }
+
+    // grouped date validation (FROM..TO style)
+    const dateGroupAttr = inputField.getAttribute('data-kilvish-dategroup');
+    if (dateGroupAttr && /.+_[12]$/.test(dateGroupAttr)) {
+      const [groupKey, groupIndex] = dateGroupAttr.split('_');
+      const counterpartIndex = groupIndex === '1' ? '2' : '1';
+      const counterpart = document.querySelector(`[data-kilvish-dategroup="${groupKey}_${counterpartIndex}"]`);
+      if (counterpart && counterpart.value) {
+        const d1 = (inputField.type === 'month') ? new Date(inputField.value + '-01') : new Date(inputField.value.replace(/[-\/]/g,'/'));
+        const d2 = (counterpart.type === 'month') ? new Date(counterpart.value + '-01') : new Date(counterpart.value.replace(/[-\/]/g,'/'));
+        const ok = (groupIndex === '1' && d1 <= d2) || (groupIndex === '2' && d1 >= d2);
+        if (!ok) {
+          const thisName = inputField.dataset.kilvishDate_name || `Field (${groupKey}_${groupIndex})`;
+          const otherName = counterpart.dataset.kilvishDate_name || `Field (${groupKey}_${counterpartIndex})`;
+          addErrorMessage(inputField, `${thisName} must be ${groupIndex === '1' ? 'before or same as' : 'after or same as'} ${otherName}.`);
+          inputField.style.border = '2px solid red';
+          if (event.type === 'change') inputField.value = '';
+          return;
+        }
+      }
+    }
+
+    inputField.style.border = '';
+    return;
+
+  } else if (inputField.name === 'age') {
+    const inputValue = inputField.value.trim();
+    const ageValue = parseInt(inputValue, 10);
+    if (isNaN(ageValue)) {
+      addErrorMessage(inputField, 'Please enter a valid number for age.');
+      inputField.style.border = '2px solid red';
+      if (event.type === 'change') inputField.value = '';
+      return;
+    }
+    const ageRule = inputField.getAttribute('data-kilvish-age') || '18';
+    if (/^(\d+)$/.test(ageRule)) {
+      const requiredAge = Number(ageRule);
+      if (ageValue !== requiredAge) {
+        addErrorMessage(inputField, `Age must be exactly ${requiredAge} years.`);
+        inputField.style.border = '2px solid red';
+        if (event.type === 'change') inputField.value = '';
+        return;
+      }
+    } else if (/^(\d+)_(\d+)$/.test(ageRule)) {
+      const [minAge, maxAge] = ageRule.split('_').map(Number);
+      if (ageValue < minAge) {
+        addErrorMessage(inputField, `Minimum age must be ${minAge} years.`);
+        inputField.style.border = '2px solid red';
+        if (event.type === 'change') inputField.value = '';
+        return;
+      } else if (ageValue > maxAge) {
+        addErrorMessage(inputField, `Age cannot exceed ${maxAge} years.`);
+        inputField.style.border = '2px solid red';
+        if (event.type === 'change') inputField.value = '';
+        return;
+      }
+    }
+    inputField.style.border = '';
+    return;
+  }
+
+  // model_name / models[]
+  if (inputField.name === 'model_name' || inputField.name === 'models[]') {
+    validCharacters = /^[a-zA-Z0-9]{4,20}$/;
+  } else if (inputField.type === 'email') {
+    validCharacters = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+    const allowedEmailChars = /^[a-zA-Z0-9._@-]+$/;
+    const inputValue = inputField.value;
+    if (allowedEmailChars.test(inputValue) && !validCharacters.test(inputValue)) {
+      addErrorMessage(inputField, 'Invalid Email Format.');
+      inputField.style.border = '1px solid red';
+      if (event.type === 'change') inputField.value = '';
+      return;
+    }
+    inputField.style.border = '';
+  }
+
+  // data-kilvish-num
+  if (inputField.hasAttribute('data-kilvish-num')) {
+    const inputValue = inputField.value;
+    const kilvishType = inputField.getAttribute('data-kilvish-num');
+    validCharacters = /^[0-9]*$/;
+    let min = null, max = null;
+    const m = kilvishType.match(/^_(\d+)_(\d+)$/);
+    if (m) { min = parseInt(m[1],10); max = parseInt(m[2],10); }
+    const exactM = kilvishType.match(/^exact_(\d+)$/);
+    const exactLength = exactM ? parseInt(exactM[1],10) : null;
+
+    if (!/^\d*$/.test(inputValue)) {
+      addErrorMessage(inputField, 'Only numerical characters are allowed.');
+      inputField.style.border = '2px solid red';
+    } else if (exactLength !== null && inputValue.length !== exactLength) {
+      addErrorMessage(inputField, `This field must contain exactly ${exactLength} digits.`);
+      inputField.style.border = '2px solid red';
+      if (event.type === 'change') inputField.value = '';
+    } else if ((min && inputValue.length < min) || (max && inputValue.length > max)) {
+      addErrorMessage(inputField, `This Field Must be between ${min} and ${max} digits.`);
+      inputField.style.border = '2px solid red';
+      if (event.type === 'change') inputField.value = '';
+    } else {
+      inputField.style.border = '';
+    }
+  }
+
+  // data-kilvish-num11
+  if (inputField.hasAttribute('data-kilvish-num11')) {
+    const inputValue = inputField.value;
+    const kilvishType = inputField.getAttribute('data-kilvish-num');
+    validCharacters = /^[0-9]*$/;
+    let min = null, max = null;
+    const m = kilvishType ? kilvishType.match(/^_(\d+)_(\d+)$/) : null;
+    if (m) { min = parseInt(m[1],10); max = parseInt(m[2],10); }
+    if (kilvishType === 'exact_20') validCharacters = /^[0-9]{20}$/;
+
+    if (!validCharacters.test(inputValue)) {
+      addErrorMessage(inputField, kilvishType === 'exact_20' ? 'This field must contain exactly 20 digits.' : 'Only numerical characters are allowed.');
+      inputField.style.border = '2px solid red';
+    } else if ((min && inputValue.length < min) || (max && inputValue.length > max)) {
+      addErrorMessage(inputField, `This Field Must be between ${min} and ${max} digits.`);
+      inputField.style.border = '2px solid red';
+      if (event.type === 'change') inputField.value = '';
+    } else {
+      inputField.style.border = '';
+    }
+  }
+
+  // data-kilvish-char
+  if (inputField.hasAttribute('data-kilvish-char')) {
+    const inputValue = inputField.value;
+    const charType = inputField.getAttribute('data-kilvish-char');
+    if (charType.startsWith('Yes') || charType.startsWith('mix')) {
+      if (charType === 'mix') validCharacters = /^[a-zA-Z0-9]*$/;
+      else if (charType === 'Yes') validCharacters = /^[a-zA-Z]*$/;
+      const specialChars = charType.split('_').slice(1).join('');
+      if (specialChars) validCharacters = new RegExp(`^[a-zA-Z0-9${specialChars}]*$`);
+      if (!validCharacters.test(inputValue)) {
+        addErrorMessage(inputField, 'Invalid character entered!');
+        inputField.style.border = '2px solid red';
+        if (event.type === 'change') inputField.value = '';
+        return;
+      }
+    }
+  }
+
+  // data-kilvish-amount
+  if (inputField.hasAttribute('data-kilvish-amount')) {
+    const kilvishType = inputField.getAttribute('data-kilvish-amount');
+    validCharacters = /^\d+(\.\d{0,2})?$/;
+    let currency = 'USD', minAmount = null, maxAmount = null;
+    const m = kilvishType.match(/^([A-Z]{3})(?:_(\d+)_(\d+))?$/);
+    if (m) { currency = m[1]; minAmount = m[2] ? parseFloat(m[2]) : null; maxAmount = m[3] ? parseFloat(m[3]) : null; }
+
+    const formatAmount = () => {
+      let caret = inputField.selectionStart;
+      let raw = inputField.value;
+      if (!validCharacters.test(raw)) {
+        raw = raw.replace(/[^0-9.]/g,'').replace(/(\..*?)\..*/,'$1').replace(/(\.\d{2}).*/,'$1');
+      }
+      if (raw && !raw.includes('.') && !raw.endsWith('.')) raw = parseFloat(raw).toFixed(2);
+      inputField.value = raw;
+      const di = raw.indexOf('.'); if (di !== -1 && caret > di) caret = Math.min(caret, raw.length);
+      inputField.setSelectionRange(caret, caret);
+
+      let display = inputField.nextElementSibling;
+      if (!display || !display.classList.contains('amount-display')) {
+        display = document.createElement('div');
+        display.className = 'amount-display';
+        display.style.color = 'green';
+        inputField.parentNode.insertBefore(display, inputField.nextSibling);
+      }
+      display.textContent = `${currency} ${raw || '0.00'} .`;
+    };
+
+    const validateAmountOnBlur = () => {
+      if (inputField.readOnly) return;
+      let finalValue = parseFloat(inputField.value || '0').toFixed(2);
+      let display = inputField.nextElementSibling;
+      if (minAmount !== null && finalValue < minAmount) {
+        addErrorMessage(inputField, `Amount must be at least ${minAmount.toFixed(2)} ${currency}.`);
+        inputField.style.border = '2px solid red';
+        inputField.value = '';
+        if (display) display.textContent = '';
+        return;
+      }
+      if (maxAmount !== null && finalValue > maxAmount) {
+        addErrorMessage(inputField, `Amount must not exceed ${maxAmount.toFixed(2)} ${currency}.`);
+        inputField.style.border = '2px solid red';
+        inputField.value = '';
+        if (display) display.textContent = '';
+        return;
+      }
+      inputField.style.border = '';
+      inputField.value = finalValue;
+    };
+
+    if (inputField.dataset.kilAmountBound !== '1') {
+      inputField.addEventListener('input', formatAmount);
+      inputField.addEventListener('blur', validateAmountOnBlur);
+      inputField.dataset.kilAmountBound = '1';
+    }
+    if (event.type === 'keyup' || event.type === 'change') {
+      formatAmount();
+    }
+  }
+
+  
+
+
+  if (inputField.type === 'password') {
+  // Always render UI directly *under* the field (or its .input-group)
+  const { bars, label: strengthLabel, rulesUl } = ensurePassUI(inputField);
+
+  // Read constraints like data-kilvish-password="12_64" (min_max). Defaults to 12–128.
+  const constraintAttr = inputField.getAttribute("data-kilvish-password") || "12";
+  const [minStr, maxStr] = constraintAttr.split("_");
+  const minLength = parseInt(minStr, 10) || 12;
+  const maxLength = parseInt(maxStr || "128", 10);
+
+  // Overall regex (lower, upper, digit, special, within length)
+  const regexPattern = `^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[\\W_]).{${minLength},${maxLength}}$`;
+  validCharacters = new RegExp(regexPattern);
+
+  // Rules list (shown under field)
+  const rules = {
+    length:     `Password must be between ${minLength} and ${maxLength} characters long`,
+    uppercase:  "At least one uppercase letter (A-Z)",
+    lowercase:  "At least one lowercase letter (a-z)",
+    number:     "At least one number (0-9)",
+    special:    "At least one special character (!@#$%^&*)",
+    sequential: "No sequential characters (e.g., 1234, abcd)"
+  };
+
+  // Ensure LI items exist for each rule under this field
+  const ruleElements = {};
+  Object.keys(rules).forEach((key) => {
+    let li = rulesUl.querySelector(`li[data-rule="${key}"]`);
+    if (!li) {
+      li = document.createElement("li");
+      li.setAttribute("data-rule", key);
+      li.textContent = `❌ ${rules[key]}`;
+      li.style.color = "red";
+      li.style.fontSize = "12px";
+      rulesUl.appendChild(li);
+    }
+    ruleElements[key] = li;
+  });
+
+  // Helper: detect sequential runs (abcd / 1234 or reverse)
+  const hasSequentialChars = (password) => {
+    for (let i = 0; i < password.length - 3; i++) {
+      if (
+        password.charCodeAt(i + 1) === password.charCodeAt(i) + 1 &&
+        password.charCodeAt(i + 2) === password.charCodeAt(i) + 2 &&
+        password.charCodeAt(i + 3) === password.charCodeAt(i) + 3
+      ) return true;
+      if (
+        password.charCodeAt(i + 1) === password.charCodeAt(i) - 1 &&
+        password.charCodeAt(i + 2) === password.charCodeAt(i) - 2 &&
+        password.charCodeAt(i + 3) === password.charCodeAt(i) - 3
+      ) return true;
+    }
+    return false;
+  };
+
+  // Strength scoring (simple, consistent with rules)
+  const checkStrength = (pwd) => {
+    let s = 0;
+    if (pwd.length >= minLength) s += 2;
+    if (/[A-Z]/.test(pwd)) s += 1;
+    if (/[a-z]/.test(pwd)) s += 1;
+    if (/\d/.test(pwd))     s += 1;
+    if (/[\W_]/.test(pwd))  s += 1;
+    if (hasSequentialChars(pwd)) s -= 2;
+    return Math.max(0, s);
+  };
+
+  const password = inputField.value || "";
+
+  // Evaluate rule-by-rule
+  const validations = {
+    length:    password.length >= minLength && password.length <= maxLength,
+    uppercase: /[A-Z]/.test(password),
+    lowercase: /[a-z]/.test(password),
+    number:    /\d/.test(password),
+    special:   /[\W_]/.test(password),
+    sequential: !hasSequentialChars(password)
+  };
+
+  // Update rule list UI
+  Object.keys(validations).forEach((key) => {
+    const ok = validations[key];
+    ruleElements[key].textContent = `${ok ? "✅" : "❌"} ${rules[key]}`;
+    ruleElements[key].style.color = ok ? "green" : "red";
+  });
+
+  // Update meter bars + label
+  const strength = checkStrength(password);
+  bars.forEach(b => b.style.background = "lightgray");
+  if (strength <= 2) {
+    if (bars[0]) bars[0].style.background = "red";
+    strengthLabel.textContent = "Weak";
+    strengthLabel.style.color = "red";
+  } else if (strength <= 4) {
+    if (bars[0]) bars[0].style.background = "yellow";
+    if (bars[1]) bars[1].style.background = "yellow";
+    strengthLabel.textContent = "Medium";
+    strengthLabel.style.color = "orange";
+  } else {
+    if (bars[0]) bars[0].style.background = "green";
+    if (bars[1]) bars[1].style.background = "green";
+    if (bars[2]) bars[2].style.background = "green";
+    strengthLabel.textContent = "Strong";
+    strengthLabel.style.color = "green";
+  }
+
+  // Final validity & border color
+  const isValid = validCharacters.test(password) &&
+                  Object.values(validations).every(Boolean);
+
+  inputField.style.border = isValid ? "1px solid green" : "1px solid red";
+
+  // On commit (change), clear invalid
+  if (!isValid && event.type === "change") {
+    inputField.value = "";
+  }
+
+  // Important: stop further generic validation for this field
+  return;
+}
+
+
+
+  // Files
+  if (inputField.type === 'file') {
+    const kilvishFileType = inputField.getAttribute('data-kilvish-file') || 'image';
+    const [type, ...minMax] = kilvishFileType.split('_');
+    const validTypes = validFilesTypes[kilvishFileType] || validFilesTypes[type] || validFilesTypes.image;
+    const files = inputField.files;
+
+    let min = 1, max = Infinity;
+    if (minMax.length >= 2) { min = parseInt(minMax[0],10); max = parseInt(minMax[1],10); }
+
+    if (files.length < min || files.length > max) {
+      addErrorMessage(inputField, `Please select between ${min} and ${max} valid file(s).`);
+      inputField.value = '';
+      inputField.style.border = '1px solid red';
+      return false;
+    }
+
+    const displayType = fileTypeDisplayNames[kilvishFileType] || type.toUpperCase();
+    for (const file of files) {
+      if (!validTypes.includes(file.type)) {
+        addErrorMessage(inputField, `Invalid file type. Allowed types: ${displayType}.`);
+        inputField.value = '';
+        inputField.style.border = '1px solid red';
+        return false;
+      }
+    }
+  } else {
+    // Generic typing/commit validation
+    if (event.type === 'keyup') {
+      if (!validCharacters.test(inputField.value)) {
+        if (inputField.type !== 'password') addErrorMessage(inputField, 'Invalid character entered!');
+        inputField.style.border = '1px solid red';
+      }
+    }
+    if (event.type === 'change') {
+      if (!validCharacters.test(inputField.value)) {
+        inputField.value = '';
+        addErrorMessage(inputField, 'Invalid character or format!');
+        inputField.style.border = '1px solid red';
+      } else {
+        inputField.style.border = '';
+        clearFieldError(inputField); // class-agnostic clear on valid
+      }
+    }
+  }
+}
+
+
+function initPasswordStrengthMeter() {
+  document.querySelectorAll("input[type='password']").forEach((inputField) => {
+    if (inputField.hasAttribute('data-ignore-kilvish')) return;
+    if (inputField.dataset.kilPassStrengthBound === '1') return;
+
+    const { bars, label: strengthLabel } = ensurePassUI(inputField);
+
+    const passwordConstraints = inputField.getAttribute("data-kilvish-password") || "12";
+    const [minLength] = passwordConstraints.split("_").map(Number);
+
+    const hasSequentialChars = (password) => {
+      for (let i = 0; i < password.length - 3; i++) {
+        if (password.charCodeAt(i+1) === password.charCodeAt(i)+1 &&
+            password.charCodeAt(i+2) === password.charCodeAt(i)+2 &&
+            password.charCodeAt(i+3) === password.charCodeAt(i)+3) return true;
+        if (password.charCodeAt(i+1) === password.charCodeAt(i)-1 &&
+            password.charCodeAt(i+2) === password.charCodeAt(i)-2 &&
+            password.charCodeAt(i+3) === password.charCodeAt(i)-3) return true;
+      }
+      return false;
+    };
+
+    const checkStrength = (password) => {
+      let s = 0;
+      if (password.length >= minLength) s += 2;
+      if (/[A-Z]/.test(password)) s += 1;
+      if (/[a-z]/.test(password)) s += 1;
+      if (/\d/.test(password))     s += 1;
+      if (/[\W_]/.test(password))  s += 1;
+      if (hasSequentialChars(password)) s -= 2;
+      return Math.max(0, s);
+    };
+
+    inputField.addEventListener("input", (e) => {
+      const pwd = e.target.value;
+      const strength = checkStrength(pwd);
+
+      // reset
+      bars.forEach(b => b.style.background = 'lightgray');
+
+      if (strength <= 2) {
+        bars[0].style.background = 'red';
+        strengthLabel.textContent = 'Weak';
+        strengthLabel.style.color = 'red';
+      } else if (strength <= 4) {
+        bars[0].style.background = 'yellow';
+        bars[1].style.background = 'yellow';
+        strengthLabel.textContent = 'Medium';
+        strengthLabel.style.color = 'orange';
+      } else {
+        bars[0].style.background = 'green';
+        bars[1].style.background = 'green';
+        bars[2].style.background = 'green';
+        strengthLabel.textContent = 'Strong';
+        strengthLabel.style.color = 'green';
+      }
+    });
+
+    inputField.dataset.kilPassStrengthBound = '1';
+  });
+}
+
+
+
+
+// Function to display error messages under the input field or container for checkboxes
+function addErrorMessage_working(parent, message) {
+    if (!parent.querySelector('.error-message')) {
+        const errorMessage = document.createElement('div');
+        errorMessage.className = 'error-message';
+        errorMessage.style.color = 'red';
+        errorMessage.style.fontSize = '12px';
+        errorMessage.innerText = message;
+        parent.appendChild(errorMessage);
+    }
+}
+
+
+function addErrorMessage_working2(target /* can be input or container */, message) {
+  // Find anchor & unique key
+  const form = (target.form) ? target.form : target.closest('form');
+  if (!form) return;
+
+  const { anchor, mode, key } = getErrorAnchor(target);
+
+  // Persistent node under anchor
+  const node = getOrCreateErrorNode(form, anchor, mode, key);
+
+  // Update text and reveal smoothly (no layout jump)
+  node.textContent = message || '';
+  node.classList.remove('is-hidden');
+}
+
+
+function addErrorMessage(target /* input or container */, message) {
+  const form = (target.form) ? target.form : target.closest('form');
+  if (!form) return;
+
+  // ------- find visual anchor for error placement -------
+  let field = null;
+  if (target && target.tagName && /^(INPUT|SELECT|TEXTAREA)$/.test(target.tagName)) {
+    field = target;
+  } else if (target && target.querySelector) {
+    const fields = target.querySelectorAll('input,select,textarea');
+    field = fields.length ? fields[fields.length - 1] : null;
+  }
+
+  let anchor = target, mode = 'beforeend', key = 'container';
+  if (field) {
+    // select2 rendered node
+    const sib = field.nextElementSibling;
+    if (field.tagName === 'SELECT' && sib && (sib.classList.contains('select2') || sib.classList.contains('select2-container'))) {
+      anchor = sib; mode = 'afterend'; key = field.name || field.id || 'select';
+    }
+    // bootstrap input-group
+    else if (field.parentElement && field.parentElement.classList.contains('input-group')) {
+      anchor = field.parentElement; mode = 'afterend'; key = field.name || field.id || 'inputgroup';
+    }
+    else {
+      anchor = field; mode = 'afterend'; key = field.name || field.id || 'field';
+    }
+  }
+
+  const id = `kil_err_${String(key).replace(/[^a-zA-Z0-9_\-]/g,'_')}`;
+  let node = form.querySelector(`#${id}`);
+  if (!node) {
+    node = document.createElement('div');
+    node.id = id;
+    node.className = 'error-message is-hidden';
+    if (mode === 'beforeend') anchor.insertAdjacentElement('beforeend', node);
+    else anchor.insertAdjacentElement('afterend', node);
+  }
+
+  node.textContent = message || '';
+  node.classList.remove('is-hidden');
+
+  // ------- re-show star on error -------
+  if (field) {
+    ensureStarVisibleFor(field);
+  } else {
+    const any = target.querySelector('input[required],select[required],textarea[required]') ||
+                target.querySelector('input,select,textarea');
+    if (any) ensureStarVisibleFor(any);
+  }
+}
+
+
+
+
+
+//====================== Command Kilvish validation End ===============================
+
+
+// --- Password UI helpers (ALWAYS render below field or its input-group) ---
+(function kilPassCSS(){
+  if (document.getElementById('kil-pass-style')) return;
+  const s = document.createElement('style');
+  s.id = 'kil-pass-style';
+  s.textContent = `
+    .kil-passui { display:block; width:100%; margin-top:6px; }
+    .kil-passui .password-strength { display:flex; align-items:center; gap:10px; }
+    .kil-passui .password-strength .bars { display:flex; gap:4px; }
+    .kil-passui .password-strength .bar { height:5px; width:30px; border-radius:3px; background:lightgray; }
+    .kil-passui .password-validation { list-style:none; padding:0; margin:6px 0 0; }
+    .kil-passui .password-validation li { font-size:12px; margin:2px 0; }
+  `;
+  document.head.appendChild(s);
+})();
+
+function getFieldAnchorForUI(input) {
+  // If wrapped in Bootstrap input-group, insert after the group
+  if (input.parentElement && input.parentElement.classList.contains('input-group')) {
+    return input.parentElement;
+  }
+  return input;
+}
+
+// Creates (or reuses) a single container with bars + <ul class="password-validation">
+function ensurePassUI(input) {
+  const anchor = getFieldAnchorForUI(input);
+  const key = input.name || input.id || 'password';
+  const id  = `kil_passui_${String(key).replace(/[^a-zA-Z0-9_-]/g,'_')}`;
+
+  let wrap = anchor.parentNode.querySelector(`#${id}`);
+  if (!wrap) {
+    wrap = document.createElement('div');
+    wrap.id = id;
+    wrap.className = 'kil-passui';
+
+    // Strength row
+    const strength = document.createElement('div');
+    strength.className = 'password-strength';
+
+    const barsWrap = document.createElement('div');
+    barsWrap.className = 'bars';
+    const bar1 = document.createElement('div'); bar1.className = 'bar';
+    const bar2 = document.createElement('div'); bar2.className = 'bar';
+    const bar3 = document.createElement('div'); bar3.className = 'bar';
+    barsWrap.append(bar1, bar2, bar3);
+
+    const label = document.createElement('span');
+    label.className = 'label';
+    label.textContent = 'Weak';
+    label.style.fontSize = '12px';
+
+    strength.append(barsWrap, label);
+
+    // Rules list
+    const rules = document.createElement('ul');
+    rules.className = 'password-validation';
+
+    wrap.append(strength, rules);
+    anchor.insertAdjacentElement('afterend', wrap);
+  }
+
+  const bars = wrap.querySelectorAll('.bar');
+  const label = wrap.querySelector('.password-strength .label');
+  const rulesUl = wrap.querySelector('.password-validation');
+  return { wrap, bars, label, rulesUl };
+}
+
+
+// ========== Password Eye (icon-inside input, sticky, colorable) ==========
+(function kilEyeCSS(){
+  if (document.getElementById('kil-eye-style')) return;
+  const s = document.createElement('style');
+  s.id = 'kil-eye-style';
+  s.textContent = `
+    .kil-eye-rel { position: relative !important; overflow: visible !important; }
+    .kil-eye-wrap{ position:relative; display:block; }
+    .kil-eye-btn{
+      position:absolute; top:50%; right:10px; transform:translateY(-50%);
+      display:inline-flex; align-items:center; justify-content:center;
+      background:transparent; border:0; padding:0; margin:0;
+      height:auto; width:auto; line-height:1; cursor:pointer; outline:none;
+      z-index: 10;                /* <-- stays above focused input */
+      pointer-events: auto;
+    }
+    .kil-eye-btn i{ font-size:16px; }
+    .kil-eye-pad { padding-right: 38px !important; }
+    .kil-eye-btn { flex: 0 0 auto; }
+  `;
+  document.head.appendChild(s);
+})();
+
+/** Find an anchor to absolutely-position the icon.
+ * - If inside .input-group ⇒ use that as relative container (we add .kil-eye-rel)
+ * - Else wrap the <input> with a relative .kil-eye-wrap
+ * Always adds padding-right to the specific input so text never overlaps the eye.
+ */
+function getEyeAnchor(input){
+  const ig = input.closest('.input-group');
+  if (ig) {
+    ig.classList.add('kil-eye-rel');
+    input.classList.add('kil-eye-pad');
+    return { anchor: ig };
+  }
+  // no input-group: wrap input so we can position inside
+  if (!input.parentElement.classList.contains('kil-eye-wrap')) {
+    const wrap = document.createElement('span');
+    wrap.className = 'kil-eye-wrap';
+    input.parentNode.insertBefore(wrap, input);
+    wrap.appendChild(input);
+  }
+  input.classList.add('kil-eye-pad');
+  return { anchor: input.parentElement }; // .kil-eye-wrap
+}
+
+
+function ensureEyeForPassword(input){
+  if (input.dataset.kileyeAttached === '1') return;
+  if (input.hasAttribute('data-kileye-false')) return;
+
+  const { anchor } = getEyeAnchor(input);
+  // safety: prevent clipping when input is focused
+  anchor.style.overflow = 'visible';
+
+  // Reuse if exists near this input
+  let btn = anchor.querySelector('.kil-eye-btn');
+  if (!btn) {
+    btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'kil-eye-btn';
+    btn.setAttribute('tabindex', '-1');
+    btn.setAttribute('aria-label', 'Show/Hide password');
+    btn.innerHTML = `<i class="fa fa-eye-slash" aria-hidden="true"></i>`;
+    anchor.appendChild(btn);
+  }
+
+  // Color support (per-field)
+  const color = input.getAttribute('data-kileye-color');
+  if (color) btn.style.color = color;
+
+  const icon = () => btn.querySelector('i');
+
+  function show(){
+    input.type = 'text';
+    if (icon()) { icon().classList.remove('fa-eye-slash'); icon().classList.add('fa-eye'); }
+  }
+  function hide(){
+    input.type = 'password';
+    if (icon()) { icon().classList.remove('fa-eye'); icon().classList.add('fa-eye-slash'); }
+  }
+  function toggle(){ (input.type === 'password') ? show() : hide(); }
+
+  // ── mode config: 'hold' | 'toggle' | 'fix' ────────────────────────────
+  const modeAttr    = (input.getAttribute('data-kileye-show') || 'hold').toLowerCase();
+  const initialAttr = (input.getAttribute('data-kileye-initial') || 'auto').toLowerCase(); // 'auto'|'on'|'off'
+
+  // initial state: 'fix' => on, else respect data-kileye-initial, else off
+  if (modeAttr === 'fix') {
+    show();
+  } else if (initialAttr === 'on') {
+    show();
+  } else if (initialAttr === 'off' || initialAttr === 'auto') {
+    hide();
+  }
+
+  // clear old listeners
+  btn.onmousedown = btn.onmouseup = btn.onmouseleave = btn.onclick = null;
+  btn.ontouchstart = btn.ontouchend = btn.ontouchcancel = null;
+
+  if (modeAttr === 'toggle' || modeAttr === 'fix') {
+    // click/tap toggles visibility
+    btn.onclick = (e)=>{ e.preventDefault(); toggle(); };
+    btn.addEventListener('touchstart', (e)=>{ e.preventDefault(); toggle(); }, {passive:false});
+  } else {
+    // HOLD mode (default)
+    btn.onmousedown = (e)=>{ e.preventDefault(); show(); };
+    btn.onmouseup   = ()=> hide();
+    btn.onmouseleave= ()=> hide();
+    btn.onblur      = ()=> hide();
+    // mobile hold
+    btn.addEventListener('touchstart', (e)=>{ e.preventDefault(); show(); }, {passive:false});
+    btn.addEventListener('touchend',   ()=> hide());
+    btn.addEventListener('touchcancel',()=> hide());
+  }
+
+  // If input loses focus in HOLD mode, ensure hide
+  input.addEventListener('blur', ()=> { if (modeAttr === 'hold') hide(); });
+
+  input.dataset.kileyeAttached = '1';
+}
+
+  return {
+    validateRequiredFields,
+    addRealTimeValidation,
+    validateForm,
+    addAsteriskToRequiredFields,
+    attachInputEvents,
+    addValidateFormToSubmitButtons,
+    validateKilvishInput,
+    addErrorMessage,
+    init: initKilvalidate,
+    initPasswordStrengthMeter,
+    normalizeRequiredStars
+  };
+});
+