@jsenv/navi 0.0.1 → 0.1.0

package/src/validation/constraints/native_constraints.js

@@ -0,0 +1,313 @@
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation
+ */
+
+// this constraint is not really a native constraint and browser just not let this happen at all
+// in our case it's just here in case some code is wrongly calling "requestAction" or "checkValidity" on a disabled element
+export const DISABLED_CONSTRAINT = {
+  name: "disabled",
+  check: (element) => {
+    if (element.disabled) {
+      return `Ce champ est désactivé.`;
+    }
+    return null;
+  },
+};
+
+export const REQUIRED_CONSTRAINT = {
+  name: "required",
+  check: (element, { registerChange }) => {
+    if (!element.required) {
+      return null;
+    }
+    const requiredMessage = element.getAttribute("data-required-message");
+
+    if (element.type === "checkbox") {
+      if (!element.checked) {
+        return requiredMessage || `Veuillez cocher cette case.`;
+      }
+      return null;
+    }
+    if (element.type === "radio") {
+      // For radio buttons, check if any radio with the same name is selected
+      const name = element.name;
+      if (!name) {
+        // If no name, check just this radio
+        if (!element.checked) {
+          return requiredMessage || `Veuillez sélectionner une option.`;
+        }
+        return null;
+      }
+
+      const closestFieldset = element.closest("fieldset");
+      const fieldsetRequiredMessage = closestFieldset
+        ? closestFieldset.getAttribute("data-required-message")
+        : null;
+
+      // Find the container (form or closest fieldset)
+      const container = element.form || closestFieldset || document;
+      // Check if any radio with the same name is checked
+      const radioSelector = `input[type="radio"][name="${CSS.escape(name)}"]`;
+      const radiosWithSameName = container.querySelectorAll(radioSelector);
+      for (const radio of radiosWithSameName) {
+        if (radio.checked) {
+          return null; // At least one radio is selected
+        }
+        registerChange((onChange) => {
+          radio.addEventListener("change", onChange);
+          return () => {
+            radio.removeEventListener("change", onChange);
+          };
+        });
+      }
+
+      return {
+        message:
+          requiredMessage ||
+          fieldsetRequiredMessage ||
+          `Veuillez sélectionner une option.`,
+        target: closestFieldset
+          ? closestFieldset.querySelector("legend")
+          : undefined,
+      };
+    }
+    if (!element.value) {
+      return requiredMessage || `Veuillez remplir ce champ.`;
+    }
+    return null;
+  },
+};
+export const PATTERN_CONSTRAINT = {
+  name: "pattern",
+  check: (input) => {
+    const pattern = input.pattern;
+    if (!pattern) {
+      return null;
+    }
+    const value = input.value;
+    if (!value) {
+      return null;
+    }
+    const regex = new RegExp(pattern);
+    if (!regex.test(value)) {
+      const patternMessage = input.getAttribute("data-pattern-message");
+      if (patternMessage) {
+        return patternMessage;
+      }
+      let message = `Veuillez respecter le format requis.`;
+      const title = input.title;
+      if (title) {
+        message += `<br />${title}`;
+      }
+      return message;
+    }
+    return null;
+  },
+};
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/email#validation
+const emailregex =
+  /^[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])?)*$/;
+export const TYPE_EMAIL_CONSTRAINT = {
+  name: "type_email",
+  check: (input) => {
+    if (input.type !== "email") {
+      return null;
+    }
+    const value = input.value;
+    if (!value) {
+      return null;
+    }
+    if (!value.includes("@")) {
+      return `Veuillez inclure "@" dans l'adresse e-mail. Il manque un symbole "@" dans ${value}.`;
+    }
+    if (!emailregex.test(value)) {
+      return `Veuillez saisir une adresse e-mail valide.`;
+    }
+    return null;
+  },
+};
+
+export const MIN_LENGTH_CONSTRAINT = {
+  name: "min_length",
+  check: (element) => {
+    if (element.tagName === "INPUT") {
+      if (!INPUT_TYPE_SUPPORTING_MIN_LENGTH_SET.has(element.type)) {
+        return null;
+      }
+    } else if (element.tagName !== "TEXTAREA") {
+      return null;
+    }
+
+    const minLength = element.minLength;
+    if (minLength === -1) {
+      return null;
+    }
+
+    const value = element.value;
+    const valueLength = value.length;
+    if (valueLength === 0) {
+      return null;
+    }
+    if (valueLength < minLength) {
+      if (valueLength === 1) {
+        return `Ce champ doit contenir au moins ${minLength} caractère (il contient actuellement un seul caractère).`;
+      }
+      return `Ce champ doit contenir au moins ${minLength} caractères (il contient actuellement ${valueLength} caractères).`;
+    }
+    return null;
+  },
+};
+const INPUT_TYPE_SUPPORTING_MIN_LENGTH_SET = new Set([
+  "text",
+  "search",
+  "url",
+  "tel",
+  "email",
+  "password",
+]);
+
+export const MAX_LENGTH_CONSTRAINT = {
+  name: "max_length",
+  check: (element) => {
+    if (element.tagName === "INPUT") {
+      if (!INPUT_TYPE_SUPPORTING_MAX_LENGTH_SET.has(element.type)) {
+        return null;
+      }
+    } else if (element.tagName !== "TEXTAREA") {
+      return null;
+    }
+
+    const maxLength = element.maxLength;
+    if (maxLength === -1) {
+      return null;
+    }
+
+    const value = element.value;
+    const valueLength = value.length;
+    if (valueLength > maxLength) {
+      return `Ce champ doit contenir au maximum ${maxLength} caractères (il contient actuellement ${valueLength} caractères).`;
+    }
+    return null;
+  },
+};
+const INPUT_TYPE_SUPPORTING_MAX_LENGTH_SET = new Set(
+  INPUT_TYPE_SUPPORTING_MIN_LENGTH_SET,
+);
+
+export const TYPE_NUMBER_CONSTRAINT = {
+  name: "type_number",
+  check: (element) => {
+    if (element.tagName !== "INPUT") {
+      return null;
+    }
+    if (element.type !== "number") {
+      return null;
+    }
+    if (element.value === "") {
+      return null;
+    }
+    const value = element.valueAsNumber;
+    if (isNaN(value)) {
+      return `Doit être un nombre.`;
+    }
+    return null;
+  },
+};
+
+export const MIN_CONSTRAINT = {
+  name: "min",
+  check: (element) => {
+    if (element.tagName !== "INPUT") {
+      return null;
+    }
+    if (element.type === "number") {
+      const minString = element.min;
+      if (minString === "") {
+        return null;
+      }
+      const minNumber = parseFloat(minString);
+      if (isNaN(minNumber)) {
+        return null;
+      }
+      const valueAsNumber = element.valueAsNumber;
+      if (isNaN(valueAsNumber)) {
+        return null;
+      }
+      if (valueAsNumber < minNumber) {
+        const minMessage = element.getAttribute("data-min-message");
+        return (
+          minMessage ||
+          `Doit être supérieur ou égal à <strong>${minString}</strong>.`
+        );
+      }
+      return null;
+    }
+    if (element.type === "time") {
+      const min = element.min;
+      if (min === undefined) {
+        return null;
+      }
+      const [minHours, minMinutes] = min.split(":").map(Number);
+      const value = element.value;
+      const [hours, minutes] = value.split(":").map(Number);
+      if (hours < minHours) {
+        return `Doit être <strong>${min}</strong> ou plus.`;
+      }
+      if (hours === minHours && minMinutes < minutes) {
+        return `Doit être <strong>${min}</strong> ou plus.`;
+      }
+      return null;
+    }
+    // "range"
+    // - user interface do not let user enter anything outside the boundaries
+    // - when setting value via js browser enforce boundaries too
+    // "date", "month", "week", "datetime-local"
+    // - same as "range"
+    return null;
+  },
+};
+
+export const MAX_CONSTRAINT = {
+  name: "max",
+  check: (element) => {
+    if (element.tagName !== "INPUT") {
+      return null;
+    }
+    if (element.type === "number") {
+      const maxString = element.max;
+      if (maxString === "") {
+        return null;
+      }
+      const maxNumber = parseFloat(maxString);
+      if (isNaN(maxNumber)) {
+        return null;
+      }
+      const valueAsNumber = element.valueAsNumber;
+      if (isNaN(valueAsNumber)) {
+        return null;
+      }
+      if (valueAsNumber > maxNumber) {
+        const maxMessage = element.getAttribute("data-max-message");
+        return maxMessage || `Doit être <strong>${maxString}</strong> ou plus.`;
+      }
+      return null;
+    }
+    if (element.type === "time") {
+      const max = element.min;
+      if (max === undefined) {
+        return null;
+      }
+      const [maxHours, maxMinutes] = max.split(":").map(Number);
+      const value = element.value;
+      const [hours, minutes] = value.split(":").map(Number);
+      if (hours > maxHours) {
+        return `Doit être <strong>${max}</strong> ou moins.`;
+      }
+      if (hours === maxHours && maxMinutes > minutes) {
+        return `Doit être <strong>${max}</strong> ou moins.`;
+      }
+      return null;
+    }
+    return null;
+  },
+};

