hr-design-system-handlebars 1.105.0 → 1.105.1

package/dist/views_static/components/forms/fields.hbs

@@ -13,7 +13,6 @@
         {{/if}}
         
     {{else}}
-
         <div class="js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
                 {{~> components/forms/textarea
@@ -27,6 +26,7 @@
                     _required=this.isRequired
                     _maxLength=this.maxLength
                     _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
+                    _formId=../_formId
                 }}
             {{else if this.type.isText}}
                 {{~> components/forms/input
@@ -43,6 +43,7 @@
                     _maxLength=this.maxLength
                     _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
                     _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
+                    _formId=../_formId
                 }}
             {{else if this.type.isSelect}}
                 {{~> components/forms/select
@@ -53,6 +54,7 @@
                     _items=this.options
                     _required=this.isRequired
                     _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
+                    _formId=../_formId
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
@@ -66,7 +68,7 @@
                         _multipleChoice=../_multipleChoice
                         _addClass=../_addClass
                         _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
-
+                        _formId=../_formId  
                     }}
                 {{else}}
                     {{~> components/forms/choice
@@ -79,6 +81,7 @@
                         _required=this.isRequired
                         _selected= this.options.[0].isSelected
                         _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
+                        _formId=../_formId
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}
@@ -89,6 +92,7 @@
                     _multiple=false
                     _required=this.isRequired
                     _locaKeyButton="uploadForm_label_file_button"
+                    _formId=../_formId
                 }}
             {{/if}}
         </div>

package/dist/views_static/components/forms/input.hbs

@@ -1,19 +1,17 @@
 <div class="  relative flex flex-col w-full mb-5 {{_wrapperClass}}"
-   :class="{'animate-shake': hideDescription() }"
    ax-load
-   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   x-init="validateField()"
    x-ignore
    >
    <input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none" 
       :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
