Fix input fields validation message #437

sass/components/forms/_input-fields.scss

@@ -17,45 +17,32 @@ input[type=month]:not(.browser-default),
 input[type=tel]:not(.browser-default),
 input[type=number]:not(.browser-default),
 input[type=search]:not(.browser-default),
-textarea.materialize-textarea { 
+textarea.materialize-textarea {
   outline: none;
   color: var(--md-sys-color-on-background);
-  width: 100%;  
+  width: 100%;
   font-size: $md_sys_typescale_body-large_size; //16px; // => 16 dp
   height: 56px; // 56dp
 }
 
-/* Validation Sass Placeholders */
-%valid-input-style {
-  border-bottom: 1px solid $success-color;
-  box-shadow: 0 1px 0 0 $success-color;
-}
 %invalid-input-style {
   border-bottom: 2px solid var(--md-sys-color-error);
   box-shadow: 0 1px 0 0 var(--md-sys-color-error);
 }
-%hidden-text {
-  color: transparent;
-  user-select: none;
-  pointer-events: none;
-}
-/*
-%custom-success-message {
-  content: attr(data-success);
-  color: $success-color;
+%hidden-text > span {
+  display: none
 }
 %custom-error-message {
   content: attr(data-error);
   color: var(--md-sys-color-error);
 }
-*/
 
 .input-field {
   --input-color: var(--md-sys-color-primary);
 
   position: relative;
   clear: both;
- 
+
   // Default
 
   input, textarea {
@@ -71,7 +58,7 @@ textarea.materialize-textarea {
     border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-   
+
     &:focus:not([readonly]) {
       border-bottom: 2px solid var(--input-color);
       padding-top: 20px + 1px; // add border-width
@@ -99,6 +86,26 @@ textarea.materialize-textarea {
     &:disabled + label, &[readonly="readonly"] + label {
       color: rgba(var(--md_sys_color_on-surface), 0.38);
     }
+
+    // Hide helper text on data message
+    &.invalid ~ .supporting-text[data-error] {
+      @extend %hidden-text;
+    }
+
+    // Invalid Input Style
+    &.invalid {
+      @extend %invalid-input-style;
+    }
+
+    // Custom Error message
+    &.invalid ~ .supporting-text:after {
+      @extend %custom-error-message;
+    }
+
+    &.invalid ~ label,
+    &:focus.invalid ~ label {
+      color: var(--md-sys-color-error);
+    }
   }
 
   input::placeholder {
@@ -150,7 +157,7 @@ textarea.materialize-textarea {
   .suffix {
     position: absolute;
     right: 12px;
-    top: 16px;    
+    top: 16px;
     user-select: none;
   }
 
@@ -200,7 +207,7 @@ textarea.materialize-textarea {
         color: rgba(var(--md_sys_color_on-surface), 0.38);
         border-color: rgba(var(--md_sys_color_on-surface), 0.12);
       }
-      
+
     }
   }
 
@@ -228,7 +235,7 @@ textarea.materialize-textarea {
 }
 
 /* Search Field */
-.searchbar {  
+.searchbar {
   .prefix {
     position: absolute;
     //left: 12px;
@@ -317,4 +324,4 @@ textarea {
       margin: 5px 15px;
     }
   }
-}
+}

src/forms.ts

@@ -1,6 +1,32 @@
 import { Utils } from "./utils";
 
 export class Forms {
+  /**
+   * Checks if the label has validation and apply
+   * the correct class and styles
+   * @param textfield
+   */
+  static validateField(textfield: HTMLInputElement) {
+    if (!textfield) {
+      console.error('No text field element found');
+      return;
+    }
+
+    let hasLength = textfield.getAttribute('data-length') !== null;
+    let lenAttr = parseInt(textfield.getAttribute('data-length'));
+    let len = textfield.value.length;
+
+    if (len === 0 && textfield.validity.badInput === false && !textfield.required && textfield.classList.contains('validate')) {
+      textfield.classList.remove('invalid');
+    } else if (textfield.classList.contains('validate')) {
+      // Check for character counter attributes
+      if (((textfield.validity.valid) && hasLength && len <= lenAttr) || textfield.validity.valid && !hasLength) {
+        textfield.classList.remove('invalid');
+      } else {
+        textfield.classList.add('invalid');
+      }
+    }
+  }
 
   /**
    * Resizes the given TextArea after updating the
@@ -79,8 +105,22 @@ export class Forms {
   };
 
   static Init(){
-    if (typeof document !== 'undefined') 
+    if (typeof document !== 'undefined')
       document?.addEventListener("DOMContentLoaded", () => {
+        document.addEventListener('change', (e: KeyboardEvent) => {
+          const target = <HTMLInputElement>e.target;
+          if (target instanceof HTMLInputElement) {
+            if (target.value.length !== 0 || target.getAttribute('placeholder') !== null) {
+              for (const child of target.parentNode.children) {
+                if (child.tagName == "label") {
+                  child.classList.add("active");
+                }
+              }
+            }
+            Forms.validateField(target);
+          }
+        })
+
         document.addEventListener('keyup', (e: KeyboardEvent) => {
           const target = <HTMLInputElement>e.target;
           // Radio and Checkbox focus class
@@ -128,5 +168,5 @@ export class Forms {
           pathInput.dispatchEvent(new Event('change',{bubbles:true, cancelable:true, composed:true}));
         });
   }
-  
+
 }