package/src/validation/constraints/readonly_constraint.js

@@ -0,0 +1,36 @@
+export const READONLY_CONSTRAINT = {
+  name: "readonly",
+  check: (element, { skipReadonly }) => {
+    if (skipReadonly) {
+      return null;
+    }
+    if (!element.readonly && !element.hasAttribute("data-readonly")) {
+      return null;
+    }
+    const readonlySilent = element.hasAttribute("data-readonly-silent");
+    if (readonlySilent) {
+      return { silent: true };
+    }
+    const readonlyMessage = element.getAttribute("data-readonly-message");
+    if (readonlyMessage) {
+      return {
+        message: readonlyMessage,
+        level: "info",
+      };
+    }
+    const isBusy = element.getAttribute("aria-busy") === "true";
+    if (isBusy) {
+      return {
+        message: `Cette action est en cours. Veuillez patienter.`,
+        level: "info",
+      };
+    }
+    return {
+      message:
+        element.tagName === "BUTTON"
+          ? `Cet action n'est pas disponible pour l'instant.`
+          : `Cet élément est en lecture seule et ne peut pas être modifié.`,
+      level: "info",
+    };
+  },
+};

package/src/validation/constraints/single_space_constraint.js

@@ -0,0 +1,13 @@
+export const SINGLE_SPACE_CONSTRAINT = {
+  name: "single_space",
+  check: (input) => {
+    const inputValue = input.value;
+    const hasLeadingSpace = inputValue.startsWith(" ");
+    const hasTrailingSpace = inputValue.endsWith(" ");
+    const hasDoubleSpace = inputValue.includes("  ");
+    if (hasLeadingSpace || hasDoubleSpace || hasTrailingSpace) {
+      return "Spaces at the beginning, end, or consecutive spaces are not allowed";
+    }
+    return "";
+  },
+};