-      x-bind:data-is-valid="valid ? 'true' : 'false'" 
-      {{#if _required}}
-         @focus="isFocused = true;"
-         @blur="wasFocused = true; isFocused=false; input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
-         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
-      {{/if}}
+      x-bind:data-is-valid="valid ? 'true' : 'false'"     
+      @focus="isFocused = true;"
+      @blur="wasFocused = true; isFocused=false; validateField();"
+      x-on:keyup ="validateField();"
       type="{{#if _type}}{{_type}}{{/if}}"
       name="{{#if _name}}{{_name}}{{/if}}"
       {{#if _locaKey}}
@@ -61,20 +59,35 @@
         {{/if}}
       {{/if}}
    </label> 
-   {{#if _required}}
-      <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-         {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
-      </div>
-  {{/if}}
+   
+   <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
+      {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
+   </div>
+ 
    <div class="flex items-end justify-between h-5 font-heading">     
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+         <div class="pl-4 text-xs text-gray-500" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
-      {{#if _required}}
-         <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
-      {{/if}}
-      {{#if _maxLength}}
-         <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
-      {{/if~}}
+      
+      <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      
+   </div>
+   <div class="hidden">
+      <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
+         DEBUG
+      </div>
+      <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+         <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+         <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+         <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
+        
+         <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
+         <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>   
+         <div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>  
+         <div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
+         <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
+         <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
+         <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
+      </div> 
    </div>
 </div>

package/dist/views_static/components/forms/select.hbs

@@ -1,6 +1,6 @@
 <div class="relative flex flex-col w-full mb-5 "
    ax-load
-   x-data="selectHandler('select{{nextRandom}}')"
+   x-data="inputHandler('select{{nextRandom}}', '{{_formId}}','select')"
    x-ignore
 >
     <select
@@ -43,17 +43,12 @@
     ">      
         {{_label}}{{#if _required}}*{{/if}}
     </label>
-    {{#if _required}}
-      <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-14">
-            {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
-      </div>
-    {{/if}}
     <div class="flex items-end justify-between h-5 font-heading">     
         {{#if _description}}  
-            <div class="pl-4 text-xs text-gray-500 " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
+            <div class="pl-4 text-xs text-gray-500 " :class="{'hidden': hideDescription()}">{{_description}}</div>
         {{/if}}
         {{#if _required}}
-            <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
+            <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
         {{/if}}
     </div>
     <div class="absolute right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">

package/dist/views_static/components/forms/textarea.hbs

@@ -1,6 +1,9 @@
 <div class="relative flex flex-col w-full mb-5"
-x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}' , valid: true, wasFocused: false, isFocused: false}"
-:class="{'animate-shake': !valid && wasFocused && !isFocused }">
+   ax-load
+   x-data="inputHandler('textarea{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','textarea','','{{#if _formField.isValid}}{{{_formField.forHtmlContent}}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   x-init="validateField()"
+   x-ignore
+>
    <div class="w-full h-4 bg-white"></div>
    <textarea
       x-model="textarea{{getRandom}}"
@@ -33,7 +36,7 @@ x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHt
       {{#if _required}}required{{/if}}
       class="relative w-full px-4 pb-px text-gray-800 placeholder-transparent bg-white border-blue-500 min-h-12 peer border-y focus:border-b-2 focus:pb-0 border-t-transparent focus:outline-none" 
       {{#if _required}}
-         :class="{'border-blue-500': valid || !wasFocused || isFocused,'border-red-500': !valid && wasFocused  && !isFocused}"
+         :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
       {{/if}}
    >{{~#if _formField.isValid~}}
         {{{_formField.forHtmlContent}}}
@@ -57,16 +60,16 @@ x-data="{ textarea{{nextRandom}}: '{{#if _formField.isValid}}{{{_formField.forHt
       {{/if}}
    </label>
    {{#if _required}}
-      <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-         {{> components/forms/error_icon _xclass="{'hidden': valid || !wasFocused || isFocused }"}}
-      </div>
+         <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
+            {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
+         </div>
   {{/if}}
    <div class="flex items-end justify-between h-5 font-heading">     
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-500 min-h- " {{#if _required}}:class="{'hidden': !valid && wasFocused && !isFocused}"{{/if}}>{{_description}}</div>
+         <div class="pl-4 text-xs text-gray-500" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
       {{#if _required}}
-         <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': valid || !wasFocused || isFocused}" >{{_errorMessage}}</div>
+         <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" >{{_errorMessage}}</div>
       {{/if}}
       {{#if _maxLength}}
          <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="textarea{{getRandom}}.length">0</span>/{{_maxLength}}</div>

package/dist/views_static/components/forms/webform.hbs

@@ -6,59 +6,37 @@
             {{this.title}}
         </h3>
         
-        <form x-data="contactForm()"
-            
+        <form
+            x-ref="form{{nextRandom}}"
+            ax-load
+            x-data="contactForm('form{{getRandom}}')"
+            x-init="formInit()"
+            x-ignore
+
             @submit.prevent="submitData"
-            x-ref="contactFormRef" 
+            id="form{{getRandom}}"     
             class="relative flex flex-col justify-center overflow-hidden group" 
-            id="form--{{nextRandom}}" 
             action="{{this.url}}" 
             method="post" 
             enctype="{{if this.isMultipart 'multipart/form-data' 'application/x-www-form-urlencoded'}}" 
-            accept-charset="utf-8" >     
-            {{> components/forms/fields }}
+            accept-charset="utf-8"
+            
+            >
+           
+            <div class="">
+                <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
+                    DEBUG
+                </div>
+                <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+                    <div>submissionAttempted[form{{getRandom}}]:<span x-text="getSubmissionAttempted()" class="font-bold" :class="getSubmissionAttempted() ? 'text-green-800' : 'text-red-700'"></span></div>
+                </div> 
+            </div>
+            {{> components/forms/fields _formId=(joinStrings 'form' (getRandom)) }} 
 
             {{> components/forms/controls }}
-        </form>
-        <script>
-        function contactForm() {
-            return {
-                formData: {
-                    name: '',
-                    email: '',
-                    message: ''
-                },
-                clickHandler() {
-                    console.log('check for Error ');
-                    const form = this.$refs.contactFormRef;
-                    const formData = new FormData(form);
-                    const fields = Array.from(form.elements); // Array of all form fields
 
-                    // Loop through each field, focus it, blur it, and serialize the data
-                    fields.forEach((field) => {
-                        if (field.type !== 'submit') {  // Skip the submit button
-                            field.focus();  // Focus the field
-                            field.blur();   // Immediately unfocus (blur) the field
-                        }
-                    });
-                    if(form.reportValidity()){
-                        this.submitData();
-                    }
-                    
-                },
-                submitData() {
-                    const formData = new FormData(this.$refs.contactFormRef);
-                    // Convert the FormData to a serialized string
-                    const serializedData = Array.from(formData.entries())
-                        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
-                        .join('&');
-
-                    // Log the serialized form data
-                    console.log('DATA: ' + serializedData);
-                }
-            }
-        }
-    </script>
+        </form>
+        
     {{/components/forms/backgroundBox }}
 {{~else~}}
     {{> content/webform/components/webform _addClass="print:hidden copytext__clearBox marginTrailer--m"}}

package/dist/views_static/components/site_header/brand_navigation/brand_navigation_item.hbs

@@ -1,3 +1,3 @@
-<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">   
+<li class="sb-brand-navigation-item h-8 {{#if @first }}-ml-3 {{/if}}{{#if this.selected}} h-10 md:h-8 font-bold text-brandnav-pseudo {{/if}}cursor-pointer inline-block hover:lg:underline active:font-bold active:text-primary">   
    <a class="{{if (isUserConsentNeeded (resourceUrl "index.html" _site=this.site)) 'js-user-consent-needed ' ''}}link-focus-inset leading-[34px] items-center flex-col px-3 {{#if this.selected }}relative {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxNavigation", "secondLevelId": 1, "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
 </li>

package/dist/views_static/components/site_header/section_navigation/section_navigation_item.hbs

@@ -2,7 +2,7 @@
     <li x-data="dropdown"
         @click.outside="dropped = false" 
         @close-servicemenu.window="dropped = false" 
-        :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' lg:hover:underline'" 
+        :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary ' : ' hover:lg:underline'" 
         class="flex flex-wrap justify-start order-2 w-full list-none transition-[max-height] md:transition-none duration-1000 ease-out border-b border-navigation-border-color text-navigation-text sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-navigation-bg lg:rounded-t">  
         
         {{#if this.isCluster ~}}

package/dist/views_static/components/site_header/service_navigation/service_navigation_item.hbs

@@ -8,7 +8,7 @@
                 @close-servicemenu.window="dropped = false; $store.serviceNavIsOpen = false"
                 x-data="dropdown"
                 id="{{getRandom}}"
-                class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset {{#if this.selected}}-currentService{{/if}}"
+                class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 hover:lg:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 text-navigation-icons link-focus-inset {{#if this.selected}}-currentService{{/if}}"
 
                 :class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''" 
                 aria-owns="flyout-{{getRandom}}" 

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.105.0",
+  "version": "1.105.1",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/fixtures/content/copytext/copytext_webform.json

@@ -4,6 +4,38 @@
             "isHeadline": true,
             "text": "Copytext mit Formular"
         },
+        {
+            "paragraphBoxItem": {
+                "isWebForm": true,
+                "hasNewWebForm": true,
+                "title": "Kontaktformular",
+                "fields":[
+                    {
+                        "@->jsoninclude": "forms/form_fields.inc.json",
+                        "@->contentpath": "input-text-vorname-required"
+                    },
+                    {
+                        "@->jsoninclude": "forms/form_fields.inc.json",
+                        "@->contentpath": "input-text-nachname-required"
+                    },
+                    {
+                      "@->jsoninclude": "forms/form_fields.inc.json",
+                      "@->contentpath": "checkbox",
+                      "@->overrides": [
+                         {
+                            "@->contentpath": "label",
+                            "@->value": "Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de."
+                         }
+                      ]
+                    }
+                ]
+                
+            }
+        },
+        {
+            "isHeadline": true,
+            "text": "Noch ein Formular"
+        },
         {
             "paragraphBoxItem": {
                 "isWebForm": true,
@@ -22,9 +54,37 @@
                         "@->jsoninclude": "forms/form_fields.inc.json",
                         "@->contentpath": "input-text-nachname-required"
                     },
+                    {
+                        "@->jsoninclude": "forms/form_fields.inc.json",
+                        "@->contentpath": "select"
+                    },
+                    {
+                        "@->jsoninclude": "forms/form_fields.inc.json",
+                        "@->contentpath": "input-email",
+                        "@->overrides": [
+                            {
+                                "@->contentpath": "isRequired",
+                                "@->value": false
+                            }
+                        ]
+                    },
+                    {
+                        "@->jsoninclude": "forms/form_fields.inc.json",
+                        "@->contentpath": "input-email"
+                    },
                     {
                         "@->jsoninclude": "forms/form_fields.inc.json",
                         "@->contentpath": "textarea"
+                    },
+                    {
+                      "@->jsoninclude": "forms/form_fields.inc.json",
+                      "@->contentpath": "checkbox",
+                      "@->overrides": [
+                         {
+                            "@->contentpath": "label",
+                            "@->value": "Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de."
+                         }
+                      ]
                     }
                 ]
                 

package/src/assets/js/alpine.js

@@ -20,7 +20,7 @@ AsyncAlpine.init(Alpine)
     
     .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
     .data('inputHandler', ()=> import('components/forms/inputHandler.alpine.js'))
-    .data('selectHandler', ()=> import('components/forms/selectHandler.alpine.js'))
+    .data('contactForm', ()=> import('components/forms/contactForm.alpine.js'))
     .start()
 
 window.Alpine = Alpine
@@ -52,6 +52,9 @@ Alpine.store('sharingIsOpen', {
 Alpine.store('sharingBottomPos', {
     current: '0'
 })
+Alpine.store('forms', {
+    submissionAttempted: []
+})
 // Initialization of data handlers
 Alpine.data('mainNavigationHandler', mainNavigationHandler)
 Alpine.data('overlayHandler', overlayHandler)

package/src/stories/views/components/content/copytext/fixtures/copytext_webform.json

@@ -1 +1 @@
-{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isTextarea":true,"asString":"textarea"},"name":"textarea","label":"Textarea","description":"Das ist der Beschreibungstext von Textarea","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"300","columns":"30","rows":"10","counter":true}]}}]}
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}},{"isHeadline":true,"text":"Noch ein Formular"},{"paragraphBoxItem":{"isWebForm":true,"hasNewWebForm":true,"title":"Kontaktformular","fields":[{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext von Vorname","defaultValue":"","isHidden":false,"isRequired":false},{"type":{"isText":true,"asString":"text"},"name":"vorname","label":"Vorname","description":"Das ist der Beschreibungstext (*Pflichtfeld)","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isText":true,"asString":"text"},"name":"nachname","label":"Nachname","description":"","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isSelect":true,"asString":"select"},"name":"Select Name","label":"Wen möchten Sie erreichen?","description":"Das ist der Beschreibungstext von Select","defaultValue":"","isHidden":false,"isRequired":true,"options":[{"id":"option1","value":"option1","selected":false,"label":"Option 1"},{"id":"option2","value":"option2","selected":false,"label":"Option 2"},{"id":"option3","value":"option3","selected":false,"label":"Option 3"},{"id":"option4","value":"option4","selected":false,"label":"Option 4"}]},{"type":{"isText":true,"isEmail":true,"asString":"email"},"name":"email","label":"Email","description":"Das ist der Beschreibungstext von Email","defaultValue":"","isHidden":false,"isRequired":false,"maxLength":"140"},{"type":{"isText":true,"isEmail":true,"asString":"email"},"name":"email","label":"Email","description":"Das ist der Beschreibungstext von Email","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"140"},{"type":{"isTextarea":true,"asString":"textarea"},"name":"textarea","label":"Textarea","description":"Das ist der Beschreibungstext von Textarea","defaultValue":"","isHidden":false,"isRequired":true,"maxLength":"300","columns":"30","rows":"10","counter":true},{"isGrouped":false,"type":{"isChoice":true,"asString":"checkbox"},"name":"checkbox","label":"Ich bin damit einverstanden, dass der hr die von mir im vorstehenden Formular angegebenen personenbezogenen Daten für den Zweck der Kontaktaufnahme mit Upload verarbeitet. Eine Weitergabe an Dritte findet nicht statt, es sei denn, es wird ausdrücklich darauf hingewiesen. Unsere Datenschutzerklärung mit sämtlichen Informationen gemäß Art 13 DSGVO zur Datenverarbeitung durch den hr und zu Ihren Rechten können Sie unter Datenschutzerklärung einsehen. Den Datenschutzbeauftragten des hr erreichen Sie unter datenschutz@hr.de.","isMeta":false,"description":"Das ist der Beschreibungstext von Checkbox","isRequired":true}]}}]}

package/src/stories/views/components/forms/choice.hbs

@@ -1,12 +1,12 @@
 <div class="relative flex flex-col w-full {{#unless _inGroup}} mb-6 md:mb-12{{/unless}} gap-y-4 md:gap-y-5" 
    ax-load
-   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}','{{_type}}')"
+   x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}','{{_type}}')"
    x-ignore
 >
 <div class="flex flex-row items-center w-full gap-x-2 md:gap-x-3">
   <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white border appearance-none cursor-pointer {{~inline-switch _type '["checkbox","radio"]' '["  border-blue-science-hex checked:bg-blue-congress-hex checked:border-transparent","  border-blue-science-hex checked:bg-white checked:border-blue-congress-hex rounded-full",""]'}}"
       :class="{' border-blue-science-hex': hideError(),'border-red-700': hideDescription() }"
-      @change="validateInput"
+      @change="input{{getRandom}}.checked ? valid = true : valid = false;"
       x-model="isChecked"
       id="input{{getRandom}}"
       {{#if _required}}

package/src/stories/views/components/forms/contactForm.alpine.js

@@ -0,0 +1,36 @@
+export default function contactForm(formId) {
+    return {
+        formInit(){
+            this.$store.forms.submissionAttempted[formId] = false;
+            console.log("this.$store.forms.submissionAttempted",this.$store.forms.submissionAttempted[formId]);
+        },
+        clickHandler() {
+            console.log('check for Error:',formId);
+            const form = this.$refs[formId];
+            console.log('form',form);
+            const formData = new FormData(form);
+            const fields = Array.from(form.elements); // Array of all form fields
+
+            // Loop through each field, focus it, blur it, and serialize the data
+        
+            if(form.reportValidity()){
+                this.submitData();
+            } else {
+                this.$store.forms.submissionAttempted[formId] = true;
+            }
+        },
+        submitData() {
+            const formData = new FormData(this.$refs[formId]);
+            // Convert the FormData to a serialized string
+            const serializedData = Array.from(formData.entries())
+                .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
+                .join('&');
+
+            // Log the serialized form data
+            console.log('DATA: ' + serializedData);
+        },
+        getSubmissionAttempted() {
+            return this.$store.forms.submissionAttempted[formId]
+        }
+    }
+}

package/src/stories/views/components/forms/fields.hbs

@@ -13,7 +13,6 @@
         {{/if}}
         
     {{else}}
-
         <div class="js-wrapper-{{this.name}}">
             {{#if this.type.isTextarea}}
                 {{~> components/forms/textarea
@@ -27,6 +26,7 @@
                     _required=this.isRequired
                     _maxLength=this.maxLength
                     _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
+                    _formId=../_formId
                 }}
             {{else if this.type.isText}}
                 {{~> components/forms/input
@@ -43,6 +43,7 @@
                     _maxLength=this.maxLength
                     _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
                     _errorEmail="Bitte geben Sie eine gültige E-Mail-Adresse ein."
+                    _formId=../_formId
                 }}
             {{else if this.type.isSelect}}
                 {{~> components/forms/select
@@ -53,6 +54,7 @@
                     _items=this.options
                     _required=this.isRequired
                     _errorMessage="Bitte füllen Sie dieses Pflichtfeld aus"
+                    _formId=../_formId
                 }}
             {{else if this.type.isChoice}}
                 {{#if this.isGrouped }}
@@ -66,7 +68,7 @@
                         _multipleChoice=../_multipleChoice
                         _addClass=../_addClass
                         _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
-
+                        _formId=../_formId  
                     }}
                 {{else}}
                     {{~> components/forms/choice
@@ -79,6 +81,7 @@
                         _required=this.isRequired
                         _selected= this.options.[0].isSelected
                         _errorMandatory="Bitte füllen Sie dieses Pflichtfeld aus"
+                        _formId=../_formId
                     }}
                 {{/if}}
             {{else if this.type.isUpload}}
@@ -89,6 +92,7 @@
                     _multiple=false
                     _required=this.isRequired
                     _locaKeyButton="uploadForm_label_file_button"
+                    _formId=../_formId
                 }}
             {{/if}}
         </div>

package/src/stories/views/components/forms/input.hbs

@@ -1,19 +1,17 @@
 <div class="  relative flex flex-col w-full mb-5 {{_wrapperClass}}"
-   :class="{'animate-shake': hideDescription() }"
    ax-load
-   x-data="inputHandler('input{{nextRandom}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   x-data="inputHandler('input{{nextRandom}}','{{_formId}}','{{_errorMandatory}}',{{#if _isEmail}}'email'{{else}}'{{_type}}'{{/if}},'{{_errorEmail}}','{{#if _formField.forHtmlAttribute}}{{_formField.forHtmlAttribute}}{{else}}{{#if _value}}{{_value}}{{else}}{{_defaultValue}}{{/if}}{{/if}}')"
+   x-init="validateField()"
    x-ignore
    >
    <input class="relative w-full h-12 pt-4 pl-4 text-gray-800 placeholder-transparent bg-white border-blue-500 pr-9 peer border-y focus:border-y-2 border-t-transparent focus:outline-none" 
       :class="{'border-blue-500': hideError(),'border-red-700': hideDescription() }"
       x-model="input{{getRandom}}"
       id="input{{getRandom}}"
-      x-bind:data-is-valid="valid ? 'true' : 'false'" 
-      {{#if _required}}
-         @focus="isFocused = true;"
-         @blur="wasFocused = true; isFocused=false; input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
-         x-on:keyup ="input{{getRandom}}.length > 0 ? valid = true : valid = false; validateEmail()"
-      {{/if}}
+      x-bind:data-is-valid="valid ? 'true' : 'false'"     
+      @focus="isFocused = true;"
+      @blur="wasFocused = true; isFocused=false; validateField();"
+      x-on:keyup ="validateField();"
       type="{{#if _type}}{{_type}}{{/if}}"
       name="{{#if _name}}{{_name}}{{/if}}"
       {{#if _locaKey}}
@@ -61,20 +59,35 @@
         {{/if}}
       {{/if}}
    </label> 
-   {{#if _required}}
-      <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
-         {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
-      </div>
-  {{/if}}
+   
+   <div class="absolute top-0 z-10 flex items-center justify-center h-12 right-4">
+      {{> components/forms/error_icon _xclass="{'hidden': hideError() }"}}
+   </div>
+ 
    <div class="flex items-end justify-between h-5 font-heading">     
       {{#if _description}}  
-         <div class="pl-4 text-xs text-gray-500" {{#if _required}}:class="{'hidden': hideDescription() }"{{/if}}>{{_description}}</div>
+         <div class="pl-4 text-xs text-gray-500" :class="{'hidden': hideDescription() }">{{_description}}</div>
       {{/if}}
-      {{#if _required}}
-         <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
-      {{/if}}
-      {{#if _maxLength}}
-         <div class="px-4 ml-auto text-xs text-gray-500"><span x-text="input{{getRandom}}.length">0</span>/{{_maxLength}}</div>
-      {{/if~}}
+      
+      <div class="hidden pl-4 text-xs text-red-700" :class="{'hidden': hideError()}" x-text="errorMessage"></div>
+      
+   </div>
+   <div class="hidden">
+      <div class="px-4 py-2 font-bold text-white bg-red-500 rounded-t">
+         DEBUG
+      </div>
+      <div class="px-4 py-3 text-red-700 bg-red-100 border border-t-0 border-red-400 rounded-b">
+         <div>isFocused:<span x-text="isFocused" class="font-bold" :class="isFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+         <div>wasFocused:<span x-text="wasFocused" class="font-bold" :class="wasFocused ? 'text-green-800' : 'text-red-700'"></span></div>
+         <div>valid:<span x-text="valid" class="font-bold" :class="valid ? 'text-green-800' : 'text-red-700'"></span></div>
+        
+         <div>hideDescription:<span x-text="hideDescription()" class="font-bold" :class="hideDescription() ? 'text-green-800' : 'text-red-700'"></span></div>   
+         <div>hideError:<span x-text="hideError()" class="font-bold" :class="hideError() ? 'text-green-800' : 'text-red-700'"></span></div>   
+         <div>input.length:<span x-text="input{{getRandom}}.length " class="font-bold" ></span></div>  
+         <div>input:<span x-text="input{{getRandom}}" class="font-bold" ></span></div>
+         <div>errorMessage:<span x-text="errorMessage" class="font-bold" ></span></div>
+         <div>valueMissing:<span x-text="valueMissing" class="font-bold" ></span></div>
+         <div>typeMismatch:<span x-text="typeMismatch" class="font-bold" ></span></div>
+      </div> 
    </div>
 </div>