Improved regex + use aria-invalid where possible

BookingSystem/app.py

@@ -3,14 +3,14 @@
 
 import flask
 from dateutil import parser
-from flask_session import Session
 from werkzeug.middleware.proxy_fix import ProxyFix
 
 import api
 import feide
 import routes
 from __init__ import logger
 from db import init_db
+from flask_session import Session
 
 
 def create_app() -> flask.Flask:
@@ -40,6 +40,10 @@ def _jinja2_filter_datetime(date, fmt='%d.%m.%Y') -> str:
     def _jinja2_filter_strftime(date, fmt='%d.%m.%Y') -> str:
         return datetime.fromtimestamp(float(date)).strftime(fmt)
 
+    @app.context_processor
+    def regex() -> dict:
+        return dict(regex_item=r'^(?:(?![\s])[ÆØÅæøåa-zA-Z0-9_\s\-]*[ÆØÅæøåa-zA-Z0-9_\-]+)$')
+
     @app.errorhandler(401)
     def unauthorized(_) -> flask.Response:
         logger.warning(f'Unauthorized access: {flask.request.url} from {flask.request.remote_addr}')

BookingSystem/templates/forms/return.html

@@ -1,7 +1,7 @@
 <form>
     <label for="id">Innlevering</label>
     <input type="text" name="id" id="id" placeholder="Skann (eller tast inn) løpenummeret for å levere inn" required
-           pattern="^[^\s][ÆØÅæøåa-zA-Z0-9_\s\-]+[^\s]">
+           pattern="{{ regex_item }}">
 
     <button type="submit">Lever</button>
 </form>

BookingSystem/templates/inventar_add.html

@@ -13,11 +13,11 @@ <h3>Her kan du legge til nytt inventar. Legg gjerne til flere, så forlater du b
     <form>
         <label for="id">Løpenummer</label>
         <input type="text" name="id" id="id" placeholder="Eksempel: A6500-01" required
-               pattern="^[^\s][ÆØÅæøåa-zA-Z0-9_\s\-]+[^\s]">
+               pattern="{{ regex_item }}">
 
         <label for="name">Navn</label>
         <input type="text" name="name" id="name" placeholder="Eksempel: Sony A6500" required
-               pattern="^[^\s][ÆØÅæøåa-zA-Z0-9_\s\-]+[^\s]">
+               pattern="{{ regex_item }}">
 
         <label for="category">Kategori</label>
         <select name="category" id="category" required>

BookingSystem/templates/inventar_edit.html

@@ -13,12 +13,12 @@ <h3>Redigerer {{ item.id }} ({{ item.name }})</h3>
     <form>
         <label for="id">Løpenummer</label>
         <input type="text" name="id" id="id" required placeholder="Eksempel: A6500-01"
-               pattern="^[^\s][ÆØÅæøåa-zA-Z0-9_\s\-]+[^\s]"
+               pattern="{{ regex_item }}"
                value="{{ item.id }}">
 
         <label for="name">Navn</label>
         <input type="text" name="name" id="name" required placeholder="Eksempel: Sony A6500"
-               pattern="^[^\s][ÆØÅæøåa-zA-Z0-9_\s\-]+[^\s]"
+               pattern="{{ regex_item }}"
                value="{{ item.name }}">
 
         <label for="category">Kategori</label>

BookingSystem/templates/partials/css.html

@@ -59,5 +59,4 @@
     width: auto !important;
   }
 
-
 </style>

BookingSystem/templates/partials/js.html

@@ -13,6 +13,16 @@
       $(this).find('.dropdown-content').first().stop(true, true).slideUp(105)
     });
 
+    // Update aria-invalid attribute on inputs and selects
+    let inputs = $('input');
+    inputs = inputs.add($('select'));
+    $(inputs).on('change', function () {
+      updateAriaInvalid(this);
+    });
+    $(inputs).each(function () {
+      updateAriaInvalid(this);
+    });
+
     // jconfirm defaults
     jconfirm.defaults = {
       theme: 'modern',
@@ -138,4 +148,14 @@
     sessionStorage.setItem('alert_type', type);
     sessionStorage.setItem('alert_fullscreen', 'true');
   }
+
+  function updateAriaInvalid(object) {
+    if ($(object).val() === '') {
+      $(object).removeAttr('aria-invalid');
+    } else if ($(object).is(':invalid')) {
+      $(object).attr('aria-invalid', 'true');
+    } else {
+      $(object).attr('aria-invalid', 'false');
+    }
+  }
 </script>

BookingSystem/templates/templates/chosen.html

@@ -55,4 +55,13 @@
   .chosen-results .highlighted {
     background: var(--dropdown-hover-background-color) !important;
   }
+
+
+  .chosen-container a.chosen-single:not(a.chosen-default) {
+    border: var(--border-width) solid var(--form-element-valid-border-color) !important;
+  }
+
+  .chosen-container ul:has(.search-choice) {
+    border: var(--border-width) solid var(--form-element-valid-border-color) !important;
+  }
 </style>