Merge pull request #53 from eurofurence/bugfix/31-communicate-nicknam…

…e-restrictions-better_v2

Added some custom client-side form validation

resources/assets/js/forms.js

@@ -423,3 +423,33 @@ ready(() => {
     });
   });
 });
+
+/**
+ * Input validation for text inputs using regex and browser functionality.
+ * This requires the data attributes validationre and validationtxt on
+ * text input elements.
+ * HTML5 input validation using the pattern attribute does not allow
+ * setting regex options; Critter system server-side regex validates
+ * non-matching, HTML5 validates matching strings; Bootstrap validation
+ * is not accessible (ARIA)
+ */
+ready(() => {
+  const elements = document.querySelectorAll('input[type="text"][data-validationre][data-validationtxt]');
+  elements.forEach((inputElement) => {
+    inputElement.addEventListener('input', (event) => {
+      // Split regex literal-as-string back into components, then create new RexExp object
+      let reArr = inputElement.dataset.validationre.split('/');
+      reArr.shift(); // Drop first slash
+      const reOpt = reArr.pop(); // Get regex options after last slash
+      const rePat = reArr.join('/'); // Reinsert slashes into actual pattern
+      const validationRexEx = new RegExp(rePat, reOpt);
+      const reMatch = validationRexEx.test(inputElement.value);
+      if (inputElement.value.length > 0 && reMatch) {
+        inputElement.setCustomValidity(inputElement.dataset.validationtxt);
+      } else {
+        inputElement.setCustomValidity('');
+      }
+      inputElement.reportValidity();
+    });
+  });
+});

resources/assets/themes/base.scss

@@ -433,3 +433,7 @@ input[type='number']::-webkit-inner-spin-button {
 input[type='number'] {
   -moz-appearance: textfield;
 }
+
+input[type='text']:invalid {
+  color: map.get($theme-colors, 'danger');
+}

resources/views/macros/form.twig

@@ -26,6 +26,8 @@ Renders an input field wrapped in a DIV with mb-3.
 @param {int|float|string} [opt.max] - Optional "max" attribute value.
 @param {int|float} [opt.step] - Optional "step" attribute value.
 @param {string} [opt.autocomplete] - Optional "autocomplete" attribute value.
+@param {string} [opt.validationre] - Optional "data-validationre" attribute value.
+@param {string} [opt.autocomplete] - Optional "data-validationtxt" attribute value.
 @param {bool} [opt.required=false] - Whether to add the "required" attribute. Defaults to false.
 @param {bool} [opt.disabled=false] - Whether to add the "disabled" attribute. Defaults to false.
 @param {bool} [opt.readonly=false] - Whether to add the "readonly" attribute. Defaults to false.
@@ -53,6 +55,8 @@ Renders an input field wrapped in a DIV with mb-3.
             {%- if opt.max is defined %} max="{{ opt.max }}"{% endif %}
             {%- if opt.step is defined %} step="{{ opt.step }}"{% endif %}
             {%- if opt.autocomplete is defined %} autocomplete="{{ opt.autocomplete }}"{% endif %}
+            {%- if opt.validationre is defined %} data-validationre="{{ opt.validationre }}"{% endif %}
+            {%- if opt.validationtxt is defined %} data-validationtxt="{{ opt.validationtxt }}"{% endif %}
             {%- if opt.required|default(false) %}
                 required
             {%- endif -%}

resources/views/pages/registration.twig

@@ -15,7 +15,7 @@
 
     {% include 'layouts/parts/messages.twig' %}
 
-    <form method="post" action="{{ url('/register') }}" novalidate class="mb-5">
+    <form method="post" action="{{ url('/register') }}" class="mb-5">
         {{ csrf() }}
 
         <div class="mb-5">
@@ -46,6 +46,8 @@
                             'required': true,
                             'required_icon': true,
                             'value': f.formData('username', ''),
+                            'validationre': config('username_regex'),
+                            'validationtxt': __('validation.username.username'),
                         }
                     ) }}
                 </div>