@ajosecortes/form-guard 1.0.2

package/dist/form-guard.js

@@ -0,0 +1,580 @@
+var v = Object.defineProperty;
+var b = (r, e, t) => e in r ? v(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var u = (r, e, t) => b(r, typeof e != "symbol" ? e + "" : e, t);
+const y = {
+  required: "This field is required",
+  email: "Please enter a valid email address",
+  minLength: "Must be at least {0} characters",
+  maxLength: "Must be no more than {0} characters",
+  number: "Must be a number",
+  integer: "Must be an integer",
+  min: "Must be at least {0}",
+  max: "Must be no more than {0}",
+  pattern: "Invalid format",
+  sameAs: "Must match {0}",
+  files: "Please select at least one file",
+  minFiles: "Please select at least {0} files",
+  maxFiles: "Please select at most {0} files",
+  strongPassword: "Password must contain uppercase, lowercase, digit, and special character"
+};
+function d(r, e, t) {
+  const s = (r == null ? void 0 : r.errorContainer) ?? (e == null ? void 0 : e.errorContainer);
+  if (!s) return null;
+  if (s instanceof HTMLElement) return s;
+  const i = s;
+  if (t != null && t.closest) {
+    const n = t.closest(i);
+    if (n) return n;
+  }
+  return document.querySelector(i);
+}
+function h(r, e, t) {
+  const s = (e == null ? void 0 : e.errorClass) ?? (t == null ? void 0 : t.errorClass) ?? "form-guard-error", i = (e == null ? void 0 : e.successClass) ?? (t == null ? void 0 : t.successClass) ?? "form-guard-success", n = (t == null ? void 0 : t.pendingClass) ?? "form-guard-pending";
+  r.classList.remove(s), r.classList.remove(i), r.classList.remove(n), r.removeAttribute("aria-invalid"), r.removeAttribute("aria-describedby");
+  const a = d(e, t, r);
+  a && (a.innerHTML = "", a.setAttribute("role", "alert"));
+}
+function f(r, e, t) {
+  const s = (e == null ? void 0 : e.errorClass) ?? (t == null ? void 0 : t.errorClass) ?? "form-guard-error", i = (e == null ? void 0 : e.successClass) ?? (t == null ? void 0 : t.successClass) ?? "form-guard-success", n = (t == null ? void 0 : t.pendingClass) ?? "form-guard-pending";
+  r.classList.remove(s), r.classList.remove(i), r.classList.add(n), r.removeAttribute("aria-invalid"), r.removeAttribute("aria-describedby");
+  const a = d(e, t, r);
+  a && (a.innerHTML = '<span class="form-guard-message form-guard-pending-text">Checking...</span>', a.setAttribute("role", "status"), a.setAttribute("aria-live", "polite"));
+}
+function E(r, e, t, s) {
+  const i = (t == null ? void 0 : t.errorClass) ?? (s == null ? void 0 : s.errorClass) ?? "form-guard-error", n = (t == null ? void 0 : t.successClass) ?? (s == null ? void 0 : s.successClass) ?? "form-guard-success", a = (s == null ? void 0 : s.pendingClass) ?? "form-guard-pending";
+  r.classList.add(i), r.classList.remove(n), r.classList.remove(a), r.setAttribute("aria-invalid", "true");
+  const o = d(t, s, r);
+  if (o) {
+    const c = `form-guard-error-${e.field}`;
+    o.innerHTML = `<span id="${c}" class="form-guard-message">${A(e.message)}</span>`, o.setAttribute("role", "alert"), r.setAttribute("aria-describedby", c);
+  }
+}
+function L(r, e, t) {
+  const s = (e == null ? void 0 : e.errorClass) ?? (t == null ? void 0 : t.errorClass) ?? "form-guard-error", i = (e == null ? void 0 : e.successClass) ?? (t == null ? void 0 : t.successClass) ?? "form-guard-success", n = (t == null ? void 0 : t.pendingClass) ?? "form-guard-pending";
+  r.classList.remove(s), r.classList.add(i), r.classList.remove(n), r.removeAttribute("aria-invalid"), r.removeAttribute("aria-describedby");
+  const a = d(e, t, r);
+  a && (a.innerHTML = "");
+}
+function g(r) {
+  for (const { element: e, errors: t } of r)
+    if (t.length > 0) {
+      e.focus();
+      return;
+    }
+}
+function A(r) {
+  const e = document.createElement("div");
+  return e.textContent = r, e.innerHTML;
+}
+function m(r, e) {
+  return r.startsWith("#") || r.startsWith(".") || r.includes("[") ? e.querySelector(r) : e.querySelector(`[name="${r}"]`);
+}
+function p(r, e) {
+  return r.startsWith("#") || r.startsWith(".") || r.includes("[") ? Array.from(
+    e.querySelectorAll(r)
+  ) : Array.from(
+    e.querySelectorAll(
+      `[name="${r}"]`
+    )
+  );
+}
+function F(r) {
+  return r instanceof HTMLInputElement && r.type === "file" ? r.files : r instanceof HTMLInputElement && (r.type === "checkbox" || r.type === "radio") ? r.checked : r instanceof HTMLSelectElement && r.multiple ? Array.from(r.selectedOptions).map((t) => t.value) : r.value;
+}
+function k(r) {
+  const e = [];
+  for (const t of r)
+    t instanceof HTMLInputElement && (t.type === "checkbox" || t.type === "radio") && t.checked && e.push(t.value);
+  if (r.length > 0) {
+    const t = r[0];
+    if (t instanceof HTMLInputElement && t.type === "radio")
+      return e.length > 0 ? e[0] : "";
+  }
+  return e;
+}
+function M(r, e) {
+  var t;
+  return e != null && e.label ? e.label : r.labels && r.labels.length > 0 ? ((t = r.labels[0].textContent) == null ? void 0 : t.trim()) ?? r.name : r.name || "field";
+}
+function l(r, e, t, s, i) {
+  return { code: r, message: e, field: t, rule: s, value: i, meta: {} };
+}
+class S {
+  constructor(e, t) {
+    u(this, "form");
+    u(this, "config");
+    u(this, "fields", /* @__PURE__ */ new Map());
+    u(this, "groups", /* @__PURE__ */ new Map());
+    u(this, "locale");
+    u(this, "successCallbacks", []);
+    u(this, "failCallbacks", []);
+    u(this, "validateCallbacks", []);
+    u(this, "boundSubmit", null);
+    u(this, "boundBlur", null);
+    u(this, "boundChange", null);
+    u(this, "destroyed", !1);
+    u(this, "handleSubmit", async (e) => {
+      if (this.config.mode !== "onSubmit") return;
+      e.preventDefault(), await this.validate() && this.form.submit();
+    });
+    if (this.config = {
+      mode: "onSubmit",
+      focusOnError: !0,
+      lockForm: !1,
+      collectAll: !1,
+      debounceMs: 0,
+      ...t
+    }, this.locale = { ...y, ...t == null ? void 0 : t.locale }, typeof e == "string") {
+      const s = document.querySelector(e);
+      if (!s)
+        throw new Error(`FormGuard: form not found for selector "${e}"`);
+      this.form = s;
+    } else
+      this.form = e;
+    this.bindEvents();
+  }
+  addField(e, t, s) {
+    if (this.destroyed) return this;
+    const i = e, n = m(e, this.form);
+    if (!n)
+      return this.config.debug && console.warn(`FormGuard: field "${e}" not found`), this;
+    if (this.fields.set(i, {
+      field: n,
+      rules: [...t],
+      config: s ?? {},
+      errors: [],
+      validated: !1,
+      pending: !1,
+      abortController: null,
+      debounceTimer: null
+    }), this.config.mode === "onBlur" && n.addEventListener("blur", this.handleBlur(i)), this.config.mode === "onChange") {
+      const a = n instanceof HTMLInputElement && (n.type === "checkbox" || n.type === "radio") ? "change" : "input";
+      n.addEventListener(a, this.handleChange(i));
+    }
+    return this;
+  }
+  removeField(e) {
+    const t = this.fields.get(e);
+    return t && (this.cancelFieldValidation(t), h(t.field, t.config, this.config), t.field.removeEventListener("blur", this.handleBlur(e)), t.field.removeEventListener("input", this.handleChange(e)), t.field.removeEventListener("change", this.handleChange(e))), this.fields.delete(e), this;
+  }
+  addGroup(e, t, s) {
+    if (this.destroyed) return this;
+    const i = p(e, this.form);
+    if (i.length === 0)
+      return this.config.debug && console.warn(`FormGuard: no elements found for group "${e}"`), this;
+    if (this.groups.set(e, {
+      elements: i,
+      rules: [...t],
+      config: s ?? {},
+      errors: [],
+      validated: !1,
+      pending: !1,
+      abortController: null,
+      debounceTimer: null
+    }), this.config.mode === "onBlur" || this.config.mode === "onChange")
+      for (const n of i) {
+        n.addEventListener("blur", this.handleGroupEvent(e));
+        const a = n instanceof HTMLInputElement && (n.type === "checkbox" || n.type === "radio") ? "change" : "input";
+        n.addEventListener(a, this.handleGroupEvent(e));
+      }
+    return this;
+  }
+  removeGroup(e) {
+    const t = this.groups.get(e);
+    if (t) {
+      this.cancelFieldValidation(t);
+      for (const s of t.elements)
+        s.removeEventListener("blur", this.handleGroupEvent(e)), s.removeEventListener("input", this.handleGroupEvent(e)), s.removeEventListener("change", this.handleGroupEvent(e));
+    }
+    return this.groups.delete(e), this;
+  }
+  async validate(e = !1) {
+    if (this.destroyed) return !1;
+    for (const [, i] of this.fields)
+      !e && i.validated || await this.validateFieldState(i);
+    for (const [, i] of this.groups)
+      !e && i.validated || await this.validateGroupState(i);
+    const t = this.getAllErrors(), s = t.length === 0;
+    if (this.fireHooks(s, t), !s && this.config.focusOnError) {
+      const i = [];
+      for (const [, n] of this.fields)
+        n.errors.length > 0 && i.push({ element: n.field, errors: n.errors });
+      g(i);
+    }
+    return s;
+  }
+  async validateField(e) {
+    const t = this.fields.get(e);
+    return t ? (await this.validateFieldState(t), t.errors.length === 0) : !0;
+  }
+  async validateGroup(e) {
+    const t = this.groups.get(e);
+    return t ? (await this.validateGroupState(t), t.errors.length === 0) : !0;
+  }
+  async revalidate() {
+    for (const [, e] of this.fields)
+      e.validated = !1;
+    for (const [, e] of this.groups)
+      e.validated = !1;
+    return this.validate(!0);
+  }
+  async revalidateField(e) {
+    const t = this.fields.get(e);
+    return t ? (t.validated = !1, await this.validateFieldState(t), t.errors.length === 0) : !0;
+  }
+  async revalidateGroup(e) {
+    const t = this.groups.get(e);
+    return t ? (t.validated = !1, await this.validateGroupState(t), t.errors.length === 0) : !0;
+  }
+  clearErrors() {
+    for (const [, e] of this.fields)
+      this.cancelFieldValidation(e), e.errors = [], e.validated = !1, e.pending = !1, h(e.field, e.config, this.config);
+    for (const [, e] of this.groups)
+      this.cancelFieldValidation(e), e.errors = [], e.validated = !1, e.pending = !1;
+    return this;
+  }
+  refresh() {
+    const e = [...this.fields.entries()];
+    for (const [s, i] of e) {
+      const n = m(s, this.form);
+      n ? i.field = n : this.fields.delete(s);
+    }
+    const t = [...this.groups.entries()];
+    for (const [s, i] of t) {
+      const n = p(s, this.form);
+      n.length > 0 ? i.elements = n : this.groups.delete(s);
+    }
+    return this;
+  }
+  destroy() {
+    this.unbindEvents();
+    for (const [e, t] of this.fields)
+      this.cancelFieldValidation(t), h(t.field, t.config, this.config), t.field.removeEventListener("blur", this.handleBlur(e)), t.field.removeEventListener("input", this.handleChange(e)), t.field.removeEventListener("change", this.handleChange(e));
+    for (const [e, t] of this.groups) {
+      this.cancelFieldValidation(t);
+      for (const s of t.elements)
+        s.removeEventListener("blur", this.handleGroupEvent(e)), s.removeEventListener("input", this.handleGroupEvent(e)), s.removeEventListener("change", this.handleGroupEvent(e));
+    }
+    this.fields.clear(), this.groups.clear(), this.successCallbacks.length = 0, this.failCallbacks.length = 0, this.validateCallbacks.length = 0, this.destroyed = !0;
+  }
+  setLocale(e) {
+    return this.locale = { ...this.locale, ...e }, this;
+  }
+  onSuccess(e) {
+    return this.successCallbacks.push(e), this;
+  }
+  onFail(e) {
+    return this.failCallbacks.push(e), this;
+  }
+  onValidate(e) {
+    return this.validateCallbacks.push(e), this;
+  }
+  getErrors() {
+    return this.getAllErrors();
+  }
+  getFieldErrors(e) {
+    var t;
+    return ((t = this.fields.get(e)) == null ? void 0 : t.errors) ?? [];
+  }
+  getGroupErrors(e) {
+    var t;
+    return ((t = this.groups.get(e)) == null ? void 0 : t.errors) ?? [];
+  }
+  isFieldPending(e) {
+    var t;
+    return ((t = this.fields.get(e)) == null ? void 0 : t.pending) ?? !1;
+  }
+  isPending() {
+    for (const [, e] of this.fields)
+      if (e.pending) return !0;
+    for (const [, e] of this.groups)
+      if (e.pending) return !0;
+    return !1;
+  }
+  async validateFieldState(e) {
+    this.cancelFieldValidation(e);
+    const t = new AbortController();
+    e.abortController = t, e.pending = !0, e.errors = [], f(e.field, e.config, this.config);
+    const s = F(e.field), i = M(e.field, e.config);
+    try {
+      for (const n of e.rules) {
+        if (t.signal.aborted) break;
+        try {
+          const a = n.validate(s, this.form, e.config, t.signal), o = a instanceof Promise ? await a : a;
+          if (t.signal.aborted) break;
+          if (o === !0 || o === void 0)
+            continue;
+          let c;
+          if (typeof o == "string" ? c = o : typeof o == "object" && o !== null && "message" in o ? c = String(o.message) : c = this.getMessage(n.name, e.config, i), e.errors.push(
+            l(n.name, c, e.field.name || i, n.name, s)
+          ), !this.config.collectAll) break;
+        } catch (a) {
+          if (t.signal.aborted || (this.config.debug && console.error(`FormGuard: rule "${n.name}" threw:`, a), e.errors.push(
+            l(
+              n.name,
+              this.getMessage(n.name, e.config, i),
+              e.field.name || i,
+              n.name,
+              s
+            )
+          ), !this.config.collectAll)) break;
+        }
+      }
+    } finally {
+      e.abortController === t && (e.pending = !1, e.validated = !0, e.abortController = null, t.signal.aborted || (e.errors.length > 0 ? E(e.field, e.errors[0], e.config, this.config) : L(e.field, e.config, this.config)));
+    }
+  }
+  async validateGroupState(e) {
+    this.cancelFieldValidation(e);
+    const t = new AbortController();
+    e.abortController = t, e.pending = !0, e.errors = [];
+    const s = k(e.elements), i = e.config.label ?? e.config.name ?? "group";
+    try {
+      for (const n of e.rules) {
+        if (t.signal.aborted) break;
+        try {
+          const a = n.validate(s, this.form, e.config, t.signal), o = a instanceof Promise ? await a : a;
+          if (t.signal.aborted) break;
+          if (o === !0 || o === void 0)
+            continue;
+          let c;
+          if (typeof o == "string" ? c = o : c = this.getMessage(n.name, e.config, i), e.errors.push(
+            l(n.name, c, i, n.name, s)
+          ), !this.config.collectAll) break;
+        } catch (a) {
+          if (t.signal.aborted || (this.config.debug && console.error(`FormGuard: rule "${n.name}" threw:`, a), e.errors.push(
+            l(n.name, this.getMessage(n.name, e.config, i), i, n.name, s)
+          ), !this.config.collectAll)) break;
+        }
+      }
+    } finally {
+      e.abortController === t && (e.pending = !1, e.validated = !0, e.abortController = null);
+    }
+  }
+  cancelFieldValidation(e) {
+    e.debounceTimer !== null && (clearTimeout(e.debounceTimer), e.debounceTimer = null), e.abortController && (e.abortController.abort(), e.abortController = null, e.pending = !1);
+  }
+  getMessage(e, t, s) {
+    var n;
+    const i = (n = t == null ? void 0 : t.messages) == null ? void 0 : n[e];
+    return i || (this.locale[e] ?? e);
+  }
+  getAllErrors() {
+    const e = [];
+    for (const [, t] of this.fields)
+      e.push(...t.errors);
+    for (const [, t] of this.groups)
+      e.push(...t.errors);
+    return e;
+  }
+  fireHooks(e, t) {
+    const s = {};
+    for (const [a, o] of this.fields)
+      o.errors.length > 0 && (s[a] = [...o.errors]);
+    const i = {};
+    for (const [a, o] of this.groups)
+      o.errors.length > 0 && (i[a] = [...o.errors]);
+    const n = { valid: e, errors: t, fields: s, groups: i };
+    for (const a of this.validateCallbacks)
+      a(n);
+    if (e)
+      for (const a of this.successCallbacks)
+        a();
+    else
+      for (const a of this.failCallbacks)
+        a(t);
+  }
+  handleBlur(e) {
+    return () => {
+      const t = this.fields.get(e);
+      t && this.debounceValidate(() => this.validateFieldState(t), t);
+    };
+  }
+  handleChange(e) {
+    return () => {
+      const t = this.fields.get(e);
+      t && (t.validated = !1, this.debounceValidate(() => this.validateFieldState(t), t));
+    };
+  }
+  handleGroupEvent(e) {
+    return () => {
+      const t = this.groups.get(e);
+      t && (t.validated = !1, this.debounceValidate(() => this.validateGroupState(t), t));
+    };
+  }
+  debounceValidate(e, t) {
+    const s = "config" in t && "debounceMs" in t.config ? t.config.debounceMs ?? this.config.debounceMs ?? 0 : this.config.debounceMs ?? 0;
+    s && s > 0 ? (t.debounceTimer !== null && clearTimeout(t.debounceTimer), t.pending = !0, t instanceof Object && "field" in t && f(t.field, t.config, this.config), t.debounceTimer = setTimeout(() => {
+      t.debounceTimer = null, e();
+    }, s)) : e();
+  }
+  bindEvents() {
+    this.config.mode === "onSubmit" && (this.boundSubmit = this.handleSubmit.bind(this), this.form.addEventListener("submit", this.boundSubmit), this.form.setAttribute("novalidate", ""));
+  }
+  unbindEvents() {
+    this.boundSubmit && (this.form.removeEventListener("submit", this.boundSubmit), this.boundSubmit = null), this.boundBlur && (this.form.removeEventListener("blur", this.boundBlur), this.boundBlur = null), this.boundChange && (this.form.removeEventListener("input", this.boundChange), this.boundChange = null), this.form.removeAttribute("novalidate");
+  }
+}
+const T = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.[a-zA-Z]{2,}$/;
+function w(r) {
+  return {
+    name: "required",
+    validate(e) {
+      return typeof e == "boolean" ? e === !0 || r || !1 : typeof e == "string" ? e.trim().length > 0 || r || !1 : e instanceof FileList || Array.isArray(e) ? e.length > 0 || r || !1 : e != null && e !== "" || r || !1;
+    }
+  };
+}
+function H(r) {
+  return {
+    name: "email",
+    validate(e) {
+      return typeof e != "string" || e.trim() === "" ? !0 : T.test(e.trim()) || r || !1;
+    }
+  };
+}
+function x(r, e) {
+  return {
+    name: "minLength",
+    validate(t) {
+      const s = typeof t == "string" ? t.trim().length : String(t ?? "").length;
+      return s === 0 ? !0 : s >= r || e || !1;
+    }
+  };
+}
+function V(r, e) {
+  return {
+    name: "maxLength",
+    validate(t) {
+      return (typeof t == "string" ? t.trim().length : String(t ?? "").length) <= r || e || !1;
+    }
+  };
+}
+function P(r) {
+  return {
+    name: "number",
+    validate(e) {
+      return typeof e != "string" || e.trim() === "" ? !0 : !isNaN(Number(e)) || r || !1;
+    }
+  };
+}
+function I(r) {
+  return {
+    name: "integer",
+    validate(e) {
+      if (typeof e != "string" || e.trim() === "") return !0;
+      const t = Number(e);
+      return !isNaN(t) && Number.isInteger(t) || r || !1;
+    }
+  };
+}
+function $(r, e) {
+  return {
+    name: "min",
+    validate(t) {
+      if (typeof t != "string" || t.trim() === "") return !0;
+      const s = Number(t);
+      return isNaN(s) ? !0 : s >= r || e || !1;
+    }
+  };
+}
+function q(r, e) {
+  return {
+    name: "max",
+    validate(t) {
+      if (typeof t != "string" || t.trim() === "") return !0;
+      const s = Number(t);
+      return isNaN(s) ? !0 : s <= r || e || !1;
+    }
+  };
+}
+function N(r, e) {
+  return {
+    name: "pattern",
+    validate(t) {
+      return typeof t != "string" || t.trim() === "" ? !0 : r.test(t) || e || !1;
+    }
+  };
+}
+function B(r, e) {
+  return {
+    name: "sameAs",
+    validate(t, s) {
+      const i = s.querySelector(
+        `[name="${r}"]`
+      );
+      if (!i) return !0;
+      const n = typeof t == "string" ? t : "", a = i instanceof HTMLInputElement && (i.type === "checkbox" || i.type === "radio") ? i.checked : i.value;
+      return n === String(a) || e || !1;
+    }
+  };
+}
+function _(r) {
+  return {
+    name: "files",
+    validate(e) {
+      return e instanceof FileList ? e.length > 0 || r || !1 : !0;
+    }
+  };
+}
+function z(r, e) {
+  return {
+    name: "minFiles",
+    validate(t) {
+      return !(t instanceof FileList) || t.length === 0 ? !0 : t.length >= r || e || !1;
+    }
+  };
+}
+function Z(r, e) {
+  return {
+    name: "maxFiles",
+    validate(t) {
+      return t instanceof FileList ? t.length <= r || e || !1 : !0;
+    }
+  };
+}
+function O(r, e) {
+  return {
+    name: e ?? "custom",
+    validate(t, s, i, n) {
+      return r(t, s, n);
+    }
+  };
+}
+function W(r, e) {
+  return {
+    name: (e == null ? void 0 : e.name) ?? "async",
+    validate(t, s, i, n) {
+      return r(t, s, n);
+    }
+  };
+}
+function D(r) {
+  const e = /[A-Z]/, t = /[a-z]/, s = /\d/, i = /[!@#$%^&*(),.?":{}|<>_\-+=\[\]\\;'/`~]/;
+  return {
+    name: "strongPassword",
+    validate(n) {
+      return typeof n != "string" || n.trim() === "" ? !0 : e.test(n) && t.test(n) && s.test(n) && i.test(n) && n.length >= 8 || r || !1;
+    }
+  };
+}
+export {
+  S as FormGuard,
+  W as asyncRule,
+  O as custom,
+  H as email,
+  y as en,
+  _ as files,
+  I as integer,
+  q as max,
+  Z as maxFiles,
+  V as maxLength,
+  $ as min,
+  z as minFiles,
+  x as minLength,
+  P as number,
+  N as pattern,
+  w as required,
+  B as sameAs,
+  D as strongPassword
+};
+//# sourceMappingURL=form-guard.js.map