feat: native error displayed, can overwrite native message

src/lib/elements/forms/inputCheckbox.svelte

@@ -11,7 +11,11 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
+    let element: HTMLInputElement;
+
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
@@ -26,6 +30,7 @@
     <div class="input-text-wrapper">
         <input
             on:invalid={handleInvalid}
+            bind:this={element}
             {id}
             {disabled}
             {required}

src/lib/elements/forms/inputEmail.svelte

@@ -11,7 +11,7 @@
     export let disabled = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let errorMessage = 'Your email should be formatted as: name@example.com';
+    export let errorMessage = 'An error occurred';
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
@@ -24,6 +24,11 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
+        if (element.validity.typeMismatch) {
+            errorMessage = 'Your email should be formatted as: name@example.com';
+        }
         event.preventDefault();
         showHelper = true;
     };

src/lib/elements/forms/inputNumber.svelte

@@ -25,6 +25,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };

src/lib/elements/forms/inputPassword.svelte

@@ -27,6 +27,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };

src/lib/elements/forms/inputPhone.svelte

@@ -25,6 +25,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };

src/lib/elements/forms/inputRadio.svelte

@@ -13,7 +13,11 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
+    let element: HTMLInputElement;
+
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
@@ -27,6 +31,7 @@
     <div class="input-text-wrapper">
         <input
             on:invalid={handleInvalid}
+            bind:this={element}
             {id}
             {name}
             {disabled}

src/lib/elements/forms/inputSelect.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -11,12 +11,37 @@
         value: string;
         label: string;
     }[];
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
+
+    let element: HTMLSelectElement;
+
+    const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
+        if (element.validity.typeMismatch) {
+            errorMessage = 'Your email should be formatted as: name@example.com';
+        }
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="select">
-        <select bind:value {id} {required} {disabled}>
+        <select
+            on:invalid={handleInvalid}
+            bind:this={element}
+            bind:value
+            {id}
+            {required}
+            {disabled}>
             {#each options as option}
                 <option value={option.value} selected={option.value === value}>
                     {option.label}
@@ -25,4 +50,7 @@
         </select>
         <span class="icon-cheveron-down" aria-hidden="true" />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>

src/lib/elements/forms/inputSwitch.svelte

@@ -10,7 +10,11 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
+    let element: HTMLInputElement;
+
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
@@ -31,6 +35,7 @@
                 type="checkbox"
                 class="switch"
                 role="switch"
+                bind:this={element}
                 bind:checked={value}
                 on:change />
         </div>

src/lib/elements/forms/inputTags.svelte

@@ -53,6 +53,8 @@
     };
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };

src/lib/elements/forms/inputText.svelte

@@ -25,6 +25,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };

src/lib/elements/forms/inputTextarea.svelte

@@ -24,6 +24,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };