add iban validation

js/index.js

@@ -1,3 +1,5 @@
+import { testIban } from "./iban.js";
+
 // bulma hamburger menu
 document.addEventListener('DOMContentLoaded', () => {
   // Get all "navbar-burger" elements
@@ -38,7 +40,7 @@ for (const l of i18nSupported) {
   langSelector.appendChild(a);
 }
 
-changeLanguage = (l) => {
+const changeLanguage = (l) => {
   const lang = i18nSupported.includes(l) ? l : "en";
   console.log(`Switching language to ${lang}`);
   document.querySelectorAll("[data-i18n]").forEach(el => {
@@ -50,7 +52,7 @@ changeLanguage = (l) => {
   saveFormData();
 };
 
-saveFormData = () => {
+const saveFormData = () => {
   localStorage.setItem("bezahlbrudiFormData", JSON.stringify({
     name: document.querySelector("#name input").value,
     iban: document.querySelector("#iban input").value.toUpperCase(),
@@ -63,28 +65,36 @@ saveFormData = () => {
 
 // Field data checks
 
-validateName = (target) => {
-  if (target.value.length == 0) return
-  if (target.value.length > 0 && target.value.length <= 70) {
-    target.classList.remove("is-danger")
-    document.querySelector("#name div span").innerHTML = "&#x2705;";
-    if (document.querySelector("#name p")) {
-      document.querySelector("#name p").remove();
+const validateName = (target) => {
+  if (target.value.length > 0) {
+    if (target.value.length <= 70) {
+      target.classList.remove("is-danger")
+      document.querySelector("#name div span").innerHTML = "&#x2705;";
+      if (document.querySelector("#name p")) {
+        document.querySelector("#name p").remove();
+      }
+    } else {
+      target.classList.add("is-danger")
+      document.querySelector("#name div span").innerHTML = "&#x274C;";
+
+      if (!document.querySelector("#name p")) {
+        const help = document.createElement("p");
+        help.classList.add("help", "is-danger");
+        help.textContent = "Name can only have 70 characters.";
+        document.querySelector("#name").appendChild(help);
+      }
     }
   } else {
-    target.classList.add("is-danger")
-    document.querySelector("#name div span").innerHTML = "&#x274C;";
-
-    if (!document.querySelector("#name p")) {
-      const help = document.createElement("p");
-      help.classList.add("help", "is-danger");
-      help.textContent = "Name can only have 70 characters.";
-      document.querySelector("#name").appendChild(help);
+    // empty field with no validation icon
+    target.classList.remove("is-danger");
+    document.querySelector("#name div span").innerHTML = "";
+    if (document.querySelector("#name p")) {
+      document.querySelector("#name p").remove();
     }
   }
 }
 
-validateBic = (target) => {
+const validateBic = (target) => {
   if (target.value.length == 0) return
   const re = /^[a-z]{6}[2-9a-z][0-9a-np-z]([a-z0-9]{3}|x{3})?$/i;
 
@@ -107,33 +117,42 @@ validateBic = (target) => {
   }
 }
 
-validateIban = (target) => {
-  if (target.value.length == 0) return
-  // IBANs are fucking complicated. this is a hugely simplified check
+const validateIban = (target) => {
+  // IBANs are fucking complicated
   // If you want to know more look here:
   // https://www.swift.com/standards/data-standards/iban-international-bank-account-number
-  const re = /^[a-z]{2}[0-9a-z]+$/i;
 
-  if (re.test(target.value)) {
-    target.classList.remove("is-danger")
-    document.querySelector("#iban div span").innerHTML = "&#x2705;";
-    if (document.querySelector("#iban p")) {
-      document.querySelector("#iban p").remove();
+  // Validates ISO 13616 compliant countries (v99, Dec 2024)
+  // ISO 3166-1 country code + 2 check digits + up to 30 alphanumeric chars
+  if (target.value.length > 4) {
+    const message = testIban(target.value);
+    if (message === "") {
+      target.classList.remove("is-danger");
+      document.querySelector("#iban div span").innerHTML = "&#x2705;";
+      if (document.querySelector("#iban p")) {
+        document.querySelector("#iban p").remove();
+      }
+    } else {
+      target.classList.add("is-danger");
+      document.querySelector("#iban div span").innerHTML = "&#x274C;";
+      if (!document.querySelector("#iban p")) {
+        const help = document.createElement("p");
+        help.classList.add("help", "is-danger");
+        help.textContent = message;
+        document.querySelector("#iban").appendChild(help);
+      }
     }
   } else {
-    target.classList.add("is-danger")
-    document.querySelector("#iban div span").innerHTML = "&#x274C;";
-
-    if (!document.querySelector("#iban p")) {
-      const help = document.createElement("p");
-      help.classList.add("help", "is-danger");
-      help.textContent = "IBAN is invalid";
-      document.querySelector("#iban").appendChild(help);
+    // empty field with no validation icon
+    target.classList.remove("is-danger");
+    document.querySelector("#iban div span").innerHTML = "";
+    if (document.querySelector("#iban p")) {
+      document.querySelector("#iban p").remove();
     }
   }
 }
 
-validateAmount = (target) => {
+const validateAmount = (target) => {
   if (target.value == 0) return
   if (parseFloat(target.value) > 0 && target.value.toString() === parseFloat(target.value).toFixed(2).toString()) {
     target.value = parseFloat(target.value).toFixed(2);
@@ -145,7 +164,7 @@ validateAmount = (target) => {
   }
 }
 
-validatePurpose = (target) => {
+const validatePurpose = (target) => {
   if (target.value.length == 0) return
   const re = /[a-zA-Z0-9\/?:().,'+\- ]{1,140}/i;
 
@@ -208,7 +227,7 @@ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (ev
 });
 
 // qr code generator
-regenerate = () => {
+const regenerate = () => {
   document.querySelector('#qr-code').innerHTML = "";
   if (document.querySelector("#name input").classList.contains("is-danger")) {
     console.error("Error in name");